frontend: ClusterChooserPopup: Fix ARIA listbox roles

Author: mahmoudmagdy1-1

frontend/src/components/cluster/ClusterChooserPopup.tsx

@@ -46,9 +46,11 @@ function ClusterListItem(props: { cluster: Cluster; onClick: () => void; selecte
   return (
     <MenuItem
       selected={selected}
+      aria-selected={!!cluster.isCurrent}
       key={`recent_cluster_${cluster.name}`}
       onClick={onClick}
       id={cluster.name}
+      role="option"
       sx={theme => ({
         borderRadius: theme.shape.borderRadius + 'px',
       })}
@@ -257,6 +259,7 @@ function ClusterChooserPopup(props: ChooserPopupPros) {
         />
         <MenuList
           id="cluster-chooser-list"
+          role="listbox"
           tabIndex={0}
           sx={{
             width: '280px',

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

@@ -68,13 +68,14 @@
         <ul
           class="MuiList-root MuiList-padding MuiList-dense css-1k1lw4j-MuiList-root"
           id="cluster-chooser-list"
-          role="menu"
+          role="listbox"
           tabindex="0"
         >
           <li
+            aria-selected="true"
             class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
             id="cluster0"
-            role="menuitem"
+            role="option"
             tabindex="-1"
           >
             <div
@@ -100,9 +101,10 @@
             />
           </li>
           <li
+            aria-selected="false"
             class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
             id="cluster1"
-            role="menuitem"
+            role="option"
             tabindex="-1"
           >
             <div
@@ -119,9 +121,10 @@
             />
           </li>
           <li
+            aria-selected="false"
             class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
             id="cluster2"
-            role="menuitem"
+            role="option"
             tabindex="-1"
           >
             <div

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

@@ -68,13 +68,14 @@
         <ul
           class="MuiList-root MuiList-padding MuiList-dense css-1k1lw4j-MuiList-root"
           id="cluster-chooser-list"
-          role="menu"
+          role="listbox"
           tabindex="0"
         >
           <li
+            aria-selected="true"
             class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
             id="cluster0"
-            role="menuitem"
+            role="option"
             tabindex="-1"
           >
             <div
@@ -100,9 +101,10 @@
             />
           </li>
           <li
+            aria-selected="false"
             class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
             id="cluster1"
-            role="menuitem"
+            role="option"
             tabindex="-1"
           >
             <div
@@ -119,9 +121,10 @@
             />
           </li>
           <li
+            aria-selected="false"
             class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
             id="cluster2"
-            role="menuitem"
+            role="option"
             tabindex="-1"
           >
             <div
@@ -138,9 +141,10 @@
             />
           </li>
           <li
+            aria-selected="false"
             class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
             id="cluster3"
-            role="menuitem"
+            role="option"
             tabindex="-1"
           >
             <div
@@ -157,9 +161,10 @@
             />
           </li>
           <li
+            aria-selected="false"
             class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
             id="cluster4"
-            role="menuitem"
+            role="option"
             tabindex="-1"
           >
             <div

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

@@ -68,7 +68,7 @@
         <ul
           class="MuiList-root MuiList-padding MuiList-dense css-1k1lw4j-MuiList-root"
           id="cluster-chooser-list"
-          role="menu"
+          role="listbox"
           tabindex="0"
         >
           <li
@@ -78,9 +78,10 @@
             Recent clusters
           </li>
           <li
+            aria-selected="true"
             class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
             id="cluster2"
-            role="menuitem"
+            role="option"
             tabindex="-1"
           >
             <div
@@ -106,9 +107,10 @@
             />
           </li>
           <li
+            aria-selected="false"
             class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
             id="cluster1"
-            role="menuitem"
+            role="option"
             tabindex="-1"
           >
             <div
@@ -125,9 +127,10 @@
             />
           </li>
           <li
+            aria-selected="false"
             class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
             id="cluster3"
-            role="menuitem"
+            role="option"
             tabindex="-1"
           >
             <div
@@ -148,9 +151,10 @@
             role="separator"
           />
           <li
+            aria-selected="false"
             class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
             id="cluster0"
-            role="menuitem"
+            role="option"
             tabindex="-1"
           >
             <div
@@ -167,9 +171,10 @@
             />
           </li>
           <li
+            aria-selected="false"
             class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-aom5s3-MuiButtonBase-root-MuiMenuItem-root"
             id="cluster4"
-            role="menuitem"
+            role="option"
             tabindex="-1"
           >
             <div