Skip to content

Commit 1b9011d

Browse files
strackoverflowstrackoverflow
authored
Fix missing selection attributes in ActionList items (#4096)
* include selectionAttribute in ListContext * remove aria-selected from test to assert default ActionList selection behavior * changeset * clarify variable names * only apply aria selection attributes to the appropriate roles * infer selection attribute based on item role * remove variable no longer needed * update snapshots
1 parent 1a1d89c commit 1b9011d

File tree

4 files changed

+57
-9
lines changed

4 files changed

+57
-9
lines changed

‎.changeset/rare-jeans-rush.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': patch
3+
---
4+
5+
Fix missing `aria-selected` & `aria-checked` attributes in ActionList items

‎src/ActionList/ActionList.test.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ function SingleSelectListStory(): JSX.Element {
4444
key={index}
4545
role="option"
4646
selected={index === selectedIndex}
47-
aria-selected={index === selectedIndex}
4847
onSelect={() => setSelectedIndex(index)}
4948
disabled={project.disabled}
5049
inactiveText={project.inactiveText}

‎src/ActionList/Item.tsx

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -98,15 +98,24 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
9898
: listSelectionVariant
9999

100100
/** Infer item role based on the container */
101-
let itemRole: ActionListItemProps['role']
101+
let inferredItemRole: ActionListItemProps['role']
102102
if (container === 'ActionMenu') {
103-
if (selectionVariant === 'single') itemRole = 'menuitemradio'
104-
else if (selectionVariant === 'multiple') itemRole = 'menuitemcheckbox'
105-
else itemRole = 'menuitem'
103+
if (selectionVariant === 'single') inferredItemRole = 'menuitemradio'
104+
else if (selectionVariant === 'multiple') inferredItemRole = 'menuitemcheckbox'
105+
else inferredItemRole = 'menuitem'
106106
} else if (container === 'SelectPanel' && listRole === 'listbox') {
107-
if (selectionVariant !== undefined) itemRole = 'option'
107+
if (selectionVariant !== undefined) inferredItemRole = 'option'
108108
}
109109

110+
const itemRole = role || inferredItemRole
111+
112+
/** Infer the proper selection attribute based on the item's role */
113+
let inferredSelectionAttribute: 'aria-selected' | 'aria-checked' | undefined
114+
if (itemRole === 'menuitemradio' || itemRole === 'menuitemcheckbox') inferredSelectionAttribute = 'aria-checked'
115+
else if (itemRole === 'option') inferredSelectionAttribute = 'aria-selected'
116+
117+
const itemSelectionAttribute = selectionAttribute || inferredSelectionAttribute
118+
110119
const {theme} = useTheme()
111120

112121
const activeStyles = {
@@ -234,6 +243,10 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
234243

235244
const ItemWrapper = _PrivateItemWrapper || React.Fragment
236245

246+
// only apply aria-selected and aria-checked to selectable items
247+
const selectableRoles = ['menuitemradio', 'menuitemcheckbox', 'option']
248+
const includeSelectionAttribute = itemSelectionAttribute && itemRole && selectableRoles.includes(itemRole)
249+
237250
const menuItemProps = {
238251
onClick: clickHandler,
239252
onKeyPress: keyPressHandler,
@@ -244,12 +257,12 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
244257
'aria-describedby': slots.blockDescription
245258
? [blockDescriptionId, inactiveWarningId].join(' ')
246259
: inactiveWarningId,
247-
...(selectionAttribute && {[selectionAttribute]: selected}),
248-
role: role || itemRole,
260+
...(includeSelectionAttribute && {[itemSelectionAttribute]: selected}),
261+
role: itemRole,
249262
id: itemId,
250263
}
251264

252-
const containerProps = _PrivateItemWrapper ? {role: role || itemRole ? 'none' : undefined} : menuItemProps
265+
const containerProps = _PrivateItemWrapper ? {role: itemRole ? 'none' : undefined} : menuItemProps
253266

254267
const wrapperProps = _PrivateItemWrapper ? menuItemProps : {}
255268

‎src/__tests__/__snapshots__/Autocomplete.test.tsx.snap

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -789,6 +789,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
789789
>
790790
<li
791791
aria-labelledby="0--label "
792+
aria-selected={false}
792793
className="c2 c3"
793794
data-id="0"
794795
id="0"
@@ -819,6 +820,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
819820
</li>
820821
<li
821822
aria-labelledby="1--label "
823+
aria-selected={false}
822824
className="c2 c3"
823825
data-id="1"
824826
id="1"
@@ -849,6 +851,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
849851
</li>
850852
<li
851853
aria-labelledby="2--label "
854+
aria-selected={false}
852855
className="c2 c3"
853856
data-id="2"
854857
id="2"
@@ -879,6 +882,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
879882
</li>
880883
<li
881884
aria-labelledby="3--label "
885+
aria-selected={false}
882886
className="c2 c3"
883887
data-id="3"
884888
id="3"
@@ -909,6 +913,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
909913
</li>
910914
<li
911915
aria-labelledby="4--label "
916+
aria-selected={false}
912917
className="c2 c3"
913918
data-id="4"
914919
id="4"
@@ -939,6 +944,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
939944
</li>
940945
<li
941946
aria-labelledby="5--label "
947+
aria-selected={false}
942948
className="c2 c3"
943949
data-id="5"
944950
id="5"
@@ -969,6 +975,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
969975
</li>
970976
<li
971977
aria-labelledby="6--label "
978+
aria-selected={false}
972979
className="c2 c3"
973980
data-id="6"
974981
id="6"
@@ -999,6 +1006,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
9991006
</li>
10001007
<li
10011008
aria-labelledby="7--label "
1009+
aria-selected={false}
10021010
className="c2 c3"
10031011
data-id="7"
10041012
id="7"
@@ -1029,6 +1037,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
10291037
</li>
10301038
<li
10311039
aria-labelledby="20--label "
1040+
aria-selected={false}
10321041
className="c2 c3"
10331042
data-id="20"
10341043
id="20"
@@ -1059,6 +1068,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
10591068
</li>
10601069
<li
10611070
aria-labelledby="21--label "
1071+
aria-selected={false}
10621072
className="c2 c3"
10631073
data-id="21"
10641074
id="21"
@@ -1089,6 +1099,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
10891099
</li>
10901100
<li
10911101
aria-labelledby="add-new-item--label "
1102+
aria-selected={false}
10921103
className="c2 c3"
10931104
data-id="add-new-item"
10941105
id="add-new-item"
@@ -1512,6 +1523,7 @@ exports[`snapshots renders a multiselect input 1`] = `
15121523
>
15131524
<li
15141525
aria-labelledby="0--label "
1526+
aria-selected={false}
15151527
className="c2 c3"
15161528
data-id="0"
15171529
id="0"
@@ -1542,6 +1554,7 @@ exports[`snapshots renders a multiselect input 1`] = `
15421554
</li>
15431555
<li
15441556
aria-labelledby="1--label "
1557+
aria-selected={false}
15451558
className="c2 c3"
15461559
data-id="1"
15471560
id="1"
@@ -1572,6 +1585,7 @@ exports[`snapshots renders a multiselect input 1`] = `
15721585
</li>
15731586
<li
15741587
aria-labelledby="2--label "
1588+
aria-selected={false}
15751589
className="c2 c3"
15761590
data-id="2"
15771591
id="2"
@@ -1602,6 +1616,7 @@ exports[`snapshots renders a multiselect input 1`] = `
16021616
</li>
16031617
<li
16041618
aria-labelledby="3--label "
1619+
aria-selected={false}
16051620
className="c2 c3"
16061621
data-id="3"
16071622
id="3"
@@ -1632,6 +1647,7 @@ exports[`snapshots renders a multiselect input 1`] = `
16321647
</li>
16331648
<li
16341649
aria-labelledby="4--label "
1650+
aria-selected={false}
16351651
className="c2 c3"
16361652
data-id="4"
16371653
id="4"
@@ -1662,6 +1678,7 @@ exports[`snapshots renders a multiselect input 1`] = `
16621678
</li>
16631679
<li
16641680
aria-labelledby="5--label "
1681+
aria-selected={false}
16651682
className="c2 c3"
16661683
data-id="5"
16671684
id="5"
@@ -1692,6 +1709,7 @@ exports[`snapshots renders a multiselect input 1`] = `
16921709
</li>
16931710
<li
16941711
aria-labelledby="6--label "
1712+
aria-selected={false}
16951713
className="c2 c3"
16961714
data-id="6"
16971715
id="6"
@@ -1722,6 +1740,7 @@ exports[`snapshots renders a multiselect input 1`] = `
17221740
</li>
17231741
<li
17241742
aria-labelledby="7--label "
1743+
aria-selected={false}
17251744
className="c2 c3"
17261745
data-id="7"
17271746
id="7"
@@ -1752,6 +1771,7 @@ exports[`snapshots renders a multiselect input 1`] = `
17521771
</li>
17531772
<li
17541773
aria-labelledby="20--label "
1774+
aria-selected={false}
17551775
className="c2 c3"
17561776
data-id="20"
17571777
id="20"
@@ -1782,6 +1802,7 @@ exports[`snapshots renders a multiselect input 1`] = `
17821802
</li>
17831803
<li
17841804
aria-labelledby="21--label "
1805+
aria-selected={false}
17851806
className="c2 c3"
17861807
data-id="21"
17871808
id="21"
@@ -2329,6 +2350,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
23292350
>
23302351
<li
23312352
aria-labelledby="0--label "
2353+
aria-selected={true}
23322354
className="c2 c3"
23332355
data-id="0"
23342356
id="0"
@@ -2359,6 +2381,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
23592381
</li>
23602382
<li
23612383
aria-labelledby="1--label "
2384+
aria-selected={true}
23622385
className="c2 c3"
23632386
data-id="1"
23642387
id="1"
@@ -2389,6 +2412,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
23892412
</li>
23902413
<li
23912414
aria-labelledby="2--label "
2415+
aria-selected={true}
23922416
className="c2 c3"
23932417
data-id="2"
23942418
id="2"
@@ -2419,6 +2443,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
24192443
</li>
24202444
<li
24212445
aria-labelledby="3--label "
2446+
aria-selected={false}
24222447
className="c2 c8"
24232448
data-id="3"
24242449
id="3"
@@ -2449,6 +2474,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
24492474
</li>
24502475
<li
24512476
aria-labelledby="4--label "
2477+
aria-selected={false}
24522478
className="c2 c8"
24532479
data-id="4"
24542480
id="4"
@@ -2479,6 +2505,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
24792505
</li>
24802506
<li
24812507
aria-labelledby="5--label "
2508+
aria-selected={false}
24822509
className="c2 c8"
24832510
data-id="5"
24842511
id="5"
@@ -2509,6 +2536,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
25092536
</li>
25102537
<li
25112538
aria-labelledby="6--label "
2539+
aria-selected={false}
25122540
className="c2 c8"
25132541
data-id="6"
25142542
id="6"
@@ -2539,6 +2567,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
25392567
</li>
25402568
<li
25412569
aria-labelledby="7--label "
2570+
aria-selected={false}
25422571
className="c2 c8"
25432572
data-id="7"
25442573
id="7"
@@ -2569,6 +2598,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
25692598
</li>
25702599
<li
25712600
aria-labelledby="20--label "
2601+
aria-selected={false}
25722602
className="c2 c8"
25732603
data-id="20"
25742604
id="20"
@@ -2599,6 +2629,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
25992629
</li>
26002630
<li
26012631
aria-labelledby="21--label "
2632+
aria-selected={false}
26022633
className="c2 c8"
26032634
data-id="21"
26042635
id="21"

0 commit comments

Comments
 (0)