Skip to content

Commit 984f829

Browse files
tsanislavgatevtsanislavgatev
authored
feat(ui5-bar): introduce accessibleName and accessibleNameRef properties (#12626)
fixes: #12591
1 parent df89286 commit 984f829

File tree

4 files changed

+97
-3
lines changed

4 files changed

+97
-3
lines changed

‎packages/main/cypress/specs/Bar.cy.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import Bar from "../../src/Bar.js";
2+
import Button from "../../src/Button.js";
3+
4+
describe("Bar Accessibility", () => {
5+
it("Should use accessibleName property as aria-label", () => {
6+
cy.mount(
7+
<Bar accessibleName="Navigation Bar">
8+
<Button slot="startContent">Back</Button>
9+
<div>Page Title</div>
10+
<Button slot="endContent">Settings</Button>
11+
</Bar>
12+
);
13+
14+
cy.get("[ui5-bar]")
15+
.shadow()
16+
.find(".ui5-bar-root")
17+
.should("have.attr", "aria-label", "Navigation Bar");
18+
});
19+
20+
it("Should fallback to design property when accessibleName is not provided", () => {
21+
cy.mount(
22+
<Bar design="Header">
23+
<Button slot="startContent">Menu</Button>
24+
<div>Application Header</div>
25+
<Button slot="endContent">Profile</Button>
26+
</Bar>
27+
);
28+
29+
cy.get("[ui5-bar]")
30+
.shadow()
31+
.find(".ui5-bar-root")
32+
.should("have.attr", "aria-label", "Header");
33+
});
34+
35+
it("Should use accessibleName over design property when both are provided", () => {
36+
cy.mount(
37+
<Bar design="Footer" accessibleName="Custom Footer Label">
38+
<Button slot="startContent">Help</Button>
39+
<div>Footer Content</div>
40+
<Button slot="endContent">Contact</Button>
41+
</Bar>
42+
);
43+
44+
cy.get("[ui5-bar]")
45+
.shadow()
46+
.find(".ui5-bar-root")
47+
.should("have.attr", "aria-label", "Custom Footer Label");
48+
});
49+
50+
it("Should use accessibleNameRef over accessibleName when both are provided", () => {
51+
cy.mount(
52+
<div>
53+
<div id="external-label">External Navigation Label</div>
54+
<Bar accessibleName="Internal Label" accessibleNameRef="external-label">
55+
<Button slot="startContent">Back</Button>
56+
<div>Content</div>
57+
<Button slot="endContent">Forward</Button>
58+
</Bar>
59+
</div>
60+
);
61+
62+
cy.get("[ui5-bar]")
63+
.shadow()
64+
.find(".ui5-bar-root")
65+
.should("have.attr", "aria-label", "External Navigation Label");
66+
});
67+
});

‎packages/main/src/Bar.ts‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
44
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
55
import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
66
import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
7+
import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
78
import type BarDesign from "./types/BarDesign.js";
89
import type BarAccessibleRole from "./types/BarAccessibleRole.js";
910

@@ -84,6 +85,24 @@ class Bar extends UI5Element {
8485
@property()
8586
accessibleRole: `${BarAccessibleRole}` = "Toolbar";
8687

88+
/**
89+
* Defines the accessible ARIA name of the component.
90+
* @default undefined
91+
* @since 2.16.0
92+
* @public
93+
*/
94+
@property()
95+
accessibleName?: string;
96+
97+
/**
98+
* Receives id(or many ids) of the elements that label the bar.
99+
* @default undefined
100+
* @since 2.16.0
101+
* @public
102+
*/
103+
@property()
104+
accessibleNameRef?: string;
105+
87106
/**
88107
* Defines the content at the start of the bar.
89108
* @public
@@ -109,11 +128,19 @@ class Bar extends UI5Element {
109128

110129
get accInfo() {
111130
return {
112-
"label": this.design,
131+
"label": this.ariaLabelText,
113132
"role": this.effectiveRole,
114133
};
115134
}
116135

136+
get ariaLabelText(): string | undefined {
137+
if (this.accessibleName || this.accessibleNameRef) {
138+
return getEffectiveAriaLabelText(this);
139+
}
140+
141+
return this.design;
142+
}
143+
117144
constructor() {
118145
super();
119146

‎packages/main/src/BarTemplate.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default function BarTemplate(this: Bar) {
44
return (
55
<div
66
class="ui5-bar-root"
7-
aria-label={this.accInfo.role && this.accInfo.label}
7+
aria-label={this.accInfo.label}
88
role={this.accInfo.role}
99
part="bar"
1010
>

‎packages/main/test/pages/Bar.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
<body class="bar1auto">
1818
<section>
19-
<ui5-bar design="Header" accessible-role="None">
19+
<ui5-bar design="Header" accessible-role="None" accessible-name="Header Bar">
2020
<ui5-title id="titleElement" slot="startContent">Title</ui5-title>
2121
<ui5-label>Title</ui5-label>
2222
<ui5-button icon="action-settings" tooltip="Go to settings" slot="endContent"></ui5-button>

0 commit comments

Comments
 (0)