diff --git a/packages/base/src/types.ts b/packages/base/src/types.ts index 0113f0448296..9c27d8f3c958 100644 --- a/packages/base/src/types.ts +++ b/packages/base/src/types.ts @@ -60,6 +60,7 @@ type AccessibilityAttributes = { name?: string, role?: ARIARoles, ariaKeyShortcuts?: string, + current?: "page" | "step" | "location" | "date" | "time" | "true" | "false" | boolean } export type { diff --git a/packages/main/src/Breadcrumbs.hbs b/packages/main/src/Breadcrumbs.hbs index d70c53658270..40d3db6cfa74 100644 --- a/packages/main/src/Breadcrumbs.hbs +++ b/packages/main/src/Breadcrumbs.hbs @@ -25,6 +25,7 @@ id="{{this._id}}-link" design="{{this._linkDesign}}" accessible-name="{{this._accessibleNameText}}" + .accessibilityAttributes="{{this.accessibilityAttributes}}" data-ui5-stable="{{this.stableDomRef}}" wrapping-type="None"> {{this.innerText}} diff --git a/packages/main/src/BreadcrumbsItem.ts b/packages/main/src/BreadcrumbsItem.ts index 2996cb82558e..8cdc1ff2b2bc 100644 --- a/packages/main/src/BreadcrumbsItem.ts +++ b/packages/main/src/BreadcrumbsItem.ts @@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js"; import LinkDesign from "./types/LinkDesign.js"; /** @@ -74,6 +75,12 @@ class BreadcrumbsItem extends UI5Element { get _linkDesign() { return this._isCurrentPageItem ? LinkDesign.Emphasized : LinkDesign.Default; } + + get accessibilityAttributes(): Pick { + return { + current: this._isCurrentPageItem ? "page" : false, + }; + } } BreadcrumbsItem.define(); diff --git a/packages/main/src/Link.hbs b/packages/main/src/Link.hbs index 3f127675aa07..aec220cbbf7d 100644 --- a/packages/main/src/Link.hbs +++ b/packages/main/src/Link.hbs @@ -10,6 +10,7 @@ aria-label="{{ariaLabelText}}" aria-haspopup="{{_hasPopup}}" aria-expanded="{{accessibilityAttributes.expanded}}" + aria-current="{{accessibilityAttributes.current}}" @focusin={{_onfocusin}} @focusout={{_onfocusout}} @click={{_onclick}} diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts index 02f519ca4f11..bfaefc753723 100644 --- a/packages/main/src/Link.ts +++ b/packages/main/src/Link.ts @@ -31,7 +31,7 @@ type LinkClickEventDetail = { shiftKey: boolean; } -type LinkAccessibilityAttributes = Pick; +type LinkAccessibilityAttributes = Pick; /** * @class