diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index 2df40bf142b2..34ba86707d25 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -1313,27 +1313,27 @@ class ShellBar extends UI5Element { get _notificationsHasPopup() { const notificationsAccAttributes = this.accessibilityAttributes.notifications; - return notificationsAccAttributes ? notificationsAccAttributes.ariaHasPopup : null; + return notificationsAccAttributes ? notificationsAccAttributes.ariaHasPopup?.toLowerCase() : null; } get _profileHasPopup() { const profileAccAttributes = this.accessibilityAttributes.profile; - return profileAccAttributes ? profileAccAttributes.ariaHasPopup : null; + return profileAccAttributes ? profileAccAttributes.ariaHasPopup?.toLowerCase() : null; } get _productsHasPopup() { const productsAccAttributes = this.accessibilityAttributes.product; - return productsAccAttributes ? productsAccAttributes.ariaHasPopup : null; + return productsAccAttributes ? productsAccAttributes.ariaHasPopup?.toLowerCase() : null; } get _searchHasPopup() { const searcAccAttributes = this.accessibilityAttributes.search; - return searcAccAttributes ? searcAccAttributes.ariaHasPopup : null; + return searcAccAttributes ? searcAccAttributes.ariaHasPopup?.toLowerCase() : null; } get _overflowHasPopup() { const overflowAccAttributes = this.accessibilityAttributes.overflow; - return overflowAccAttributes ? overflowAccAttributes.ariaHasPopup : HasPopup.Menu; + return overflowAccAttributes ? overflowAccAttributes.ariaHasPopup?.toLowerCase() : HasPopup.Menu.toLowerCase(); } get accLogoRole() { diff --git a/packages/fiori/test/specs/ShellBar.spec.js b/packages/fiori/test/specs/ShellBar.spec.js index 9a12c1242a14..c2f0ba44f88a 100644 --- a/packages/fiori/test/specs/ShellBar.spec.js +++ b/packages/fiori/test/specs/ShellBar.spec.js @@ -56,7 +56,7 @@ describe("Component Behavior", () => { }); it("tests accessibilityAttributes property", async () => { - const NOTIFICATIONS_BTN_ARIA_HASPOPUP = "Dialog"; + const NOTIFICATIONS_BTN_ARIA_HASPOPUP = "dialog"; const sb = await browser.$("#sbAccAttr"); assert.strictEqual(await sb.getProperty("_notificationsHasPopup"), NOTIFICATIONS_BTN_ARIA_HASPOPUP, diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs index 2a9e3c16b2cb..480c3be16bf3 100644 --- a/packages/main/src/Button.hbs +++ b/packages/main/src/Button.hbs @@ -16,7 +16,7 @@ tabindex={{tabIndexValue}} aria-expanded="{{accessibilityAttributes.expanded}}" aria-controls="{{accessibilityAttributes.controls}}" - aria-haspopup="{{accessibilityAttributes.hasPopup}}" + aria-haspopup="{{_hasPopup}}" aria-label="{{ariaLabelText}}" title="{{buttonTitle}}" part="button" diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts index c21fb1d8b45f..b3a0455f586b 100644 --- a/packages/main/src/Button.ts +++ b/packages/main/src/Button.ts @@ -473,6 +473,10 @@ class Button extends UI5Element implements IFormElement, IButton { this.active = active; } + get _hasPopup() { + return this.accessibilityAttributes.hasPopup?.toLowerCase(); + } + get hasButtonType() { return this.design !== ButtonDesign.Default && this.design !== ButtonDesign.Transparent; } diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index 2320aa9df5bd..93174b552a05 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -717,7 +717,7 @@ class DatePicker extends DateComponentBase implements IFormElement { get accInfo() { return { "ariaRoledescription": this.dateAriaDescription, - "ariaHasPopup": HasPopup.Grid, + "ariaHasPopup": HasPopup.Grid.toLowerCase(), "ariaAutoComplete": "none", "ariaRequired": this.required, "ariaLabel": getEffectiveAriaLabelText(this), diff --git a/packages/main/src/Link.hbs b/packages/main/src/Link.hbs index bc108410d52f..7d4bd8d68060 100644 --- a/packages/main/src/Link.hbs +++ b/packages/main/src/Link.hbs @@ -8,7 +8,7 @@ title="{{title}}" ?disabled="{{disabled}}" aria-label="{{ariaLabelText}}" - aria-haspopup="{{accessibilityAttributes.hasPopup}}" + aria-haspopup="{{_hasPopup}}" aria-expanded="{{accessibilityAttributes.expanded}}" @focusin={{_onfocusin}} @focusout={{_onfocusout}} diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts index 20e68296bd39..cf1907afd836 100644 --- a/packages/main/src/Link.ts +++ b/packages/main/src/Link.ts @@ -321,6 +321,10 @@ class Link extends UI5Element implements ITabbable { return this.accessibleRole.toLowerCase(); } + get _hasPopup() { + return this.accessibilityAttributes.hasPopup?.toLowerCase(); + } + static async onDefine() { Link.i18nBundle = await getI18nBundle("@ui5/webcomponents"); } diff --git a/packages/main/src/ListItem.ts b/packages/main/src/ListItem.ts index 1f88d576a12f..c1f59f9138c1 100644 --- a/packages/main/src/ListItem.ts +++ b/packages/main/src/ListItem.ts @@ -56,7 +56,7 @@ type AccInfo = { ariaLabel: string; ariaLabelRadioButton: string; ariaSelectedText?: string; - ariaHaspopup?: `${HasPopup}`; + ariaHaspopup?: `${Lowercase}`; posinset?: number; setsize?: number; ariaSelected?: boolean; @@ -102,8 +102,7 @@ abstract class ListItem extends ListItemBase { /** * Defines the visual indication and behavior of the list items. * Available options are Active (by default), Inactive, Detail and Navigation. - *

- * Note: When set to Active or Navigation, the item will provide visual response upon press and hover, + *

Note: When set to Active or Navigation, the item will provide visual response upon press and hover, * while with type Inactive and Detail - will not. * * @default "Active" @@ -485,7 +484,7 @@ abstract class ListItem extends ListItemBase { ariaLabel: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX), ariaLabelRadioButton: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON), ariaSelectedText: this.ariaSelectedText, - ariaHaspopup: this.ariaHaspopup || undefined, + ariaHaspopup: this.ariaHaspopup?.toLowerCase() as Lowercase || undefined, setsize: this.accessibilityAttributes.ariaSetsize, posinset: this.accessibilityAttributes.ariaPosinset, }; diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index d24f9d83ee04..2e23055ea02b 100644 --- a/packages/main/src/Toolbar.ts +++ b/packages/main/src/Toolbar.ts @@ -280,7 +280,7 @@ class Toolbar extends UI5Element { tooltip: Toolbar.i18nBundle.getText(TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL), accessibilityAttributes: { expanded: this.overflowButtonDOM?.accessibilityAttributes.expanded, - hasPopup: HasPopup.Menu, + hasPopup: HasPopup.Menu.toLowerCase(), }, }, }; diff --git a/packages/main/src/TreeItemBase.ts b/packages/main/src/TreeItemBase.ts index 3193efd7572a..5a1b9e65a019 100644 --- a/packages/main/src/TreeItemBase.ts +++ b/packages/main/src/TreeItemBase.ts @@ -10,6 +10,7 @@ import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js"; import ListItem from "./ListItem.js"; import Icon from "./Icon.js"; +import type HasPopup from "./types/HasPopup.js"; import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js"; import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js"; import { @@ -267,7 +268,7 @@ class TreeItemBase extends ListItem { ariaSelectedText: this.ariaSelectedText, listItemAriaLabel: !this.accessibleName ? this._ariaLabel : undefined, ariaOwns: this.expanded ? `${this._id}-subtree` : undefined, - ariaHaspopup: this.ariaHaspopup || undefined, + ariaHaspopup: this.ariaHaspopup?.toLowerCase() as Lowercase || undefined, }; return { ...super._accInfo, ...accInfoSettings }; diff --git a/packages/main/test/specs/DatePicker.spec.js b/packages/main/test/specs/DatePicker.spec.js index e2d55fce74f9..edf788a31b4c 100644 --- a/packages/main/test/specs/DatePicker.spec.js +++ b/packages/main/test/specs/DatePicker.spec.js @@ -15,7 +15,7 @@ describe("Date Picker Tests", () => { assert.ok(await input.isDisplayedInViewport(), "input is rendered"); assert.ok(await innerInput.isDisplayedInViewport(), "inner input is rendered"); assert.strictEqual(await innerInput.getAttribute("aria-roledescription"), "Date Input", "aria-roledescription attribute is added."); - assert.strictEqual(await innerInput.getAttribute("aria-haspopup"), "Grid", "aria-haspopup attribute is added."); + assert.strictEqual(await innerInput.getAttribute("aria-haspopup"), "grid", "aria-haspopup attribute is added."); assert.notOk(await innerInput.getAttribute("aria-controls"), "aria-controls attribute isn't rendered."); assert.notOk(await innerInput.getAttribute("aria-expanded"), "aria-expanded attribute isn't rendered."); }); diff --git a/packages/main/test/specs/Link.spec.js b/packages/main/test/specs/Link.spec.js index d2f731078165..25f8e75ebad2 100644 --- a/packages/main/test/specs/Link.spec.js +++ b/packages/main/test/specs/Link.spec.js @@ -83,7 +83,7 @@ describe("General API", () => { it("Open dialog link has propper aria-haspopup attribute", async () => { const link = await browser.$("#signInLink"); - assert.strictEqual(await link.shadow$("a").getAttribute("aria-haspopup"), "Dialog", "Proper aria-haspopup attribute is set"); + assert.strictEqual(await link.shadow$("a").getAttribute("aria-haspopup"), "dialog", "Proper aria-haspopup attribute is set"); }); it("setting accessible-name applied on the host element is reflected on the anchor tag", async () => {