Gallery - fix Axe errors (#25540)

DevExpress · Sep 29, 2023 · ecf1dc2 · ecf1dc2
1 parent 9ecb391
commit ecf1dc2
Show file tree

Hide file tree

Showing 30 changed files with 252 additions and 44 deletions.
diff --git a/packages/devextreme/js/localization/messages/ar.json b/packages/devextreme/js/localization/messages/ar.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Show Resources",
         "dxGantt-showDependencies": "Show Dependencies",
         "dxGantt-dialogStartDateValidation": "Start date must be after {0}",
-        "dxGantt-dialogEndDateValidation": "End date must be after {0}"
+        "dxGantt-dialogEndDateValidation": "End date must be after {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/ca.json b/packages/devextreme/js/localization/messages/ca.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Mostrar recursos",
         "dxGantt-showDependencies": "Mostrar dependències",
         "dxGantt-dialogStartDateValidation": "La data d'inici ha de ser després de {0}",
-        "dxGantt-dialogEndDateValidation": "La data de finalització ha de ser després de {0}"
+        "dxGantt-dialogEndDateValidation": "La data de finalització ha de ser després de {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/cs.json b/packages/devextreme/js/localization/messages/cs.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Show Resources",
         "dxGantt-showDependencies": "Show Dependencies",
         "dxGantt-dialogStartDateValidation": "Start date must be after {0}",
-        "dxGantt-dialogEndDateValidation": "End date must be after {0}"
+        "dxGantt-dialogEndDateValidation": "End date must be after {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/de.json b/packages/devextreme/js/localization/messages/de.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Ressourcen Anzeigen",
         "dxGantt-showDependencies": "Abhängigkeiten Anzeigen",
         "dxGantt-dialogStartDateValidation": "Startdatum muss später sein als {0}",
-        "dxGantt-dialogEndDateValidation": "Enddatum muss später sein als {0}"
+        "dxGantt-dialogEndDateValidation": "Enddatum muss später sein als {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/el.json b/packages/devextreme/js/localization/messages/el.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Show Resources",
         "dxGantt-showDependencies": "Show Dependencies",
         "dxGantt-dialogStartDateValidation": "Start date must be after {0}",
-        "dxGantt-dialogEndDateValidation": "End date must be after {0}"
+        "dxGantt-dialogEndDateValidation": "End date must be after {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/en.json b/packages/devextreme/js/localization/messages/en.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Show Resources",
         "dxGantt-showDependencies": "Show Dependencies",
         "dxGantt-dialogStartDateValidation": "Start date must be after {0}",
-        "dxGantt-dialogEndDateValidation": "End date must be after {0}"
+        "dxGantt-dialogEndDateValidation": "End date must be after {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/es.json b/packages/devextreme/js/localization/messages/es.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Mostrar Recursos",
         "dxGantt-showDependencies": "Mostrar Dependencias",
         "dxGantt-dialogStartDateValidation": "La fecha de inicio debe ser anterior {0}",
-        "dxGantt-dialogEndDateValidation": "La fecha de finalización debe ser posterior {0}"
+        "dxGantt-dialogEndDateValidation": "La fecha de finalización debe ser posterior {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/fa.json b/packages/devextreme/js/localization/messages/fa.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Show Resources",
         "dxGantt-showDependencies": "Show Dependencies",
         "dxGantt-dialogStartDateValidation": "Start date must be after {0}",
-        "dxGantt-dialogEndDateValidation": "End date must be after {0}"
+        "dxGantt-dialogEndDateValidation": "End date must be after {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/fi.json b/packages/devextreme/js/localization/messages/fi.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Show Resources",
         "dxGantt-showDependencies": "Show Dependencies",
         "dxGantt-dialogStartDateValidation": "Start date must be after {0}",
-        "dxGantt-dialogEndDateValidation": "End date must be after {0}"
+        "dxGantt-dialogEndDateValidation": "End date must be after {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/fr.json b/packages/devextreme/js/localization/messages/fr.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Afficher les ressources",
         "dxGantt-showDependencies": "Afficher les dépendances",
         "dxGantt-dialogStartDateValidation": "La date de début doit être postérieure au {0}",
-        "dxGantt-dialogEndDateValidation": "La date de fin doit être postérieure au {0}"
+        "dxGantt-dialogEndDateValidation": "La date de fin doit être postérieure au {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/hu.json b/packages/devextreme/js/localization/messages/hu.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Show Resources",
         "dxGantt-showDependencies": "Show Dependencies",
         "dxGantt-dialogStartDateValidation": "Start date must be after {0}",
-        "dxGantt-dialogEndDateValidation": "End date must be after {0}"
+        "dxGantt-dialogEndDateValidation": "End date must be after {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/it.json b/packages/devextreme/js/localization/messages/it.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Show Resources",
         "dxGantt-showDependencies": "Show Dependencies",
         "dxGantt-dialogStartDateValidation": "Start date must be after {0}",
-        "dxGantt-dialogEndDateValidation": "End date must be after {0}"
+        "dxGantt-dialogEndDateValidation": "End date must be after {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/ja.json b/packages/devextreme/js/localization/messages/ja.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "リソースを表示",
         "dxGantt-showDependencies": "依存関係を表示",
         "dxGantt-dialogStartDateValidation": "開始日を {0} 以降にする必要があります",
-        "dxGantt-dialogEndDateValidation": "終了日は {0} より後にする必要があります"
+        "dxGantt-dialogEndDateValidation": "終了日は {0} より後にする必要があります",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/lt.json b/packages/devextreme/js/localization/messages/lt.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Rodyti resursus",
         "dxGantt-showDependencies": "Rodyti priklausomybes",
         "dxGantt-dialogStartDateValidation": "Pradžios data turi būti po {0}",
-        "dxGantt-dialogEndDateValidation": "Pabaigos data turi būti po {0}"
+        "dxGantt-dialogEndDateValidation": "Pabaigos data turi būti po {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/lv.json b/packages/devextreme/js/localization/messages/lv.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Rādīt Resursus",
         "dxGantt-showDependencies": "Rādīt Sasaistes",
         "dxGantt-dialogStartDateValidation": "Sākuma datumam jābūt vēlākam par {0}",
-        "dxGantt-dialogEndDateValidation": "Beigu datumam jābūt vēlākam par {0}"
+        "dxGantt-dialogEndDateValidation": "Beigu datumam jābūt vēlākam par {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/nb.json b/packages/devextreme/js/localization/messages/nb.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Show Resources",
         "dxGantt-showDependencies": "Show Dependencies",
         "dxGantt-dialogStartDateValidation": "Start date must be after {0}",
-        "dxGantt-dialogEndDateValidation": "End date must be after {0}"
+        "dxGantt-dialogEndDateValidation": "End date must be after {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/nl.json b/packages/devextreme/js/localization/messages/nl.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Show Resources",
         "dxGantt-showDependencies": "Show Dependencies",
         "dxGantt-dialogStartDateValidation": "Start date must be after {0}",
-        "dxGantt-dialogEndDateValidation": "End date must be after {0}"
+        "dxGantt-dialogEndDateValidation": "End date must be after {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/pt.json b/packages/devextreme/js/localization/messages/pt.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Mostrar recursos",
         "dxGantt-showDependencies": "Mostrar dependências",
         "dxGantt-dialogStartDateValidation": "A data de início deve ser após {0}",
-        "dxGantt-dialogEndDateValidation": "A data de término deve ser posterior a {0}"
+        "dxGantt-dialogEndDateValidation": "A data de término deve ser posterior a {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/ro.json b/packages/devextreme/js/localization/messages/ro.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Show Resources",
         "dxGantt-showDependencies": "Show Dependencies",
         "dxGantt-dialogStartDateValidation": "Start date must be after {0}",
-        "dxGantt-dialogEndDateValidation": "End date must be after {0}"
+        "dxGantt-dialogEndDateValidation": "End date must be after {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/ru.json b/packages/devextreme/js/localization/messages/ru.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Отображать Ресурсы",
         "dxGantt-showDependencies": "Отображать Зависимости",
         "dxGantt-dialogStartDateValidation": "Начальная дата должна быть позднее {0}",
-        "dxGantt-dialogEndDateValidation": "Конечная дата должна быть позднее {0}"
+        "dxGantt-dialogEndDateValidation": "Конечная дата должна быть позднее {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/sl.json b/packages/devextreme/js/localization/messages/sl.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Show Resources",
         "dxGantt-showDependencies": "Show Dependencies",
         "dxGantt-dialogStartDateValidation": "Start date must be after {0}",
-        "dxGantt-dialogEndDateValidation": "End date must be after {0}"
+        "dxGantt-dialogEndDateValidation": "End date must be after {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/sv.json b/packages/devextreme/js/localization/messages/sv.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Show Resources",
         "dxGantt-showDependencies": "Show Dependencies",
         "dxGantt-dialogStartDateValidation": "Start date must be after {0}",
-        "dxGantt-dialogEndDateValidation": "End date must be after {0}"
+        "dxGantt-dialogEndDateValidation": "End date must be after {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/tr.json b/packages/devextreme/js/localization/messages/tr.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Show Resources",
         "dxGantt-showDependencies": "Show Dependencies",
         "dxGantt-dialogStartDateValidation": "Start date must be after {0}",
-        "dxGantt-dialogEndDateValidation": "End date must be after {0}"
+        "dxGantt-dialogEndDateValidation": "End date must be after {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/vi.json b/packages/devextreme/js/localization/messages/vi.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Show Resources",
         "dxGantt-showDependencies": "Show Dependencies",
         "dxGantt-dialogStartDateValidation": "Start date must be after {0}",
-        "dxGantt-dialogEndDateValidation": "End date must be after {0}"
+        "dxGantt-dialogEndDateValidation": "End date must be after {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/zh-tw.json b/packages/devextreme/js/localization/messages/zh-tw.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Show Resources",
         "dxGantt-showDependencies": "Show Dependencies",
         "dxGantt-dialogStartDateValidation": "Start date must be after {0}",
-        "dxGantt-dialogEndDateValidation": "End date must be after {0}"
+        "dxGantt-dialogEndDateValidation": "End date must be after {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/localization/messages/zh.json b/packages/devextreme/js/localization/messages/zh.json
@@ -702,6 +702,8 @@
         "dxGantt-showResources": "Show Resources",
         "dxGantt-showDependencies": "Show Dependencies",
         "dxGantt-dialogStartDateValidation": "Start date must be after {0}",
-        "dxGantt-dialogEndDateValidation": "End date must be after {0}"
+        "dxGantt-dialogEndDateValidation": "End date must be after {0}",
+
+        "dxGallery-itemName": "Gallery item"
     }
 }
