feat(ui5-timeline): provide accessible-name support #4721
Conversation
packages/fiori/src/Timeline.js
Outdated
| @@ -115,7 +127,7 @@ class Timeline extends UI5Element { | |||
| } | |||
|
|
|||
| get ariaLabel() { | |||
| return Timeline.i18nBundle.getText(TIMELINE_ARIA_LABEL); | |||
| return getEffectiveAriaLabelText(this); | |||
There was a problem hiding this comment.
Don't we need the TIMELINE_ARIA_LABEL as default in case accessibleName is not set?
If we don't - please explain in the commit message.
There was a problem hiding this comment.
This text results into "Timeline" and it describes the element context. Later on it could be moved into the aira-roledescription attribute as mentioned in the status page: https://wiki.wdf.sap.corp/wiki/pages/viewpage.action?pageId=2382053542
I think we need this text alongside the accessibleName text. At the end the upper status page could be updated.
There was a problem hiding this comment.
The only thing to do is:
get ariaLabel() {
return this.accessibleName || Timeline.i18nBundle.getText(TIMELINE_ARIA_LABEL);
}There was a problem hiding this comment.
I was thinking for concatenation of those two. As "Timeline" could be treated as a roledescription and the accessible-name would be a text related to the specific context of the application.
packages/fiori/src/Timeline.js
Outdated
| @@ -2,10 +2,10 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; | |||
| import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; | |||
| import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; | |||
| import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js"; | |||
| import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js"; | |||
There was a problem hiding this comment.
The point of using the getEffectiveAriaLabelText method is to return the aria accessible name by checking the accessibleName and accessibleNameRef properties, but the Timeline has only accessibleName. The method won't break the code, but it's not needed and performs unneeded checks. You can directly use the accessibleName property.
add new property "accessibleName"
FIXES: #4644