From c007800867203657a67a94da73992dca39bb67eb Mon Sep 17 00:00:00 2001
From: "Julia.Svinareva" <julia.svinaryova@onlyoffice.com>
Date: Tue, 4 Jun 2024 18:51:10 +0300
Subject: [PATCH] [common] Fix aria-checked in ComboBox

---
 apps/common/main/lib/component/ComboBox.js    | 26 +++++++++----------
 .../main/lib/component/ComboBoxFonts.js       | 14 +++++-----
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/apps/common/main/lib/component/ComboBox.js b/apps/common/main/lib/component/ComboBox.js
index 964e5247fa..204677b8e4 100644
--- a/apps/common/main/lib/component/ComboBox.js
+++ b/apps/common/main/lib/component/ComboBox.js
@@ -102,7 +102,7 @@ define([
                     '</button>',
                     '<ul id="<%= id %>-menu" class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                         '<% _.each(items, function(item) { %>',
-                            '<li id="<%= item.id %>" data-value="<%- item.value %>" role="menuitem" aria-checked="false"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
+                            '<li id="<%= item.id %>" data-value="<%- item.value %>"><a tabindex="-1" type="menuitem" role="menuitemcheckbox" aria-checked="false"><%= scope.getDisplayValue(item) %></a></li>',
                         '<% }); %>',
                     '</ul>',
                 '</span>'
@@ -564,10 +564,10 @@ define([
                     record = this._selectedItem.toJSON();
                     var $selectedItems = $('.selected', $(this.el));
                     $selectedItems.removeClass('selected');
-                    $selectedItems.attr('aria-checked', false);
+                    $selectedItems.find('a').attr('aria-checked', false);
                     var $newSelectedItem = $('#' + this._selectedItem.get('id'), $(this.el));
                     $newSelectedItem.addClass('selected');
-                    $newSelectedItem.attr('aria-checked', true);
+                    $newSelectedItem.find('a').attr('aria-checked', true);
                 }
 
                 // trigger changed event
@@ -619,9 +619,9 @@ define([
                         var $selectedItems = $('.selected', $(this.el)),
                             $newSelectedItem = $('#' + this._selectedItem.get('id'), $(this.el));
                         $selectedItems.removeClass('selected');
-                        $selectedItems.attr('aria-checked', false);
+                        $selectedItems.find('a').attr('aria-checked', false);
                         $newSelectedItem.addClass('selected');
-                        $newSelectedItem.attr('aria-checked', true);
+                        $newSelectedItem.find('a').attr('aria-checked', true);
                     }
                 }
             },
@@ -665,13 +665,13 @@ define([
 
                 var $selectedItems = $('.selected', $(this.el));
                 $selectedItems.removeClass('selected');
-                $selectedItems.attr('aria-checked', false);
+                $selectedItems.find('a').attr('aria-checked', false);
 
                 if (this._selectedItem) {
                     this.setRawValue(this._selectedItem.get(this.displayField));
                     var $newSelectedItem = $('#' + this._selectedItem.get('id'), $(this.el));
                     $newSelectedItem.addClass('selected');
-                    $newSelectedItem.attr('aria-checked', true);
+                    $newSelectedItem.find('a').attr('aria-checked', true);
                 } else {
                     this.setRawValue((defValue!==undefined) ? defValue : value);
                 }
@@ -711,17 +711,17 @@ define([
 
                 var $selectedItems = $('.selected', $(this.el));
                 $selectedItems.removeClass('selected');
-                $selectedItems.attr('aria-checked', false);
+                $selectedItems.find('a').attr('aria-checked', false);
                 this.setRawValue(this._selectedItem.get(this.displayField));
                 var $newSelectedItem = $('#' + this._selectedItem.get('id'), $(this.el));
                 $newSelectedItem.addClass('selected');
-                $newSelectedItem.attr('aria-checked', true);
+                $newSelectedItem.find('a').attr('aria-checked', true);
             },
 
             clearSelection: function (){
                 var $selectedItems = $('.selected', $(this.el));
                 $selectedItems.removeClass('selected');
-                $selectedItems.attr('aria-checked', false);
+                $selectedItems.find('a').attr('aria-checked', false);
                 this._selectedItem = null;
             },
 
@@ -739,9 +739,9 @@ define([
 
                     var $selectedItems = $('.selected', $(this.el));
                     $selectedItems.removeClass('selected');
-                    $selectedItems.attr('aria-checked', false);
+                    $selectedItems.find('a').attr('aria-checked', false);
                     el.addClass('selected');
-                    el.attr('aria-checked', true);
+                    el.find('a').attr('aria-checked', true);
 
                     // trigger changed event
                     this.trigger('selected', this, _.extend({}, this._selectedItem.toJSON()), e);
@@ -770,7 +770,7 @@ define([
                 } else {
                     $(this.el).find('ul').html(_.template([
                         '<% _.each(items, function(item) { %>',
-                           '<li id="<%= item.id %>" data-value="<%- item.value %>" role="menuitem" aria-checked="false"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
+                           '<li id="<%= item.id %>" data-value="<%- item.value %>"><a tabindex="-1" type="menuitem" role="menuitemcheckbox" aria-checked="false"><%= scope.getDisplayValue(item) %></a></li>',
                         '<% }); %>'
                     ].join(''))({
                         items: this.store.toJSON(),
diff --git a/apps/common/main/lib/component/ComboBoxFonts.js b/apps/common/main/lib/component/ComboBoxFonts.js
index 56fd4cb046..575f56ed57 100644
--- a/apps/common/main/lib/component/ComboBoxFonts.js
+++ b/apps/common/main/lib/component/ComboBoxFonts.js
@@ -314,8 +314,8 @@ define([
                     '<ul id="<%= id %>-menu" class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                         '<li class="divider">',
                     '<% _.each(items, function(item) { %>',
-                        '<li id="<%= item.id %>" role="menuitem">',
-                            '<a class="font-item" tabindex="-1" type="menuitem" style="height:<%=scope.getListItemHeight()%>px;"></a>',
+                        '<li id="<%= item.id %>">',
+                            '<a class="font-item" tabindex="-1" type="menuitem" role="menuitemcheckbox" aria-checked="false" style="height:<%=scope.getListItemHeight()%>px;"></a>',
                         '</li>',
                     '<% }); %>',
                     '</ul>',
@@ -599,7 +599,7 @@ define([
 
                     var $selectedItems = $('.selected', $(this.el));
                     $selectedItems.removeClass('selected');
-                    $selectedItems.attr('aria-checked', false);
+                    $selectedItems.find('a').attr('aria-checked', false);
 
                     if (record) {
                         this.setRawValue(record.get(this.displayField));
@@ -608,7 +608,7 @@ define([
 
                         if (itemNode && menuNode) {
                             itemNode.addClass('selected');
-                            itemNode.attr('aria-checked', true);
+                            itemNode.find('a').attr('aria-checked', true);
                             if (this.recent<=0)
                                 menuNode.scrollTop(itemNode.offset().top - menuNode.offset().top);
                         }
@@ -635,7 +635,7 @@ define([
             onInsertItem: function(item) {
                 $(this.el).find('ul').prepend(_.template([
                     '<li id="<%= item.id %>">',
-                        '<a class="font-item" tabindex="-1" type="menuitem" style="height:<%=scope.getListItemHeight()%>px;"></a>',
+                        '<a class="font-item" tabindex="-1" type="menuitem" role="menuitemcheckbox" aria-checked="false" style="height:<%=scope.getListItemHeight()%>px;"></a>',
                     '</li>'
                 ].join(''))({
                     item: item.attributes,
@@ -734,7 +734,7 @@ define([
 
                 var $selectedItems = $('.selected', $(this.el));
                 $selectedItems.removeClass('selected');
-                $selectedItems.attr('aria-checked', false);
+                $selectedItems.find('a').attr('aria-checked', false);
 
                 if (this._selectedItem) {
                     var itemNode = $('#' + this._selectedItem.get('id'), $(this.el)),
@@ -742,7 +742,7 @@ define([
 
                     if (itemNode.length > 0 && menuEl.length > 0) {
                         itemNode.addClass('selected');
-                        itemNode.attr('aria-checked', true);
+                        itemNode.find('a').attr('aria-checked', true);
 
                         var itemTop = itemNode.position().top,
                             menuTop = menuEl.scrollTop();