[Fix Accessibility]: Add tabIndex to VariantItem for improved accessibility (#1738)

jpg619 · web-flow · commit 4b97e8a1305d · 2025-10-06T11:39:59.000-04:00
- Keyboard focus order is not logical for the list items under 'Select CLI Version' button. keyboard focus is moving twice upon the version list items. https://github.com/user-attachments/assets/e3306e28-11ae-48be-b115-17c4ddabf62e
diff --git a/src/components/variant-select.js b/src/components/variant-select.js
@@ -16,7 +16,7 @@ const StyledOverlay = styled(ActionMenu.Overlay)`
 
 const VariantItem = ({title, shortName, url, active}) => {
   return (
-    <ActionList.Item state={{scrollUpdate: false}} id={shortName} active={active}>
+    <ActionList.Item state={{scrollUpdate: false}} id={shortName} active={active} tabIndex={null}>
       <LinkNoUnderline to={url}>{title}</LinkNoUnderline>
     </ActionList.Item>
   )

Original file line number	Diff line number	Diff line change
@@ -16,7 +16,7 @@ const StyledOverlay = styled(ActionMenu.Overlay)`
`16`	`16`
`17`	`17`	`const VariantItem = ({title, shortName, url, active}) => {`
`18`	`18`	`return (`
`19`		`- <ActionList.Item state={{scrollUpdate: false}} id={shortName} active={active}>`
	`19`	`+ <ActionList.Item state={{scrollUpdate: false}} id={shortName} active={active} tabIndex={null}>`
`20`	`20`	`<LinkNoUnderline to={url}>{title}</LinkNoUnderline>`
`21`	`21`	`</ActionList.Item>`
`22`	`22`	`)`