Gallery - fix Axe errors

packages/devextreme/js/localization/messages/ar.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/ca.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/cs.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/de.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/el.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/en.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/es.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/fa.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/fi.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/fr.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/hu.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/it.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/ja.json

@@ -699,6 +699,8 @@
         "dxGantt-showResources": "リソースを表示",
         "dxGantt-showDependencies": "依存関係を表示",
         "dxGantt-dialogStartDateValidation": "開始日を {0} 以降にする必要があります",
-        "dxGantt-dialogEndDateValidation": "終了日は {0} より後にする必要があります"
+        "dxGantt-dialogEndDateValidation": "終了日は {0} より後にする必要があります",
+
+        "dxGallery-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/lt.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/lv.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/nb.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/nl.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/pt.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/ro.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/ru.json

@@ -699,6 +699,8 @@
         "dxGantt-showResources": "Отображать Ресурсы",
         "dxGantt-showDependencies": "Отображать Зависимости",
         "dxGantt-dialogStartDateValidation": "Начальная дата должна быть позднее {0}",
-        "dxGantt-dialogEndDateValidation": "Конечная дата должна быть позднее {0}"
+        "dxGantt-dialogEndDateValidation": "Конечная дата должна быть позднее {0}",
+
+        "dxGallery-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/sl.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/sv.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/tr.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/vi.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/zh-tw.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

packages/devextreme/js/localization/messages/zh.json

@@ -699,6 +699,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-galleryItemName": "Gallery item"
     }
 }

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-galleryItemName')
+            },
             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;
     },

packages/devextreme/testing/testcafe/tests/gallery/accessibility.ts

@@ -0,0 +1,78 @@
+/* eslint-disable no-restricted-syntax */
+import url from '../../helpers/getPageUrl';
+import createWidget from '../../helpers/createWidget';
+import { a11yCheck } from '../../helpers/accessibilityUtils';
+
+fixture.disablePageReloads`Gallery`
+  .page(url(__dirname, '../../container.html'));
+
+interface GalleryItem {
+  ID: string;
+  Name: string;
+}
+
+const defaultItems: GalleryItem[] = [{
+  ID: '1',
+  Name: 'First',
+},
+{
+  ID: '2',
+  Name: 'Second',
+}];
+
+function defaultItemTemplate(item: GalleryItem) {
+  const result = document.createElement('div');
+  const span = document.createElement('span');
+
+  span.innerText = item.Name;
+  result.appendChild(span);
+
+  return result;
+}
+
+function getTestName(gallerySettings) {
+  const fields = Object.keys(gallerySettings);
+
+  const messageParts = fields.map((field) => {
+    const fieldSkipped = gallerySettings[field] === undefined;
+
+    return `${field} was ${fieldSkipped ? 'not' : ''} set`;
+  });
+
+  return `Checking Gallery via aXe. Settings: ${messageParts.join(', ')}`;
+}
+
+const gallerySettings = [{}, {
+  items: defaultItems,
+}, {
+  itemTemplate: defaultItemTemplate,
+}, {
+  width: '100%',
+}, {
+  loop: true,
+}, {
+  showIndicator: false,
+}].reduce((acc: any, currentValue, index, arr) => {
+  acc.push({
+    ...currentValue,
+    ...arr[index - 1],
+  });
+  return acc;
+}, []);
+
+const testsSettings: {
+  testName: string;
+  gallerySettings: any;
+}[] = gallerySettings.map((settings) => ({
+  testName: getTestName(settings),
+  gallerySettings: settings,
+}));
+
+testsSettings.forEach((settings) => {
+  test(settings.testName, async (t) => {
+    await a11yCheck(t);
+  }).before(async () => createWidget(
+    'dxGallery',
+    settings.gallerySettings,
+  ));
+});