Skip to content

Commit 074548f

Browse files
illumeillume
authored
Merge pull request #4633 from mahmoudmagdy1-1/cluster-chooser-popup-a11y-roles
frontend: Fix a11y roles in ClusterChooserPopup
2 parents 1c5444b + 81cf1cc commit 074548f

File tree

5 files changed

+73
-37
lines changed

5 files changed

+73
-37
lines changed

‎frontend/src/components/cluster/ClusterChooserPopup.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,11 @@ function ClusterListItem(props: { cluster: Cluster; onClick: () => void; selecte
4646
return (
4747
<MenuItem
4848
selected={selected}
49+
aria-selected={!!cluster.isCurrent}
4950
key={`recent_cluster_${cluster.name}`}
5051
onClick={onClick}
5152
id={cluster.name}
53+
role="option"
5254
sx={theme => ({
5355
borderRadius: theme.shape.borderRadius + 'px',
5456
})}
@@ -257,6 +259,7 @@ function ClusterChooserPopup(props: ChooserPopupPros) {
257259
/>
258260
<MenuList
259261
id="cluster-chooser-list"
262+
role="listbox"
260263
tabIndex={0}
261264
sx={{
262265
width: '280px',

‎frontend/src/components/cluster/__snapshots__/ClusterChooserPopup.NoClustersButRecent.stories.storyshot‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,14 @@
6868
<ul
6969
class="MuiList-root MuiList-padding MuiList-dense css-1k1lw4j-MuiList-root"
7070
id="cluster-chooser-list"
71-
role="menu"
71+
role="listbox"
7272
tabindex="0"
7373
>
7474
<li
75+
aria-selected="true"
7576
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
7677
id="cluster0"
77-
role="menuitem"
78+
role="option"
7879
tabindex="-1"
7980
>
8081
<div
@@ -100,9 +101,10 @@
100101
/>
101102
</li>
102103
<li
104+
aria-selected="false"
103105
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
104106
id="cluster1"
105-
role="menuitem"
107+
role="option"
106108
tabindex="-1"
107109
>
108110
<div
@@ -119,9 +121,10 @@
119121
/>
120122
</li>
121123
<li
124+
aria-selected="false"
122125
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
123126
id="cluster2"
124-
role="menuitem"
127+
role="option"
125128
tabindex="-1"
126129
>
127130
<div

‎frontend/src/components/cluster/__snapshots__/ClusterChooserPopup.NoRecentClusters.stories.storyshot‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,14 @@
6868
<ul
6969
class="MuiList-root MuiList-padding MuiList-dense css-1k1lw4j-MuiList-root"
7070
id="cluster-chooser-list"
71-
role="menu"
71+
role="listbox"
7272
tabindex="0"
7373
>
7474
<li
75+
aria-selected="true"
7576
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
7677
id="cluster0"
77-
role="menuitem"
78+
role="option"
7879
tabindex="-1"
7980
>
8081
<div
@@ -100,9 +101,10 @@
100101
/>
101102
</li>
102103
<li
104+
aria-selected="false"
103105
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
104106
id="cluster1"
105-
role="menuitem"
107+
role="option"
106108
tabindex="-1"
107109
>
108110
<div
@@ -119,9 +121,10 @@
119121
/>
120122
</li>
121123
<li
124+
aria-selected="false"
122125
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
123126
id="cluster2"
124-
role="menuitem"
127+
role="option"
125128
tabindex="-1"
126129
>
127130
<div
@@ -138,9 +141,10 @@
138141
/>
139142
</li>
140143
<li
144+
aria-selected="false"
141145
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
142146
id="cluster3"
143-
role="menuitem"
147+
role="option"
144148
tabindex="-1"
145149
>
146150
<div
@@ -157,9 +161,10 @@
157161
/>
158162
</li>
159163
<li
164+
aria-selected="false"
160165
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
161166
id="cluster4"
162-
role="menuitem"
167+
role="option"
163168
tabindex="-1"
164169
>
165170
<div

‎frontend/src/components/cluster/__snapshots__/ClusterChooserPopup.Normal.stories.storyshot‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
<ul
6969
class="MuiList-root MuiList-padding MuiList-dense css-1k1lw4j-MuiList-root"
7070
id="cluster-chooser-list"
71-
role="menu"
71+
role="listbox"
7272
tabindex="0"
7373
>
7474
<li
@@ -78,9 +78,10 @@
7878
Recent clusters
7979
</li>
8080
<li
81+
aria-selected="true"
8182
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
8283
id="cluster2"
83-
role="menuitem"
84+
role="option"
8485
tabindex="-1"
8586
>
8687
<div
@@ -106,9 +107,10 @@
106107
/>
107108
</li>
108109
<li
110+
aria-selected="false"
109111
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
110112
id="cluster1"
111-
role="menuitem"
113+
role="option"
112114
tabindex="-1"
113115
>
114116
<div
@@ -125,9 +127,10 @@
125127
/>
126128
</li>
127129
<li
130+
aria-selected="false"
128131
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
129132
id="cluster3"
130-
role="menuitem"
133+
role="option"
131134
tabindex="-1"
132135
>
133136
<div
@@ -148,9 +151,10 @@
148151
role="separator"
149152
/>
150153
<li
154+
aria-selected="false"
151155
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
152156
id="cluster0"
153-
role="menuitem"
157+
role="option"
154158
tabindex="-1"
155159
>
156160
<div
@@ -167,9 +171,10 @@
167171
/>
168172
</li>
169173
<li
174+
aria-selected="false"
170175
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
171176
id="cluster4"
172-
role="menuitem"
177+
role="option"
173178
tabindex="-1"
174179
>
175180
<div

0 commit comments

Comments
 (0)