Skip to content

Commit 76988b3

Browse files
castastrophecastastrophe
committed
chore(menu): apply aria fixes to menu template per a11y review
1 parent 293f6be commit 76988b3

File tree

11 files changed

+954
-660
lines changed

11 files changed

+954
-660
lines changed

‎components/actionbutton/dist/metadata.json‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,16 @@
1414
".spectrum-ActionButton-label",
1515
".spectrum-ActionButton-label:empty",
1616
".spectrum-ActionButton.is-disabled",
17-
".spectrum-ActionButton.spectrum-ActionButton--emphasized:is([aria-pressed=\"true\"], [aria-expanded=\"true\"])",
17+
".spectrum-ActionButton.spectrum-ActionButton--emphasized:is(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
1818
".spectrum-ActionButton.spectrum-ActionButton--quiet",
19+
".spectrum-ActionButton.spectrum-ActionButton--quiet:is(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
1920
".spectrum-ActionButton.spectrum-ActionButton--quiet:is(:disabled, .is-disabled, [aria-disabled=\"true\"]):not(:is([aria-pressed=\"true\"], [aria-expanded=\"true\"]))",
20-
".spectrum-ActionButton.spectrum-ActionButton--quiet:is([aria-pressed=\"true\"], [aria-expanded=\"true\"])",
2121
".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
2222
".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
23-
".spectrum-ActionButton.spectrum-ActionButton--staticBlack:is([aria-pressed=\"true\"], [aria-expanded=\"true\"])",
23+
".spectrum-ActionButton.spectrum-ActionButton--staticBlack:is(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
2424
".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
2525
".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
26-
".spectrum-ActionButton.spectrum-ActionButton--staticWhite:is([aria-pressed=\"true\"], [aria-expanded=\"true\"])",
26+
".spectrum-ActionButton.spectrum-ActionButton--staticWhite:is(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
2727
".spectrum-ActionButton::-moz-focus-inner",
2828
".spectrum-ActionButton:active",
2929
".spectrum-ActionButton:after",
@@ -34,17 +34,15 @@
3434
".spectrum-ActionButton:focus-visible:after",
3535
".spectrum-ActionButton:has(.spectrum-ActionButton-icon)",
3636
".spectrum-ActionButton:hover",
37+
".spectrum-ActionButton:is(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
3738
".spectrum-ActionButton:is(:disabled, .is-disabled, [aria-disabled=\"true\"])",
38-
".spectrum-ActionButton:is([aria-pressed=\"true\"], [aria-expanded=\"true\"])",
3939
".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))",
4040
"a.spectrum-ActionButton"
4141
],
4242
"modifiers": [
43-
"--mod-actionbutton-animation-duration",
4443
"--mod-actionbutton-background-color-default",
4544
"--mod-actionbutton-background-color-default-selected",
4645
"--mod-actionbutton-background-color-default-selected-emphasized",
47-
"--mod-actionbutton-background-color-disabled",
4846
"--mod-actionbutton-background-color-down",
4947
"--mod-actionbutton-background-color-down-selected",
5048
"--mod-actionbutton-background-color-down-selected-emphasized",
@@ -58,7 +56,6 @@
5856
"--mod-actionbutton-content-color-default",
5957
"--mod-actionbutton-content-color-default-selected",
6058
"--mod-actionbutton-content-color-default-selected-emphasized",
61-
"--mod-actionbutton-content-color-disabled",
6259
"--mod-actionbutton-content-color-down",
6360
"--mod-actionbutton-content-color-down-selected",
6461
"--mod-actionbutton-content-color-down-selected-emphasized",
@@ -68,14 +65,9 @@
6865
"--mod-actionbutton-content-color-hover",
6966
"--mod-actionbutton-content-color-hover-selected",
7067
"--mod-actionbutton-content-color-hover-selected-emphasized",
71-
"--mod-actionbutton-edge-to-hold-icon",
7268
"--mod-actionbutton-edge-to-text",
7369
"--mod-actionbutton-edge-to-visual",
7470
"--mod-actionbutton-edge-to-visual-only",
75-
"--mod-actionbutton-focus-indicator-border-radius",
76-
"--mod-actionbutton-focus-indicator-color",
77-
"--mod-actionbutton-focus-indicator-gap",
78-
"--mod-actionbutton-focus-indicator-thickness",
7971
"--mod-actionbutton-font-size",
8072
"--mod-actionbutton-font-style",
8173
"--mod-actionbutton-font-weight",

‎components/actionbutton/index.css‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ governing permissions and limitations under the License.
4747
--spectrum-actionbutton-line-height: var(--spectrum-actionbutton-height);
4848

4949
--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100);
50-
--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-medium));
50+
--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium);
5151
--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
5252
--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-100);
5353
--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100);
@@ -65,7 +65,7 @@ governing permissions and limitations under the License.
6565
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
6666
--spectrum-actionbutton-background-color-disabled: transparent;
6767

