diff --git a/packages/devextreme/js/localization/messages/ar.json b/packages/devextreme/js/localization/messages/ar.json index 945c40de21f1..c77be62a076a 100644 --- a/packages/devextreme/js/localization/messages/ar.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/ca.json b/packages/devextreme/js/localization/messages/ca.json index 4540fba4db58..8a9b9e8f76a5 100644 --- a/packages/devextreme/js/localization/messages/ca.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/cs.json b/packages/devextreme/js/localization/messages/cs.json index 40c59e2ea0c6..dc056ce96c2e 100644 --- a/packages/devextreme/js/localization/messages/cs.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/de.json b/packages/devextreme/js/localization/messages/de.json index f4a527601a4a..6a7e0603c324 100644 --- a/packages/devextreme/js/localization/messages/de.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/el.json b/packages/devextreme/js/localization/messages/el.json index e8d10722e0b7..4118f37a596a 100644 --- a/packages/devextreme/js/localization/messages/el.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/en.json b/packages/devextreme/js/localization/messages/en.json index c6761406522b..29db914d31b5 100644 --- a/packages/devextreme/js/localization/messages/en.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/es.json b/packages/devextreme/js/localization/messages/es.json index 3d415df1a196..4e5899b24e25 100644 --- a/packages/devextreme/js/localization/messages/es.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/fa.json b/packages/devextreme/js/localization/messages/fa.json index dd80657ea18d..fd867af2c09e 100644 --- a/packages/devextreme/js/localization/messages/fa.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/fi.json b/packages/devextreme/js/localization/messages/fi.json index 742721e72c6f..fd3665c829b1 100644 --- a/packages/devextreme/js/localization/messages/fi.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/fr.json b/packages/devextreme/js/localization/messages/fr.json index 91e7e1704108..523354c42440 100644 --- a/packages/devextreme/js/localization/messages/fr.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/hu.json b/packages/devextreme/js/localization/messages/hu.json index 3584f4892bcf..d37025db09b0 100644 --- a/packages/devextreme/js/localization/messages/hu.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/it.json b/packages/devextreme/js/localization/messages/it.json index b0b03590e307..a597b0aae7b4 100644 --- a/packages/devextreme/js/localization/messages/it.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/ja.json b/packages/devextreme/js/localization/messages/ja.json index 1719d874f82d..6df19f5e8284 100644 --- a/packages/devextreme/js/localization/messages/ja.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/lt.json b/packages/devextreme/js/localization/messages/lt.json index f4e72af24990..15b23b257ffb 100644 --- a/packages/devextreme/js/localization/messages/lt.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/lv.json b/packages/devextreme/js/localization/messages/lv.json index c2cba660d6fd..c5fe387e529d 100644 --- a/packages/devextreme/js/localization/messages/lv.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/nb.json b/packages/devextreme/js/localization/messages/nb.json index 86fd87d68090..f9908a6527e9 100644 --- a/packages/devextreme/js/localization/messages/nb.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/nl.json b/packages/devextreme/js/localization/messages/nl.json index d488ffd3f819..803936cc1fd9 100644 --- a/packages/devextreme/js/localization/messages/nl.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/pt.json b/packages/devextreme/js/localization/messages/pt.json index 5bf2da370201..258fbea90e09 100644 --- a/packages/devextreme/js/localization/messages/pt.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/ro.json b/packages/devextreme/js/localization/messages/ro.json index 8a9e791e948e..837a326eb09a 100644 --- a/packages/devextreme/js/localization/messages/ro.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/ru.json b/packages/devextreme/js/localization/messages/ru.json index 1c9b43bc855f..287afa9d1388 100644 --- a/packages/devextreme/js/localization/messages/ru.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/sl.json b/packages/devextreme/js/localization/messages/sl.json index 827c07d089e6..5a692617ba83 100644 --- a/packages/devextreme/js/localization/messages/sl.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/sv.json b/packages/devextreme/js/localization/messages/sv.json index 67f54adc4b0d..752b5e0808e4 100644 --- a/packages/devextreme/js/localization/messages/sv.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/tr.json b/packages/devextreme/js/localization/messages/tr.json index 0b65cf6384b3..fcb0ec4d70a3 100644 --- a/packages/devextreme/js/localization/messages/tr.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/vi.json b/packages/devextreme/js/localization/messages/vi.json index e3cd9f59bbdd..f183d174067b 100644 --- a/packages/devextreme/js/localization/messages/vi.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/zh-tw.json b/packages/devextreme/js/localization/messages/zh-tw.json index f27ab174ed71..64e670108644 100644 --- a/packages/devextreme/js/localization/messages/zh-tw.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/localization/messages/zh.json b/packages/devextreme/js/localization/messages/zh.json index 22864685ef8f..6152ddbc0d43 100644 --- a/packages/devextreme/js/localization/messages/zh.json +++ b/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-itemName": "Gallery item" } } diff --git a/packages/devextreme/js/ui/gallery.js b/packages/devextreme/js/ui/gallery.js index ab5b26b184fa..af0446f0b560 100644 --- 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; }, diff --git a/packages/devextreme/testing/testcafe/tests/gallery/accessibility.ts b/packages/devextreme/testing/testcafe/tests/gallery/accessibility.ts new file mode 100644 index 000000000000..5c711562b127 --- /dev/null +++ b/packages/devextreme/testing/testcafe/tests/gallery/accessibility.ts @@ -0,0 +1,94 @@ +/* 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; +} + +interface GallerySettings { + items?: GalleryItem[]; + itemTemplate?: (item: GalleryItem) => HTMLDivElement; + width?: string; + loop?: boolean; + showIndicator?: boolean; +} + +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; +} + +const allGallerySettings: GallerySettings = { + items: defaultItems, + itemTemplate: defaultItemTemplate, + width: '100%', + loop: true, + showIndicator: false, +}; + +function getTestName(gallerySettings: 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(', ')}`; +} + +function generateCombinations(allSettings: GallerySettings): GallerySettings[] { + const keys = Object.keys(allSettings); + const combinations: GallerySettings[] = []; + + const generate = (index: number, currentCombination: GallerySettings) => { + if (index === keys.length) { + combinations.push(currentCombination); + return; + } + + const key = keys[index]; + const value = allSettings[key]; + + generate(index + 1, currentCombination); + + const newCombination = { ...currentCombination, [key]: value }; + generate(index + 1, newCombination); + }; + + generate(0, {}); + return combinations; +} + +const settingsCombinations = generateCombinations(allGallerySettings); + +settingsCombinations.forEach((settings) => { + const testName = getTestName(settings); + test(testName, async (t) => { + await a11yCheck(t); + }).before(async () => createWidget( + 'dxGallery', + settings, + )); +}); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/gallery.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/gallery.markup.tests.js index 205c82f69f00..0ad57a7d3d22 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/gallery.markup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/gallery.markup.tests.js @@ -66,9 +66,15 @@ QUnit.module('base', () => { QUnit.module('aria accessibility', () => { - QUnit.test('aria role', function(assert) { + QUnit.test('aria role should not be set when no items', function(assert) { const $element = $('#gallerySimple').dxGallery(); + assert.equal($element.attr('role'), undefined, 'aria role is correct'); + }); + + QUnit.test('aria role should be set when gallery has items to display', function(assert) { + const $element = $('#gallerySimple').dxGallery({ items: [1] }); + assert.equal($element.attr('role'), 'listbox', 'aria role is correct'); }); @@ -78,6 +84,14 @@ QUnit.module('aria accessibility', () => { assert.equal($element.attr('aria-label'), 'gallery', 'widget should have aria-label to have difference from text list'); }); + QUnit.test('aria label for items should be set', function(assert) { + const $gallery = $('#gallerySimple').dxGallery({ items: [1] }); + + const $item = $gallery.find(`.${GALLERY_ITEM_CLASS}`); + + assert.strictEqual($item.attr('aria-label'), 'Gallery item', 'item should have "aria-label"'); + }); + QUnit.test('aria role for items', function(assert) { const $element = $('#gallerySimple').dxGallery({ items: [1] }); const $item = $element.find('.' + GALLERY_ITEM_CLASS); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/gallery.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/gallery.tests.js index 437f9226aa3b..8a32f4319dd5 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/gallery.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/gallery.tests.js @@ -385,17 +385,6 @@ QUnit.module('behavior', { assert.equal($loopItems.length, 2); }); - QUnit.test('duplicate items should have role="presentation"', function(assert) { - const $gallery = this.$element.dxGallery({ - items: [0, 1, 2, 3], - loop: true - }); - - const $loopItems = $gallery.find(`.${GALLERY_LOOP_ITEM_CLASS}`); - $loopItems.each((index, item) => { - assert.strictEqual($(item).attr('role'), 'presentation'); - }); - }); QUnit.test('duplicate items is not rendered when loop=false', function(assert) { const $gallery = this.$element.dxGallery({ @@ -2762,3 +2751,54 @@ QUnit.module('gallery with paginated dataSource', { }); }); +QUnit.module('accessibility', function() { + QUnit.test('duplicate items should have aria-hidden=true', function(assert) { + const $gallery = $('#gallerySimple').dxGallery({ + items: [0, 1, 2, 3], + loop: true + }); + + const $loopItems = $gallery.find(`.${GALLERY_LOOP_ITEM_CLASS}`); + $loopItems.each((index, item) => { + assert.strictEqual($(item).attr('aria-hidden'), 'true'); + }); + }); + + QUnit.test('aria-activedescendant should have link to the single element', function(assert) { + const $gallery = $('#gallerySimple').dxGallery({ + height: 100, + width: '100%', + showIndicator: false, + items: [1, 2], + loop: true + }); + + const $items = $gallery.find(`.${GALLERY_ITEM_CLASS}`); + + const itemsWithId = Array.from($items).filter(item => { + return Boolean($(item).attr('id')); + }); + + assert.strictEqual(itemsWithId.length, 1, 'id attribute should be exist only on one item'); + }); + + QUnit.test('aria-activedescendant should have link to the single element after resize', function(assert) { + const $gallery = $('#gallerySimple').dxGallery({ + height: 100, + showIndicator: false, + width: '100%', + items: [1, 2], + loop: true + }); + + $gallery.dxGallery('instance').option('width', 200); + + const $items = $gallery.find(`.${GALLERY_ITEM_CLASS}`); + + const itemsWithId = Array.from($items).filter(item => { + return Boolean($(item).attr('id')); + }); + + assert.strictEqual(itemsWithId.length, 1, 'id attribute should be exist only on one item'); + }); +});