fix(Listitem): Improved strategy for :focus-visible CSS (remove z-index from MenuHeading)

- Increased :focus-visible box-shadow on AccordionDisclosure to 2px to match ListItem box-shadow sizing

Author: Luke Bowerman

packages/components/src/Accordion/AccordionDisclosure.tsx

@@ -144,13 +144,19 @@ export const AccordionDisclosureStyle = styled.div
     color ? colorStyleFn : `color: ${theme.colors.ui5};`}
   cursor: pointer;
   display: flex;
-  outline: 1px solid transparent;
-  outline-color: ${({ focusVisible, theme }) =>
-    focusVisible && theme.colors.keyFocus};
   ${padding}
+  outline: none;
   text-align: left;
   width: 100%;
-`
+
+  ${({ focusVisible, theme }) =>
+    focusVisible &&
+    `
+      &:focus {
+        box-shadow: inset 0 0 0 2px ${theme.colors.keyFocus};
+      }
+    `}
+  `
 
 export const AccordionDisclosure = styled(AccordionDisclosureInternal).attrs(
   (props) => ({

packages/components/src/List/ListItemWrapper.tsx

@@ -101,26 +101,17 @@ export const ListItemWrapper = styled(ListItemWrapperInternal)`
     &:hover,
     &:focus {
       color: inherit;
-      position: relative;
       text-decoration: none;
     }
   }
 
-  ${({ focusVisible, theme: { colors } }) =>
+  ${({ focusVisible, theme }) =>
     focusVisible &&
-    `&:focus-within > button:after,
-    &:focus-within > a:after {
-      content: '';
-      display:block;
-      border: solid 2px ${colors.keyFocus};
-      border-radius: 2px;
-      margin: 0 1px;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
+    `
+      &:focus-within > button,
+      &:focus-within > a {
+        box-shadow: inset 0 0 0 2px ${theme.colors.keyFocus};
+      }
     `}
 
   ${Icon} {

packages/components/src/Menu/MenuHeading.tsx

@@ -97,8 +97,4 @@ const MenuHeadingWrapper = styled.li<MenuHeadingWrapperProps>`
     renderBoxShadow ? `0 4px 8px -2px ${colors.ui2}` : 'none'};
   position: sticky;
   top: -1px;
-  /* Prevents a conflict with position: relative items
-    (which have an additional stacking-context) from
-    creating a problematic rendering */
-  z-index: 2;
 `