Skip to content

Commit 634ac08

Browse files
dobrinyonkovdobrinyonkov
committed
fix: acc tests
1 parent fdf30f5 commit 634ac08

File tree

3 files changed

+56
-123
lines changed

3 files changed

+56
-123
lines changed

‎packages/fiori/cypress/specs/ShellBarV2.cy.tsx‎

Lines changed: 27 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -296,25 +296,24 @@ describe("Responsiveness", () => {
296296
.should("not.exist");
297297
});
298298

299-
// TODO: V2 uses _individualSlot instead of stableDomRef - need to implement stableDomRef support
300-
it.skip("Test accessibility attributes on custom action buttons", () => {
299+
it("Test accessibility attributes on custom action buttons", () => {
301300
cy.mount(basicTemplate()).as("html");
302301

303-
// V2: ShellBarV2Item element can be found by stable-dom-ref attribute
304-
// It renders a ui5-button in its shadow root
302+
// V2: ShellBarV2Item properly supports accessibilityAttributes property
303+
// which are passed through to the ui5-button in its shadow root
305304
cy.get("@shellbar")
306305
.find(`[stable-dom-ref="call"]`)
307306
.as("call-item")
308307
.then($el => {
309-
$el.get(0).accessibilityAttributes = { "hasPopup": "dialog", "expanded": "true" };
308+
($el.get(0) as any).accessibilityAttributes = { "hasPopup": "dialog", "expanded": "true" };
310309
});
311310
cy.get("@call-item")
312311
.shadow()
313312
.find("ui5-button")
314313
.shadow()
315314
.find("button")
316315
.should("have.attr", "aria-expanded", "true")
317-
.should("have.attr", "aria-hasPopup", "dialog");
316+
.should("have.attr", "aria-haspopup", "dialog");
318317
});
319318
});
320319

