Skip to content

Commit 4a2cfe1

Browse files
castastrophecastastrophe
committed
chore(menu): apply aria fixes to menu template per a11y review
1 parent eb90bd2 commit 4a2cfe1

File tree

10 files changed

+935
-633
lines changed

10 files changed

+935
-633
lines changed

‎components/actionbutton/dist/metadata.json

Lines changed: 5 additions & 5 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,8 +34,8 @@
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
],

‎components/actionbutton/index.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -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));
@@ -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/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
),

‎components/combobox/stories/combobox.stories.js

Lines changed: 59 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,20 @@
11
import { Template as Menu } from "@spectrum-css/menu/stories/template.js";
2-
import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
2+
import {
3+
Sizes,
4+
withDownStateDimensionCapture,
5+
} from "@spectrum-css/preview/decorators";
36
import { disableDefaultModes } from "@spectrum-css/preview/modes";
4-
import { isDisabled, isFocused, isHovered, isInvalid, isKeyboardFocused, isLoading, isOpen, isReadOnly, size } from "@spectrum-css/preview/types";
7+
import {
8+
isDisabled,
9+
isFocused,
10+
isHovered,
11+
isInvalid,
12+
isKeyboardFocused,
13+
isLoading,
14+
isOpen,
15+
isReadOnly,
16+
size,
17+
} from "@spectrum-css/preview/types";
518
import { within } from "@storybook/test";
619
import metadata from "../dist/metadata.json";
720
import packageJson from "../package.json";
@@ -141,33 +154,36 @@ export default {
141154
helpText: "",
142155
value: "Ballard",
143156
content: [
144-
(passthroughs, context) => Menu({
145-
role: "listbox",
146-
subrole: "option",
147-
selectionMode: "single",
148-
hasDividers: true,
149-
items: [
157+
(passthroughs, context) =>
158+
Menu(
150159
{
151-
label: "Ballard",
152-
isSelected: true,
153-
isChecked: true,
160+
role: "listbox",
161+
selectionMode: "single",
162+
hasDividers: true,
163+
items: [
164+
{
165+
label: "Ballard",
166+
isSelected: true,
167+
isChecked: true,
168+
},
169+
{
170+
label: "Fremont",
171+
},
172+
{
173+
label: "Greenwood",
174+
},
175+
{
176+
type: "divider",
177+
},
178+
{
179+
label: "United States of America",
180+
isDisabled: true,
181+
},
182+
],
183+
...passthroughs,
154184
},
155-
{
156-
label: "Fremont",
157-
},
158-
{
159-
label: "Greenwood",
160-
},
161-
{
162-
type: "divider",
163-
},
164-
{
165-
label: "United States of America",
166-
isDisabled: true,
167-
},
168-
],
169-
...passthroughs,
170-
}, context),
185+
context,
186+
),
171187
],
172188
},
173189
parameters: {
@@ -185,9 +201,7 @@ export default {
185201
},
186202
},
187203
tags: ["migrated"],
188-
decorators: [
189-
withDownStateDimensionCapture,
190-
],
204+
decorators: [withDownStateDimensionCapture],
191205
play: async ({ canvasElement }) => {
192206
const canvas = within(canvasElement);
193207

@@ -199,7 +213,7 @@ export default {
199213
export const Default = ComboBoxGroup.bind({});
200214
Default.tags = ["!autodocs"];
201215
Default.parameters = {
202-
chromatic: { delay: 1000 }
216+
chromatic: { delay: 1000 },
203217
};
204218

205219
// ********* DOCS ONLY ********* //
@@ -227,28 +241,31 @@ HelpText.args = {
227241
helpText: "This is a help text. Select an option",
228242
};
229243

230-
231244
/**
232245
* Comboboxes have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed. A combobox does not have a read-only option if no selection has been made. To enable this feature, add the `.is-readOnly` class to the combobox. To enable this feature, add the `.is-readOnly` class to the combobox. Then within the nested textfield component, add the `.is-readOnly class and readonly attribute to the `input` element.
233-
*/
246+
*/
234247
export const ReadOnly = Template.bind({});
235248
ReadOnly.tags = ["!dev"];
236249
ReadOnly.args = {
237250
isReadOnly: true,
238-
value: "Ballard"
251+
value: "Ballard",
239252
};
240253
ReadOnly.parameters = {
241-
chromatic: { disableSnapshot: true }
254+
chromatic: { disableSnapshot: true },
242255
};
243256

244257
ReadOnly.storyName = "Read-only";
245258

246-
export const Sizing = (args, context) => Sizes({
247-
Template,
248-
withBorder: false,
249-
withHeading: false,
250-
...args,
251-
}, context);
259+
export const Sizing = (args, context) =>
260+
Sizes(
261+
{
262+
Template,
263+
withBorder: false,
264+
withHeading: false,
265+
...args,
266+
},
267+
context,
268+
);
252269
Sizing.tags = ["!dev"];
253270
Sizing.parameters = {
254271
chromatic: { disableSnapshot: true },
@@ -260,6 +277,6 @@ WithForcedColors.tags = ["!autodocs", "!dev"];
260277
WithForcedColors.parameters = {
261278
chromatic: {
262279
forcedColors: "active",
263-
modes: disableDefaultModes
280+
modes: disableDefaultModes,
264281
},
265282
};

0 commit comments

Comments
 (0)