Merge pull request #9953 from abailly-akamai/M3-7477

fix: [M3-7477] - Fix accessibility on disabled SelectRegion menu items
linode · Dec 4, 2023 · 434917d · 434917d
2 parents 0989de5 + 0980da2
commit 434917d
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/packages/manager/.changeset/pr-9953-fixed-1701463226665.md b/packages/manager/.changeset/pr-9953-fixed-1701463226665.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Fix accessibility on disabled SelectRegion menu items ([#9953](https://github.com/linode/manager/pull/9953))
diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.styles.ts b/packages/manager/src/components/RegionSelect/RegionSelect.styles.ts
@@ -42,17 +42,14 @@ export const StyledLParentListItem = styled(ListItem, {
 
 export const StyledListItem = styled(ListItem, {
   label: 'RegionSelectListItem',
-})(({ theme }) => ({
+})(() => ({
+  '&.Mui-disabled': {
+    cursor: 'not-allowed',
+  },
   '&.MuiAutocomplete-option': {
     minHeight: 'auto !important',
     padding: '8px 10px !important',
   },
-  '&.MuiListItem-root[aria-disabled="true"]': {
-    background: 'transparent !important',
-    color: theme.palette.text.primary,
-    cursor: 'not-allowed !important',
-    pointerEvents: 'inherit !important',
-  },
   '&.MuiListItem-root[aria-disabled="true"]:active': {
     pointerEvents: 'none !important',
   },

diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/RegionSelect/RegionSelect.tsx
@@ -1,3 +1,4 @@
+import { visuallyHidden } from '@mui/utils';
 import * as React from 'react';
 
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
@@ -133,19 +134,39 @@ export const RegionSelect = React.memo((props: RegionSelectProps) => {
             >
               <StyledListItem
                 {...props}
+                className={
+                  isDisabledMenuItem
+                    ? `${props.className} Mui-disabled`
+                    : props.className
+                }
                 componentsProps={{
                   root: {
                     'data-qa-option': option.value,
                     'data-testid': option.value,
                   } as ListItemComponentsPropsOverrides,
                 }}
+                onClick={(e) =>
+                  isDisabledMenuItem
+                    ? e.preventDefault()
+                    : props.onClick
+                    ? props.onClick(e)
+                    : null
+                }
+                aria-disabled={undefined}
               >
                 <>
                   <Box alignItems="center" display="flex" flexGrow={1}>
                     <StyledFlagContainer>
                       <Flag country={option.data.country} />
                     </StyledFlagContainer>
                     {option.label}
+                    {isDisabledMenuItem && (
+                      <Box sx={visuallyHidden}>
+                        Disabled option - There may be limited capacity in this
+                        region. Learn more at
+                        https://www.linode.com/global-infrastructure/availability.
+                      </Box>
+                    )}
                   </Box>
                   {selected && <SelectedIcon visible={selected} />}
                 </>