@@ -1426,45 +1425,34 @@ describe("Branding slot", () => {
14261425

14271426
describe("Component Behavior", () => {
14281427
describe("Accessibility", () => {
1429-
it("tests accessibilityTexts property", () => {
1430-
const PROFILE_BTN_CUSTOM_TOOLTIP = "John Dow";
1431-
const LOGO_CUSTOM_TOOLTIP = "Custom logo title";
14321428

1433-
cy.mount(
1434-
<ShellBar>
1435-
<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo" />
1436-
<Avatar slot="profile" icon="customer" />
1437-
</ShellBar>
1438-
);
1439-
1440-
cy.get<ShellBar>("[ui5-shellbar-v2]").then(($shellbar) => {
1441-
$shellbar[0].accessibilityAttributes = {
1442-
profile: {
1443-
name: PROFILE_BTN_CUSTOM_TOOLTIP,
1444-
},
1445-
logo: {
1446-
name: LOGO_CUSTOM_TOOLTIP
1447-
},
1448-
};
1449-
});
1429+
it("tests accessibilityTexts property", () => {
1430+
const PROFILE_BTN_CUSTOM_TOOLTIP = "John Dow";
1431+
const LOGO_CUSTOM_TOOLTIP = "Custom logo title";
14501432

1451-
cy.get("[ui5-shellbar-v2]").should("have.prop", "_profileText", PROFILE_BTN_CUSTOM_TOOLTIP);
1433+
cy.mount(
1434+
<ShellBar>
1435+
<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo" />
1436+
<Avatar slot="profile" icon="customer" />
1437+
</ShellBar>
1438+
);
14521439

1453-
cy.get("[ui5-shellbar-v2]").should("have.prop", "_logoText", LOGO_CUSTOM_TOOLTIP);
1440+
cy.get<ShellBar>("[ui5-shellbar-v2]").then(($shellbar) => {
1441+
$shellbar[0].accessibilityAttributes = {
1442+
profile: {
1443+
name: PROFILE_BTN_CUSTOM_TOOLTIP,
1444+
},
1445+
logo: {
1446+
name: LOGO_CUSTOM_TOOLTIP
1447+
},
1448+
};
14541449
});
14551450

1456-
it("tests acc default roles", () => {
1457-
cy.mount(
1458-
<ShellBar>
1459-
<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo" />
1460-
</ShellBar>
1461-
);
1462-
1463-
cy.get("[ui5-shellbar-v2]")
1464-
.shadow()
1465-
.find(".ui5-shellbar-logo-area")
1466-
.should("have.attr", "role", "link");
1451+
cy.get<ShellBar>("[ui5-shellbar-v2]").then(($shellbar) => {
1452+
expect($shellbar[0].actionsAccessibilityInfo.profile.title).to.equal(PROFILE_BTN_CUSTOM_TOOLTIP);
1453+
expect($shellbar[0].legacyAdaptor.logoAriaLabel).to.equal(LOGO_CUSTOM_TOOLTIP);
14671454
});
1455+
});
14681456

14691457
it("tests accessibilityAttributes property", () => {
14701458
const NOTIFICATIONS_BTN_ARIA_HASPOPUP = "dialog";

‎packages/fiori/src/ShellBarV2.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -471,7 +471,7 @@ class ShellBarV2 extends UI5Element {
471471
});
472472

473473
overflow = new ShellBarV2Overflow();
474-
accessibility = new ShellBarV2Accessibility();
474+
accessibility: ShellBarV2Accessibility = new ShellBarV2Accessibility();
475475

476476
private _searchAdaptor = new ShellBarV2Search(this.getSearchDeps());
477477
private _searchAdaptorLegacy = new ShellBarV2SearchLegacy({
@@ -937,7 +937,7 @@ class ShellBarV2 extends UI5Element {
937937
// Accessibility
938938

939939
get actionsAccessibilityInfo(): ShellBarV2AccessibilityInfo {
940-
return this.accessibility.getActionsAccessibilityInfo(this.texts, {
940+
return this.accessibility.getActionsAccessibilityAttributes(this.texts, {
941941
overflowPopoverOpen: this.overflowPopoverOpen,
942942
accessibilityAttributes: this.accessibilityAttributes,
943943
});

‎packages/fiori/src/shellbarv2/ShellBarAccessibility.ts‎

Lines changed: 27 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,15 @@
11
import type { AccessibilityAttributes, AriaRole } from "@ui5/webcomponents-base";
2-
import { ShellBarV2Actions } from "../ShellBarV2.js";
3-
import type { ShellBarV2ActionId } from "../ShellBarV2.js";
42

5-
/**
6-
* Accessibility attributes for logo area (legacy)
7-
*/
3+
// Legacy Type logo accessibility attributes
84
type ShellBarV2LogoAccessibilityAttributes = {
95
role?: Extract<AriaRole, "button" | "link">;
106
name?: string;
117
};
128

13-
/**
14-
* Accessibility attributes for profile area
15-
*/
169
type ShellBarV2ProfileAccessibilityAttributes = Pick<AccessibilityAttributes, "name" | "expanded" | "hasPopup">;
17-
18-
/**
19-
* Accessibility attributes for action areas (notifications, product, search, overflow)
20-
*/
2110
type ShellBarV2AreaAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup" | "expanded">;
22-
23-
/**
24-
* Accessibility attributes for branding area
25-
*/
2611
type ShellBarV2BrandingAccessibilityAttributes = Pick<AccessibilityAttributes, "name">;
2712

28-
/**
29-
* Top-level accessibility configuration for ShellBarV2
30-
*/
3113
type ShellBarV2AccessibilityAttributes = {
3214
logo?: ShellBarV2LogoAccessibilityAttributes;
3315
notifications?: ShellBarV2AreaAccessibilityAttributes;
@@ -38,122 +20,85 @@ type ShellBarV2AccessibilityAttributes = {
3820
branding?: ShellBarV2BrandingAccessibilityAttributes;
3921
};
4022

41-
/**
42-
* Accessibility info for a single area
43-
*/
4423
interface ShellBarV2AreaAccessibilityInfo {
45-
title: string;
24+
title: string | undefined;
4625
accessibilityAttributes: {
26+
name?: string;
4727
hasPopup?: AccessibilityAttributes["hasPopup"];
4828
expanded?: AccessibilityAttributes["expanded"];
4929
};
5030
}
5131

52-
/**
53-
* Complete accessibility info object returned by the support controller
54-
*/
55-
interface ShellBarV2AccessibilityInfo {
32+
type ShellBarV2AccessibilityInfo = {
5633
notifications: ShellBarV2AreaAccessibilityInfo;
5734
profile: ShellBarV2AreaAccessibilityInfo;
5835
products: ShellBarV2AreaAccessibilityInfo;
59-
search: ShellBarV2AreaAccessibilityInfo;
6036
overflow: ShellBarV2AreaAccessibilityInfo;
61-
}
62-
63-
/**
64-
* Parameters for computing accessibility info
65-
*/
66-
interface ShellBarV2AccessibilityParams {
67-
accessibilityAttributes: ShellBarV2AccessibilityAttributes;
68-
overflowPopoverOpen: boolean;
69-
}
70-
71-
type ShellBarV2AccessibilityDefaultTexts = Record<ShellBarV2ActionId, string>;
37+
search: ShellBarV2AreaAccessibilityInfo;
38+
};
7239

73-
/**
74-
* Controller for ShellBarV2 accessibility features.
75-
* Manages accessibility attributes and generates aria properties for template.
76-
*/
7740
class ShellBarV2Accessibility {
78-
/**
79-
* Computes accessibility info for all interactive areas.
80-
* Merges user-provided attributes with defaults and dynamic state.
81-
*/
82-
getActionsAccessibilityInfo(defaultTexts: ShellBarV2AccessibilityDefaultTexts, params: ShellBarV2AccessibilityParams): ShellBarV2AccessibilityInfo {
83-
const {
84-
overflowPopoverOpen,
85-
accessibilityAttributes,
86-
} = params;
87-
41+
getActionsAccessibilityAttributes(
42+
defaultTexts: Record<string, string | undefined>,
43+
params: {
44+
accessibilityAttributes: ShellBarV2AccessibilityAttributes;
45+
overflowPopoverOpen: boolean;
46+
},
47+
): ShellBarV2AccessibilityInfo {
48+
const { overflowPopoverOpen, accessibilityAttributes } = params;
8849
const overflowExpanded = accessibilityAttributes.overflow?.expanded;
8950

9051
return {
91-
[ShellBarV2Actions.Notifications]: {
92-
title: defaultTexts[ShellBarV2Actions.Notifications],
52+
notifications: {
53+
title: defaultTexts.notifications,
9354
accessibilityAttributes: {
9455
expanded: accessibilityAttributes.notifications?.expanded,
9556
hasPopup: accessibilityAttributes.notifications?.hasPopup,
9657
},
9758
},
98-
[ShellBarV2Actions.Profile]: {
99-
title: defaultTexts[ShellBarV2Actions.Profile],
59+
profile: {
60+
title: accessibilityAttributes.profile?.name || defaultTexts.profile,
10061
accessibilityAttributes: {
10162
hasPopup: accessibilityAttributes.profile?.hasPopup,
10263
expanded: accessibilityAttributes.profile?.expanded,
103-
...(accessibilityAttributes.profile?.name ? { name: accessibilityAttributes.profile.name } : {}),
10464
},
10565
},
106-
[ShellBarV2Actions.ProductSwitch]: {
107-
title: defaultTexts[ShellBarV2Actions.ProductSwitch],
66+
products: {
67+
title: defaultTexts.products,
10868
accessibilityAttributes: {
10969
hasPopup: accessibilityAttributes.product?.hasPopup,
11070
expanded: accessibilityAttributes.product?.expanded,
11171
},
11272
},
113-
[ShellBarV2Actions.Search]: {
114-
title: defaultTexts[ShellBarV2Actions.Search],
73+
search: {
74+
title: defaultTexts.search,
11575
accessibilityAttributes: {
11676
hasPopup: accessibilityAttributes.search?.hasPopup,
11777
},
11878
},
119-
[ShellBarV2Actions.Overflow]: {
120-
title: defaultTexts[ShellBarV2Actions.Overflow],
79+
overflow: {
80+
title: defaultTexts.overflow,
12181
accessibilityAttributes: {
122-
hasPopup: accessibilityAttributes.overflow?.hasPopup || "menu",
82+
hasPopup: accessibilityAttributes.overflow?.hasPopup || "menu" as const,
12383
expanded: overflowExpanded === undefined ? overflowPopoverOpen : overflowExpanded,
12484
},
12585
},
12686
};
12787
}
12888

129-
/**
130-
* Gets role for actions toolbar area.
131-
* Returns "toolbar" when multiple visible items exist.
132-
*/
13389
getActionsRole(visibleItemsCount: number): "toolbar" | undefined {
134-
if (visibleItemsCount <= 1) {
135-
return undefined;
136-
}
137-
return "toolbar";
90+
return visibleItemsCount > 1 ? "toolbar" : undefined;
13891
}
13992

140-
/**
141-
* Returns accessibility role for content area.
142-
* Only group if multiple items exist.
143-
*/
14493
getContentRole(visibleItemsCount: number): "group" | undefined {
145-
if (visibleItemsCount <= 1) {
146-
return undefined;
147-
}
148-
return "group";
94+
return visibleItemsCount > 1 ? "group" : undefined;
14995
}
15096
}
15197

15298
export default ShellBarV2Accessibility;
15399

154100
export type {
155101
ShellBarV2AccessibilityInfo,
156-
ShellBarV2AccessibilityParams,
157102
ShellBarV2AreaAccessibilityInfo,
158103
ShellBarV2AccessibilityAttributes,
159104
ShellBarV2LogoAccessibilityAttributes,

0 commit comments

Comments
 (0)