💄Menu: focus-ring from :focus to :focus-visible (#3396)

* 💄Menu: focus-ring from :focus to :focus-visible * remove no longer needed z-index
equinor · Apr 23, 2024 · 6662c26 · 6662c26
1 parent a441137
commit 6662c26
Showing 1 changed file with 1 addition and 5 deletions.
diff --git a/packages/eds-core-react/src/components/Menu/MenuItem.tsx b/packages/eds-core-react/src/components/Menu/MenuItem.tsx
@@ -61,9 +61,6 @@ const Item = styled.button.attrs<StyleAttrsProps>(({ $isFocused }) => ({
           svg {
             fill: ${icon.states.disabled.typography.color};
           }
-          &:focus {
-            outline: none;
-          }
           @media (hover: hover) and (pointer: fine) {
             &:hover {
               cursor: not-allowed;
@@ -73,12 +70,11 @@ const Item = styled.button.attrs<StyleAttrsProps>(({ $isFocused }) => ({
       : css`
           @media (hover: hover) and (pointer: fine) {
             &:hover {
-              z-index: 1;
               cursor: pointer;
               background: ${hover.background};
             }
           }
-          &:focus {
+          &:focus-visible {
             z-index: 3;
             ${outlineTemplate(focus.outline)}
           }