68-
&:is([aria-pressed="true"], [aria-expanded="true"]) {
68+
&:is(.is-selected, [aria-pressed="true"], [aria-expanded="true"]) {
6969
--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
7070
}
7171
}
@@ -119,7 +119,7 @@ governing permissions and limitations under the License.
119119
}
120120

121121
/* expanded is specific to action menu when the menu is open */
122-
&:is([aria-pressed="true"], [aria-expanded="true"]) {
122+
&:is(.is-selected, [aria-pressed="true"], [aria-expanded="true"]) {
123123
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default));
124124
--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover));
125125
--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down));
@@ -179,7 +179,7 @@ governing permissions and limitations under the License.
179179
--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-50);
180180
--spectrum-actionbutton-font-size: var(--spectrum-font-size-50);
181181
--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-50);
182-
--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-extra-small));
182+
--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small);
183183
--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-50);
184184
--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-50);
185185
--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-50);
@@ -196,7 +196,7 @@ governing permissions and limitations under the License.
196196
--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75);
197197
--spectrum-actionbutton-font-size: var(--spectrum-font-size-75);
198198
--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75);
199-
--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-small));
199+
--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small);
200200
--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
201201
--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-75);
202202
--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-75);
@@ -213,7 +213,7 @@ governing permissions and limitations under the License.
213213
--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200);
214214
--spectrum-actionbutton-font-size: var(--spectrum-font-size-200);
215215
--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200);
216-
--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-large));
216+
--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large);
217217
--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-200);
218218
--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-200);
219219
--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-200);
@@ -228,7 +228,7 @@ governing permissions and limitations under the License.
228228
--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300);
229229
--spectrum-actionbutton-font-size: var(--spectrum-font-size-300);
230230
--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300);
231-
--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-extra-large));
231+
--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large);
232232
--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
233233
--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-300);
234234
--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-300);
@@ -253,46 +253,46 @@ governing permissions and limitations under the License.
253253
background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default)));
254254
color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default)));
255255

256-
transition: border-color var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out;
256+
transition: border-color var(--highcontrast-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
257257

258258
&::after {
259259
position: absolute;
260260
inset: 0;
261-
margin: calc((var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-actionbutton-focus-indicator-gap)) + var(--spectrum-actionbutton-border-width)) * -1);
262-
border-radius: var(--mod-actionbutton-focus-indicator-border-radius, var(--spectrum-actionbutton-focus-indicator-border-radius));
263-
transition: box-shadow var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out;
261+
margin: calc((var(--spectrum-actionbutton-focus-indicator-gap) + var(--spectrum-actionbutton-border-width)) * -1);
262+
border-radius: var(--spectrum-actionbutton-focus-indicator-border-radius);
263+
transition: box-shadow var(--highcontrast-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
264264
pointer-events: none;
265265
content: "";
266266
}
267267

268268
&:hover {
269-
background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover)));
270-
color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover)));
269+
background-color: var(--highcontrast-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-hover));
270+
color: var(--highcontrast-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-hover));
271271
}
272272

273273
&:focus-visible {
274-
background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus)));
275-
color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus)));
274+
background-color: var(--highcontrast-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-focus));
275+
color: var(--highcontrast-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-focus));
276276

277277
box-shadow: none;
278278
outline: none;
279279

280280
&::after {
281-
box-shadow: 0 0 0 var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-actionbutton-focus-indicator-thickness)) var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color)));
281+
box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-indicator-thickness) var(--highcontrast-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color));
282282
}
283283
}
284284

285285
&:active {
286-
background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down)));
287-
color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down)));
286+
background-color: var(--highcontrast-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-down));
287+
color: var(--highcontrast-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-down));
288288
transform: perspective(var(--spectrum-actionbutton-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down));
289289
}
290290

291291
/* ideal when we want to disable the button but still allow it's content to be focused */
292292
&:is(:disabled, .is-disabled, [aria-disabled="true"]) {
293293
/* @todo: should pointer events be disabled? */
294-
background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled)));
295-
color: var(--highcontrast-actionbutton-content-color-disabled, var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled)));
294+
background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled));
295+
color: var(--highcontrast-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled));
296296
}
297297
}
298298

@@ -398,7 +398,7 @@ a.spectrum-ActionButton {
398398
--highcontrast-actionbutton-border-color: Highlight;
399399
}
400400

