accessibility: add focus state styles to interactive elements

config/postcss/mixins.js

@@ -2,8 +2,7 @@ const { customMedia } = require('./media')
 
 const focus = {
   '&:focus': {
-    color: 'var(--color-orange)',
-    outline: 'none'
+    color: 'var(--color-orange)'
   }
 }
 

src/components/Blog/Feed/Item/styles.module.css

@@ -41,7 +41,6 @@
 
   &:hover,
   &:focus {
-    outline: none;
     opacity: 0.7;
   }
 }

src/components/Blog/Post/Markdown/styles.module.css

@@ -70,8 +70,8 @@
 
     &:hover,
     &:focus {
-      outline: none;
       opacity: 0.7;
+      color: var(--color-blue);
     }
   }
 

src/components/Blog/Post/Share/styles.module.css

@@ -12,7 +12,6 @@
   }
 
   &:focus {
-    outline: none;
     opacity: 0.7;
   }
 }

src/components/Community/styles.module.css

@@ -129,7 +129,9 @@
   color: #999;
   background-color: #ddd;
 
-  &:hover {
+  &:hover,
+  &:focus {
+    outline: none;
     opacity: 0.7;
   }
 }

src/components/Documentation/Layout/SidebarMenu/index.tsx

@@ -46,7 +46,8 @@ const SidebarMenuItem: React.FC<ISidebarMenuItemProps> = ({
         className={cn(
           styles.sectionLink,
           isActive && styles.active,
-          isRootParent && 'docSearch-lvl0'
+          isRootParent && 'docSearch-lvl0',
+          'link-with-focus'
         )}
         onClick={onClick}
       >

src/components/Documentation/RightPanel/index.tsx

@@ -101,7 +101,8 @@ const RightPanel: React.FC<IRightPanelProps> = ({
           <Link
             className={cn(
               styles.headingLink,
-              current === slug && styles.current
+              current === slug && styles.current,
+              'link-with-focus'
             )}
             key={`link-${slug}`}
             href={`#${slug}`}

src/components/Documentation/styles.module.css

@@ -17,7 +17,9 @@
   cursor: pointer;
   transition: 0.2s background-color ease-out;
 
-  &:hover {
+  &:hover,
+  &:focus {
+    outline: none;
     background-color: var(--color-light-blue);
   }
 }

src/components/DownloadButton/index.tsx

@@ -100,7 +100,11 @@ const DownloadButtonDropdownItems: React.FC<IDownloadButtonDropdownItemsProps> =
           <Link
             download={item.download}
             key={os}
-            className={cn(styles.dropdownItem, os === userOS && styles.active)}
+            className={cn(
+              styles.dropdownItem,
+              os === userOS && styles.active,
+              'link-with-focus'
+            )}
             href={item.url}
             onClick={(): void => onClick(os)}
           >
@@ -151,7 +155,10 @@ const DownloadButton: React.FC<IDownloadButtonProps> = ({ openTop }) => {
     <span className={styles.container} ref={containerRef}>
       <TwoRowsButton
         mode="purple"
-        className={cn(styles.button, isOpened && styles.opened)}
+        className={`${cn(
+          styles.button,
+          isOpened && styles.opened
+        )} btn-with-focus`}
         title="Download"
         active={isOpened}
         description={`(${currentOS.title})`}

src/components/Home/LandingHero/index.tsx

@@ -60,7 +60,10 @@ const LandingHero: React.FC<ILandingHeroProps> = ({ scrollToRef }) => {
           </ShowOnly>
           <TwoRowsButton
             mode="outline"
-            className={cn(styles.actionButton, styles.watchVideo)}
+            className={`${cn(
+              styles.actionButton,
+              styles.watchVideo
+            )} btn-with-focus btn-with-focus--white`}
             title="Watch video"
             description="How it works"
             icon={

src/components/Home/LearnMore/index.tsx

@@ -20,7 +20,7 @@ const LearnMore: React.FC<ILearnMoreProps> = ({ scrollToRef }) => {
   }, [scrollToRef?.current])
 
   return (
-    <button className={styles.button} onClick={onClick}>
+    <button className={`${styles.button} link-with-focus`} onClick={onClick}>
       <span className={styles.icon}>
         <img src="/img/learn-more.svg" alt="Learn More" />
       </span>

src/components/LayoutHeader/Nav/index.tsx

@@ -114,7 +114,7 @@ const Nav: React.FC = () => (
       </li>
     </ul>
     <PseudoButton
-      className={styles.getStartedButton}
+      className={`${styles.getStartedButton} btn-with-focus`}
       href="/doc/tutorials/get-started"
       onClick={(): void => logEvent('menu', 'get-started')}
     >

src/components/LayoutHeader/Nav/styles.module.css

@@ -54,7 +54,6 @@
   }
 
   &:focus {
-    outline: none;
     color: var(--color-orange);
     border-color: currentColor;
   }

src/components/MainLayout/index.tsx

@@ -4,6 +4,7 @@ import { IPageProps } from '../Page'
 import LayoutHeader from '../LayoutHeader'
 import HamburgerMenu from '../HamburgerMenu'
 import LayoutFooter from '../LayoutFooter'
+import { handleFirstTab } from '../../utils/front/accessibility'
 
 import styles from './styles.module.css'
 
@@ -29,9 +30,6 @@ const MainLayout: LayoutComponent = ({
   children,
   modifiers = []
 }) => {
-  useEffect(() => {
-    document.body.classList.add(styles.mainLayout)
-  }, [])
   useEffect(() => {
     if (className) {
       document.body.classList.add(className)
@@ -42,6 +40,15 @@ const MainLayout: LayoutComponent = ({
     }
   }, [className])
 
+  useEffect(() => {
+    document.body.classList.add(styles.mainLayout)
+    window.addEventListener('keydown', handleFirstTab)
+
+    return (): void => {
+      window.removeEventListener('keydown', handleFirstTab)
+    }
+  }, [])
+
   return (
     <>
       <LayoutHeader modifiers={modifiers} />

src/components/Page/base.css

@@ -38,14 +38,59 @@ body {
   color: var(--color-black);
 }
 
+/* Focus state styles for interactive elements */
+
+button:focus,
+input:focus,
+select:focus,
+textarea:focus,
+a:focus {
+  outline: 2px dotted var(--color-gray-hover);
+  outline-offset: 5px;
+}
+
+*::-moz-focus-inner {
+  border: 0;
+}
+
+body:not(.user-is-tabbing) button:focus,
+body:not(.user-is-tabbing) input:focus,
+body:not(.user-is-tabbing) select:focus,
+body:not(.user-is-tabbing) textarea:focus,
+body:not(.user-is-tabbing) a:focus {
+  outline: none;
+}
+
+body.user-is-tabbing .btn-with-focus {
+  &:focus {
+    color: #fff;
+    background-color: var(--color-orange);
+    border-color: var(--color-orange);
+    outline: none;
+  }
+
+  &--white:focus {
+    color: var(--color-black);
+    background: #fff;
+    border-color: #fff;
+  }
+}
+
+.link-with-focus {
+  border: 2px dotted transparent;
+}
+
+body.user-is-tabbing .link-with-focus {
+  &:focus {
+    outline: none;
+    border: 2px dotted;
+  }
+}
+
 /* Prevent mobile browsers from changing font-size */
 * {
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
-
-  &:focus {
-    outline: 0;
-  }
 }
 
 /* TODO: check it later */

src/components/Paginator/index.tsx

@@ -59,7 +59,7 @@ const Paginator: React.FC<IPaginatorProps> = ({
       {previousPage && (
         <>
           <Link
-            className={cn(styles.link, styles.linkPrevious)}
+            className={cn(styles.link, styles.linkPrevious, 'link-with-focus')}
             href={previousPage}
             state={{ fromPaginator: true }}
           >
@@ -74,7 +74,7 @@ const Paginator: React.FC<IPaginatorProps> = ({
       {nextPage && (
         <>
           <Link
-            className={cn(styles.link, styles.linkNext)}
+            className={cn(styles.link, styles.linkNext, 'link-with-focus')}
             href={nextPage}
             state={{ fromPaginator: true }}
           >

src/components/PromoSection/styles.module.css

@@ -77,6 +77,13 @@
   background-position-x: 147px;
   transition: 0.2s background-color ease-out;
 
+  &:focus {
+    background-color: var(--color-orange);
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.21);
+    color: #fff;
+    outline: none;
+  }
+
   & + & {
     margin-left: 14px;
 
@@ -96,6 +103,14 @@
     &:hover {
       background-color: #f5f5f5;
     }
+
+    &:focus {
+      background: var(--color-orange) url('/img/arrow_right_white.svg') right
+        center no-repeat;
+      background-position-x: 147px;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.21);
+      color: #fff;
+    }
   }
 
   @media (--xs-scr) {

src/components/PseudoButton/styles.module.css

@@ -11,10 +11,6 @@
   font-weight: 700;
   transition: 0.2s background-color ease-out;
 
-  &:focus {
-    outline: none;
-  }
-
   &.small {
     @mixin button-small;
 
@@ -37,12 +33,6 @@
     &:hover {
       background-color: #13a3bd;
     }
-
-    &:focus {
-      border-color: var(--color-orange);
-      background: var(--color-orange);
-      color: #fff;
-    }
   }
 
   &.secondary {
@@ -54,10 +44,5 @@
       border-color: var(--color-gray);
       color: var(--color-gray-hover);
     }
-
-    &:focus {
-      border-color: var(--color-orange);
-      color: var(--color-orange);
-    }
   }
 }

src/components/SubscribeSection/Form/index.tsx

@@ -49,7 +49,7 @@ const Form: React.FC = () => {
       </div>
 
       <button
-        className={styles.button}
+        className={`${styles.button} btn-with-focus`}
         type="submit"
         name="subscribe"
         id="mc-embedded-subscribe"

src/components/SubscribeSection/Form/styles.module.css

@@ -21,7 +21,6 @@
   font-weight: 500;
 
   &:focus {
-    outline: none;
     background: var(--color-light-blue);
   }
 
@@ -41,11 +40,6 @@
   color: #13adc7;
   cursor: pointer;
 
-  &:focus {
-    outline: none;
-    background-color: #daf1f5;
-  }
-
   &:hover {
     background-color: #daf1f5;
   }

src/components/Support/styles.module.css

@@ -62,7 +62,8 @@
       border-color: var(--color-purple);
       color: var(--color-purple);
 
-      &:hover {
+      &:hover,
+      &:focus {
         background-color: var(--color-purple);
       }
     }
@@ -94,7 +95,8 @@
       border-color: var(--color-azure);
       color: var(--color-azure);
 
-      &:hover {
+      &:hover,
+      &:focus {
         background-color: var(--color-azure);
       }
     }
@@ -118,7 +120,8 @@
       border-color: var(--color-orange-bright);
       color: var(--color-orange-bright);
 
-      &:hover {
+      &:hover,
+      &:focus {
         background-color: var(--color-orange-bright);
       }
     }
@@ -190,8 +193,10 @@
   transition: 0.2s background-color ease-out;
   cursor: pointer;
 
-  &.featureButton:hover {
+  &.featureButton:hover,
+  &.featureButton:focus {
     color: #fff;
+    outline: none;
   }
 }