Keyboard a11y improvements focus visible (#1275)

* use type=button for PopoverButton * use :focus-visible instead of :focus
VEuPathDB · Nov 15, 2024 · 95c2e15 · 95c2e15
1 parent cdbf6f3
commit 95c2e15
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 1 deletion.
diff --git a/packages/libs/coreui/src/components/buttons/PopoverButton/PopoverButton.tsx b/packages/libs/coreui/src/components/buttons/PopoverButton/PopoverButton.tsx
@@ -177,6 +177,7 @@ const PopoverButton = forwardRef<PopoverButtonHandle, PopoverButtonProps>(
         additionalAriaProperties={{
           'aria-controls': 'dropdown',
           'aria-haspopup': 'true',
+          type: 'button',
         }}
       />
     );

diff --git a/packages/libs/coreui/src/components/theming/UIThemeProvider.tsx b/packages/libs/coreui/src/components/theming/UIThemeProvider.tsx
@@ -18,7 +18,7 @@ export default function UIThemeProvider({
     <ThemeProvider theme={theme}>
       <Global
         styles={css`
-          *:focus {
+          *:focus-visible {
             outline: 2px solid
               ${theme.palette.primary.hue[theme.palette.primary.level]};
           }