Improve elements focus highlighting

INRIA · Jun 20, 2019 · dc8103d · dc8103d
1 parent b6b899b
commit dc8103d
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 22 deletions.
diff --git a/src/components/buttons/mute/index.tsx b/src/components/buttons/mute/index.tsx
@@ -7,10 +7,15 @@ import styled from '../../../utils/styled-components';
 import AssistiveText from '../../a11y/AssistiveText';
 import GhostButton from '../../shared/GhostButton';
 import ControlIcon from './ControlIcon';
+import { sliderShownMixin } from '../../volume-slider/Styles';
 
 const StyledMuteButton = styled(GhostButton)`
-  &:hover ~ .aip-volume {
-    width: 4em;
+  &:hover,
+  &:focus:not([data-focus-visible-added]),
+  &[data-focus-visible-added] {
+    ~ .aip-volume {
+      ${sliderShownMixin};
+    }
   }
 `;
 

diff --git a/src/components/shared/Button.ts b/src/components/shared/Button.ts
@@ -13,7 +13,7 @@ export const buttonMixin = css`
   height: 100%;
   padding: 0.4em 0.8em;
 
-  border: 2px solid transparent;
+  border: 0 none;
   border-radius: 2px;
   background-color: ${(props) => props.theme.actionBg};
 
@@ -52,15 +52,11 @@ export const buttonMixin = css`
       ${focusMixin};
     }
 
+    &:focus:not([data-focus-visible-added]),
     &[data-focus-visible-added] {
-      border-color: ${(props) => props.theme.actionBg};
+      outline: solid 2px ${(props) => props.theme.actionBg};
     }
   }
-
-  &:focus:not([data-focus-visible-added]),
-  &[data-focus-visible-added] {
-    outline: none;
-  }
 `;
 
 export default styled.button`

diff --git a/src/components/shared/GhostButton.ts b/src/components/shared/GhostButton.ts
@@ -6,7 +6,7 @@ export default styled.button`
   height: 100%;
   padding: 0;
 
-  border: 2px solid transparent;
+  border: 0 none;
   border-radius: 0;
   background-color: transparent;
   font-family: inherit;
@@ -24,10 +24,6 @@ export default styled.button`
 
   &:focus:not([data-focus-visible-added]),
   &[data-focus-visible-added] {
-    outline: none;
-  }
-
-  &[data-focus-visible-added] {
-    border-color: ${(props) => props.theme.focus};
+    outline: solid 2px ${(props) => props.theme.focus};
   }
 `;
diff --git a/src/components/shared/toggle-button/Styles.ts b/src/components/shared/toggle-button/Styles.ts
@@ -8,7 +8,7 @@ const StyledToggleButton = styled(GhostButton)`
 
   display: flex;
 
-  border: 2px solid ${(props) => props.theme.bg};
+  border: 0 none;
   border-radius: 4px;
   background-color: ${(props) => props.theme.fg};
   font-size: 0.75em;

diff --git a/src/components/volume-slider/Styles.ts b/src/components/volume-slider/Styles.ts
@@ -1,21 +1,37 @@
 import { hexToHsla } from '../../utils/colors';
-import styled from '../../utils/styled-components';
+import styled, { css } from '../../utils/styled-components';
+
+export const sliderShownMixin = css`
+  width: 4em;
+`;
 
 export default styled.div`
   display: inline-block;
 
   width: 0em;
   height: 100%;
 
-  cursor: pointer;
+  outline: none;
+  border-width: 0;
+
   transition: width 0.2s ease-in;
 
+  &:not([aria-disabled='true']):not([disabled]):not([aria-hidden='true']) {
+    cursor: pointer;
+  }
+
   &.active,
+  &:hover,
+  &.focus-visible,
+  &:focus:not([data-focus-visible-added]),
+  &[data-focus-visible-added] {
+    ${sliderShownMixin};
+  }
+
   &.focus-visible,
-  &:focus,
-  &:hover {
-    width: 4em;
-    transition: width 0.2s cubic-bezier(0, 0, 0.2, 1);
+  &:focus:not([data-focus-visible-added]),
+  &[data-focus-visible-added] {
+    outline: solid 2px ${(props) => props.theme.actionBg};
   }
 
   .aip-volume-slider {