Merge pull request #1291 from oasisprotocol/mz/pickerAccessibility

Fix keyboard accessibility of layer picker component
oasisprotocol · Feb 26, 2024 · 7a4f764 · 7a4f764
2 parents a8b4c3f + 51d8d63
commit 7a4f764
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 1 deletion.
diff --git a/.changelog/1291.trivial.md b/.changelog/1291.trivial.md
@@ -0,0 +1 @@
+Fix keyboard accessibility of layer picker component
diff --git a/src/app/components/LayerPicker/LayerDetails.tsx b/src/app/components/LayerPicker/LayerDetails.tsx
@@ -85,9 +85,10 @@ export const StyledButton = styled(Button)(({ theme }) => ({
   fontSize: 24,
   color: COLORS.brandDark,
   fontWeight: 700,
-  '&&:hover, &&:active': {
+  '&&:hover, &&:active, &&:focus-visible': {
     color: COLORS.brandDark,
     textDecoration: 'none',
+    borderRadius: 0,
   },
 }))
 

diff --git a/src/app/components/LayerPicker/LayerMenu.tsx b/src/app/components/LayerPicker/LayerMenu.tsx
@@ -82,6 +82,7 @@ export const LayerMenuItem: FC<LayerMenuItemProps> = ({
         setSelectedLayer(layer)
       }}
       selected={activeLayerSelection}
+      tabIndex={activeLayerSelection ? 0 : -1}
     >
       <ListItemText>
         {labels[layer]}

diff --git a/src/app/components/LayerPicker/NetworkMenu.tsx b/src/app/components/LayerPicker/NetworkMenu.tsx
@@ -41,6 +41,7 @@ export const NetworkMenuItem: FC<NetworkMenuItemProps> = ({
         setHoveredNetwork(undefined)
       }}
       selected={activeNetworkSelection}
+      tabIndex={activeNetworkSelection ? 0 : -1}
       onClick={() => {
         setSelectedNetwork(network)
       }}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Fix keyboard accessibility of layer picker component