Improve roles of inventory items with drop-down menu

Author: tseykovets

CHANGELOG.md

@@ -67,8 +67,8 @@
 		- Added: Customizable announcement description using assistive technology when pressing a hotkey (see help in menu).
 		- Added: Customizable announcement description using assistive technology when shaking device (see help in menu).
 		- Added: Inventory panel links that do not perform any actions have the aria-disabled attribute, which indicates that there is no associated action but does not suppress the element focusability.
-		- Added: Designation  for assistive technologies whether an inventory item has a drop-down list.
-		- Changed: Each link in the drop-down menu of an inventory item has the role of a list item.
+		- Added: Designation  for assistive technologies whether an inventory item has a drop-down menu.
+		- Changed: Each link in the drop-down menu of an inventory item has the role of a menu item.
 		- Changed: Text labels for player graphic icons.
 		- Fixed: Links in game text are not focusable with keyboard, and do not have link role.
 		- Fixed: Incorrect paragraph representation in game text for screen readers.

js/Client.js

@@ -350,26 +350,16 @@ Client.prototype.drawItem = function (itemName, quantity) {
 
         var li = $('<li>').addClass('dropdown-submenu');
         var liLink = $('<a href="#" class="item_use">');
-        liLink.attr('aria-haspopup', 'listbox');
+        liLink.attr('aria-haspopup', 'menu');
         if (htmlContent) {
             liLink.html(itemDisplayName);
             htmlContent = false;
         } else {
             liLink.text(itemDisplayName);
         }
         li.append(liLink);
-        /**
-         * To improve accessibility, the semantics are modified here using WAI-ARIA.
-         * The original layout consists of a list, a single list item,
-         * and links within the list item. For assistive technologies,
-         * each link is made a list item (see comments on specific lines of code).
-         * In the future, everything can be brought to a single layout
-         * if the graphic design is adapted.
-         */
-        // A11Y modification: Remove list semantics using the presentation role
-var ul = $('<ul role="presentation" class="dropdown-menu">');
-        // A11Y modification: Redefine the list item semantics as a list using the list role
-        var li2 = $('<li role="list" class="menu-item">');
+var ul = $('<ul role="menu" class="dropdown-menu">');
+        var li2 = $('<li role="presentation" class="menu-item">');
 
         var li2link;
         for (var i = 0; i < actions.length; i++) {
@@ -387,16 +377,14 @@ var ul = $('<ul role="presentation" class="dropdown-menu">');
                     actionDisplayName = actions[i][0].replace(/_/g, ' ');
                 }
 
-li2link = $('<a href="#" class="item_use">');
+li2link = $('<a role="menuitem" href="#" class="item_use">');
                 li2link.attr('data-label', actions[i][1]);
                 if (htmlContent) {
                     li2link.html(actionDisplayName);
                     htmlContent = false;
                 } else {
                     li2link.text(actionDisplayName);
                 }
-                // A11Y modification: Place links in elements with the list item role
-                li2link = $('<span role="listitem">').append(li2link);
                 li2.append(li2link);
             }
         }

md/ru/other/changelog.md

@@ -67,8 +67,8 @@
 		- Добавлено: Настраиваемое объявление описания с помощью вспомогательных технологий при нажатии горячей клавиши (см. справку в меню).
 		- Добавлено: Настраиваемое объявление описания с помощью вспомогательных технологий при встряхивании устройства.
 		- Добавлено: Ссылки на панели инвентаря, не выполняющие никаких действий, имеют атрибут aria-disabled, который информирует об отсутствии связанных действий, но не подавляет фокусируемость элемента.
-		- Добавлено: Обозначение для вспомогательных технологий наличия выпадающего списка у элемента инвентаря.
-		- Изменено: Каждая ссылка в выпадающем меню элемента инвентаря имеет роль элемента списка.
+		- Добавлено: Обозначение для вспомогательных технологий наличия выпадающего меню у элемента инвентаря.
+		- Изменено: Каждая ссылка в выпадающем меню элемента инвентаря имеет роль пункта меню.
 		- Изменено: Текстовые метки у графических иконок плеера.
 		- Исправлено: Ссылки в тексте игры не фокусируются с клавиатуры, а также не имеют роль ссылки.
 		- Исправлено: Некорректное представление абзацев в тексте игры для программ экранного доступа.