401-
&:is([aria-pressed="true"], [aria-expanded="true"]) {
401+
&:is(.is-selected, [aria-pressed="true"], [aria-expanded="true"]) {
402402
--highcontrast-actionbutton-border-color: Highlight;
403403
--highcontrast-actionbutton-background-color-default: Highlight;
404404
--highcontrast-actionbutton-content-color-default: HighlightText;

‎components/actiongroup/dist/metadata.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child",
1818
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:focus-visible",
1919
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover",
20-
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:is([aria-pressed=\"true\"], [aria-expanded=\"true\"])",
20+
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:is(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
2121
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child",
2222
".spectrum-ActionGroup--justified .spectrum-ActionGroup-item",
2323
".spectrum-ActionGroup--sizeL",

‎components/actiongroup/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@
102102
margin-inline-end: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
103103
}
104104

105-
&:is([aria-pressed="true"], [aria-expanded="true"]) {
105+
&:is(.is-selected, [aria-pressed="true"], [aria-expanded="true"]) {
106106
z-index: 1;
107107
}
108108

‎components/coachmark/stories/template.js‎

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export const CoachContainer = (
2323
currentStep = 2,
2424
totalStepCount = 8,
2525
isOpen = false,
26+
alt = "",
2627
} = {},
2728
context = {},
2829
) => {
@@ -37,35 +38,38 @@ export const CoachContainer = (
3738
<div
3839
class=${classMap({
3940
[`${rootClass}-image-wrapper`]: true,
40-
[`${rootClass}-image-wrapper--fixedHeight`]: imageIsFixedHeight
41+
[`${rootClass}-image-wrapper--fixedHeight`]: imageIsFixedHeight,
4142
})}
4243
>
4344
<img
4445
class="${rootClass}-image"
4546
src="${imageSource || "example-card-landscape.png"}"
47+
alt="${alt}"
4648
/>
4749
</div>
4850
`,
4951
)}
50-
<div class="spectrum-CoachMark-header" style=${styleMap({
51-
"--mod-popover-width": "0px",
52-
"--mod-popover-height": "0px",
53-
"--mod-popover-wrapper-spacing": "0px",
54-
})}>
52+
<div
53+
class="spectrum-CoachMark-header"
54+
style=${styleMap({
55+
"--mod-popover-width": "0px",
56+
"--mod-popover-height": "0px",
57+
"--mod-popover-wrapper-spacing": "0px",
58+
})}
59+
>
5560
<div class="spectrum-CoachMark-title">${title}</div>
56-
${when(
57-
hasActionMenu,
58-
() => ActionMenu(
61+
${when(hasActionMenu, () =>
62+
ActionMenu(
5963
{
6064
isOpen,
6165
position: "bottom-start",
6266
triggerArgs: {
6367
iconName: "More",
6468
size: scale === "large" ? "s" : "m",
69+
label: "More actions",
70+
hideLabel: true,
6571
},
66-
customClasses: [
67-
`${rootClass}-action-menu`
68-
],
72+
customClasses: [`${rootClass}-action-menu`],
6973
menuArgs: {
7074
size: scale === "large" ? "s" : "m",
7175
items: [
@@ -76,15 +80,13 @@ export const CoachContainer = (
7680
label: "Reset tour",
7781
},
7882
],
79-
}
83+
},
8084
},
8185
context,
8286
),
8387
)}
8488
</div>
85-
<div class="spectrum-CoachMark-content">
86-
${content}
87-
</div>
89+
<div class="spectrum-CoachMark-content">${content}</div>
8890
<div class="${rootClass}-footer">
8991
${when(
9092
hasPagination,
@@ -136,12 +138,9 @@ export const CoachContainer = (
136138
export const Template = (args, context) => {
137139
return Popover(
138140
{
139-
customWrapperClasses: [
140-
args.rootClass,
141-
...args?.customClasses ?? []
142-
],
141+
customWrapperClasses: [args.rootClass, ...(args?.customClasses ?? [])],
143142
customStyles: {
144-
...args?.customStyles ?? {},
143+
...(args?.customStyles ?? {}),
145144
"inline-size": "var(--spectrum-coach-mark-width)",
146145
},
147146
customClasses: [`${args.rootClass}-popover`],
@@ -177,7 +176,7 @@ export const CoachmarkMenuStatesTemplate = (args, context) =>
177176
...args,
178177
hasImage: false,
179178
hasActionMenu: true,
180-
isOpen: true
179+
isOpen: true,
181180
},
182181
context,
183182
),
@@ -205,8 +204,8 @@ export const CoachMarkMediaOptionsTemplate = (args, context) =>
205204
imageIsFixedHeight: true,
206205
imageSource: "example-card-portrait.png",
207206
customStyles: {
208-
"height": "315px"
209-
}
207+
height: "315px",
208+
},
210209
},
211210
context,
212211
),
@@ -219,8 +218,8 @@ export const CoachMarkMediaOptionsTemplate = (args, context) =>
219218
...args,
220219
imageIsFixedHeight: false,
221220
customStyles: {
222-
"height": "700px"
223-
}
221+
height: "700px",
222+
},
224223
},
225224
context,
226225
),

0 commit comments

Comments
 (0)