diff --git a/packages/fiori/cypress/specs/MediaGallery.cy.tsx b/packages/fiori/cypress/specs/MediaGallery.cy.tsx index 7504dcb035f6..1c7275eb38f1 100644 --- a/packages/fiori/cypress/specs/MediaGallery.cy.tsx +++ b/packages/fiori/cypress/specs/MediaGallery.cy.tsx @@ -622,8 +622,94 @@ describe("MediaGallery layout", () => { cy.get("[ui5-media-gallery] [ui5-media-gallery-item]").then($items => { const itemsCount = $items.length; - + cy.get("[ui5-media-gallery]").should("have.prop", "_overflowSize", itemsCount); }); }); +}); + +describe("MediaGallery accessibility", () => { + it("thumbnail list has role='listbox' and each thumbnail has role='option' and aria-selected", () => { + cy.mount( + + + + + + + + + + + ); + + cy.get("[ui5-media-gallery]") + .shadow() + .find(".ui5-media-gallery-thumbnails-wrapper ul") + .should("have.attr", "role", "listbox"); + + cy.get("[ui5-media-gallery]") + .shadow() + .find(".ui5-media-gallery-thumbnail") + .each($item => { + expect($item).to.have.attr("role", "option"); + expect($item).to.have.attr("aria-checked", "true"); + }); + }); + + it("selected thumbnail has aria-selected='true', unselected has aria-selected='false'", () => { + cy.mount( + + + + + + + + + + + ); + + cy.get("[ui5-media-gallery]") + .shadow() + .find(".ui5-media-gallery-thumbnail") + .first() + .should("have.attr", "aria-checked", "true"); + + cy.get("[ui5-media-gallery]") + .shadow() + .find(".ui5-media-gallery-thumbnail") + .last() + .should("have.attr", "aria-checked", "false"); + }); + + it("overflow list item has role='option' and aria-checked='false'", () => { + cy.mount( +
+ + + + + + + + + + + + + + +
+ ); + + cy.get("[ui5-media-gallery]") + .shadow() + .find(".ui5-media-gallery-overflow") + .should(($li) => { + expect($li).to.have.attr("role", "option"); + expect($li).to.have.attr("aria-checked", "false"); + }); + }); }); \ No newline at end of file diff --git a/packages/fiori/src/MediaGalleryTemplate.tsx b/packages/fiori/src/MediaGalleryTemplate.tsx index 5fbe9f5f06cd..413356339ae2 100644 --- a/packages/fiori/src/MediaGalleryTemplate.tsx +++ b/packages/fiori/src/MediaGalleryTemplate.tsx @@ -28,11 +28,12 @@ export default function MediaGalleryTemplate(this: MediaGallery) { {this._showThumbnails &&