diff --git a/packages/devextreme/js/ui/gallery.js b/packages/devextreme/js/ui/gallery.js
@@ -18,6 +18,7 @@ import Swipeable from '../events/gesture/swipeable';
 import { BindableTemplate } from '../core/templates/bindable_template';
 import { Deferred } from '../core/utils/deferred';
 import { triggerResizeEvent } from '../events/visibility_change';
+import messageLocalization from '../localization/message';
 
 // STYLE gallery
 
@@ -146,7 +147,10 @@ const Gallery = CollectionWidget.inherit({
             */
 
 
-            _itemAttributes: { role: 'option' },
+            _itemAttributes: {
+                role: 'option',
+                'aria-label': messageLocalization.format('dxGallery-itemName')
+            },
             loopItemFocus: false,
             selectOnFocus: true,
             selectionMode: 'single',
@@ -273,10 +277,13 @@ const Gallery = CollectionWidget.inherit({
 
         this.callBase();
 
-        this.setAria({
-            'role': 'listbox',
+        const useListBoxRole = this._itemsCount() > 0;
+        const ariaAttrs = {
+            'role': useListBoxRole ? 'listbox' : undefined,
             'label': 'gallery'
-        });
+        };
+
+        this.setAria(ariaAttrs);
     },
 
     _render: function() {
@@ -392,10 +399,11 @@ const Gallery = CollectionWidget.inherit({
             const $clonedItem = $(item)
                 .clone(false)
                 .addClass(GALLERY_LOOP_ITEM_CLASS)
+                .removeAttr('id')
                 .css('margin', 0)
                 .appendTo($container);
 
-            this.setAria({ role: 'presentation' }, $clonedItem);
+            this.setAria({ hidden: true }, $clonedItem);
         }
     },
 
@@ -946,7 +954,7 @@ const Gallery = CollectionWidget.inherit({
     _setFocusOnSelect: function() {
         this._userInteraction = true;
 
-        const selectedItem = this.itemElements().filter('.' + GALLERY_ITEM_SELECTED_CLASS);
+        const selectedItem = this._getRealItems().filter('.' + GALLERY_ITEM_SELECTED_CLASS);
         this.option('focusedElement', getPublicElement(selectedItem));
         this._userInteraction = false;
     },