Skip to content

Commit ea23724

Browse files
authored
fix(ui5-dynamic-page-title): conditionally apply ARIA attributes based on interactivity (#12141)
Only apply button role and ARIA attributes when the title can actually toggle the header. When no header is present (non-interactive state), the title area should not have button semantics or related ARIA attributes. - Remove button role when title is not interactive - Remove aria-expanded when title is not interactive - Remove aria-describedby when title is not interactive This ensures screen readers don't announce toggle functionality when no header exists to toggle. Fixes: #12053
1 parent e9f755f commit ea23724

File tree

2 files changed

+11
-3
lines changed

2 files changed

+11
-3
lines changed

packages/fiori/src/DynamicPageTitle.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -263,8 +263,16 @@ class DynamicPageTitle extends UI5Element {
263263
return !this.snapped;
264264
}
265265

266+
get _role() {
267+
return this.interactive ? "button" : undefined;
268+
}
269+
270+
get _ariaDescribedBy() {
271+
return this.interactive ? `${this._id}-toggle-description` : undefined;
272+
}
273+
266274
get _ariaDescribedbyText() {
267-
return DynamicPageTitle.i18nBundle.getText(DYNAMIC_PAGE_ARIA_DESCR_TOGGLE_HEADER);
275+
return this.interactive ? DynamicPageTitle.i18nBundle.getText(DYNAMIC_PAGE_ARIA_DESCR_TOGGLE_HEADER) : undefined;
268276
}
269277

270278
get _ariaLabelledBy() {

packages/fiori/src/DynamicPageTitleTemplate.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ export default function DynamicPageTitleTemplate(this: DynamicPageTitle) {
1010
tabIndex={this._tabIndex}
1111
onKeyDown={this._onkeydown}
1212
onClick={this.onTitleClick}
13-
role="button"
13+
role={this._role}
1414
aria-expanded={this.forAriaExpanded}
1515
aria-labelledby={this._ariaLabelledBy}
16-
aria-describedby={`${this._id}-toggle-description`}
16+
aria-describedby={this._ariaDescribedBy}
1717
></span>
1818

1919
{this.hasSnappedTitleOnMobile ?

0 commit comments

Comments
 (0)