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 &&