Use focus-visible for some focus styles to fix a11y issues (#12968)

feat(a11y): fix-focus-styles

css/_welcome_page.scss

@@ -90,7 +90,7 @@ body.welcome-page {
                     font-size: 14px;
                     padding-left: 10px;
 
-                    &:focus {
+                    &.focus-visible {
                         outline: auto 2px #005fcc;
                     }
                 }

react/features/base/ui/components/web/Button.tsx

@@ -69,7 +69,7 @@ const useStyles = makeStyles()(theme => {
                 backgroundColor: theme.palette.action01Active
             },
 
-            '&:focus': {
+            '&.focus-visible': {
                 outline: 0,
                 boxShadow: `0px 0px 0px 2px ${theme.palette.focus01}`
             },

react/features/base/ui/components/web/ClickableIcon.tsx

@@ -25,7 +25,7 @@ const useStyles = makeStyles()(theme => {
                 backgroundColor: theme.palette.ui02
             },
 
-            '&:focus': {
+            '&.focus-visible': {
                 outline: 0,
                 boxShadow: `0px 0px 0px 2px ${theme.palette.focus01}`
             },

react/features/base/ui/components/web/ContextMenuItem.tsx

@@ -110,7 +110,7 @@ const useStyles = makeStyles()(theme => {
                 backgroundColor: theme.palette.ui03
             },
 
-            '&:focus': {
+            '&.focus-visible': {
                 boxShadow: `inset 0 0 0 2px ${theme.palette.action01Hover}`
             }
         },

react/features/base/ui/components/web/Dialog.tsx

@@ -23,12 +23,6 @@ const useStyles = makeStyles()(theme => {
             justifyContent: 'space-between'
         },
 
-        closeIcon: {
-            '&:focus': {
-                boxShadow: 'none'
-            }
-        },
-
         title: {
             color: theme.palette.text01,
             ...withPixelLineHeight(theme.typography.heading5),
@@ -138,7 +132,6 @@ const Dialog = ({
                 {!hideCloseButton && (
                     <ClickableIcon
                         accessibilityLabel = { t('dialog.close') }
-                        className = { classes.closeIcon }
                         icon = { IconCloseLarge }
                         id = 'modal-header-close-button'
                         onClick = { onClose } />

react/features/base/ui/components/web/DialogWithTabs.tsx

@@ -112,12 +112,6 @@ const useStyles = makeStyles()(theme => {
             }
         },
 
-        closeIcon: {
-            '&:focus': {
-                boxShadow: 'none'
-            }
-        },
-
         content: {
             flexGrow: 1,
             overflowY: 'auto',
@@ -259,7 +253,6 @@ const DialogWithTabs = ({
     const closeIcon = useMemo(() => (
         <ClickableIcon
             accessibilityLabel = { t('dialog.close') }
-            className = { classes.closeIcon }
             icon = { IconCloseLarge }
             id = 'modal-header-close-button'
             onClick = { onClose } />
@@ -299,7 +292,6 @@ const DialogWithTabs = ({
                             <span className = { classes.backContainer }>
                                 <ClickableIcon
                                     accessibilityLabel = { t('dialog.Back') }
-                                    className = { classes.closeIcon }
                                     icon = { IconArrowBack }
                                     id = 'modal-header-back-button'
                                     onClick = { back } />

react/features/base/ui/components/web/Tabs.tsx

@@ -44,7 +44,7 @@ const useStyles = makeStyles()(theme => {
                 borderColor: theme.palette.ui10
             },
 
-            '&:focus': {
+            '&.focus-visible': {
                 outline: 0,
                 boxShadow: `0px 0px 0px 2px ${theme.palette.focus01}`,
                 border: 0,

react/features/video-quality/components/Slider.web.tsx

@@ -94,7 +94,7 @@ const useStyles = makeStyles()(theme => {
                 top: 0,
                 width: '100%',
 
-                '&:focus': {
+                '&.focus-visible': {
                     // override global styles in order to use our own color
                     outline: 'none !important',