feat: improve keyboard focus styles (#3011)

* feat: Card: add keyboard focus outline * feat: Button: add keyboard focus styles * feat: links: add keyboard focus styles * feat: CopyToClipboard: fix textarea tabbing issue, add keyboard focus style * chore: fix text getting darker on keyboard focus * feat: Pill: add keyboard focus styles * feat: Paginator: fix disabled state, add keyboard focus styles * feat: Nav: add keyboard focus styles * feat: Table: add keyboard focus styles * chore: add jsDocs to (s)css loaders * fix: update dependency which fixes css bug * chore: remove unnecessary Card style * fix: use Button instead of button for DeleteDocument * chore: override browser default outline * chore: remove unnecessary outline rule * fix: list drawer outline --------- Co-authored-by: Alessio Gravili <alessio@gravili.de>
2023-07-24 11:04:12 -04:00
parent 074abf4b7d
commit 080e6195ef
29 changed files with 488 additions and 286 deletions
--- a/src/admin/components/elements/Button/index.scss
+++ b/src/admin/components/elements/Button/index.scss
@@ -66,7 +66,7 @@ a.btn {
    }

    &:not(.btn--disabled) {
-      &:hover {
+      &:hover, &:focus-visible {
        background: var(--theme-elevation-750);
      }

@@ -75,7 +75,7 @@ a.btn {
      }
    }

-    &:focus {
+    &:focus:not(:focus-visible) {
      box-shadow: $focus-box-shadow;
      outline: none;
    }
@@ -91,7 +91,7 @@ a.btn {
    background: none;
    backdrop-filter: blur(5px);

-    &:hover {
+    &:hover, &:focus-visible {
      background: var(--theme-elevation-100);
      box-shadow: $hover-box-shadow;
    }
@@ -106,7 +106,7 @@ a.btn {
      box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-400);
    }

-    &:focus {
+    &:focus:not(:focus-visible) {
      outline: none;
      box-shadow: $hover-box-shadow, $focus-box-shadow;
    }
@@ -179,14 +179,14 @@ a.btn {
    cursor: default;
  }

-  &:hover {
+  &:hover, &:focus-visible {
    .btn__icon {
      @include color-svg(var(--theme-elevation-0));
      background: var(--theme-elevation-800);
    }
  }

-  &:focus {
+  &:focus:not(:focus-visible) {
    .btn__icon {
      @include color-svg(var(--theme-elevation-800));
      background: var(--theme-elevation-150);
@@ -201,4 +201,9 @@ a.btn {
      background: var(--theme-elevation-700);
    }
  }
+
+  &:focus-visible {
+    outline: var(--accessibility-outline);
+    outline-offset: var(--accessibility-outline-offset);
+  }
 }
--- a/src/admin/components/elements/CopyToClipboard/index.scss
+++ b/src/admin/components/elements/CopyToClipboard/index.scss
@@ -5,6 +5,7 @@
  position: relative;
  cursor: pointer;
  vertical-align: middle;
+  border-radius: 100%;

  textarea {
    position: absolute;
@@ -18,4 +19,8 @@
  &:active {
    outline: none;
  }
+
+  &:focus-visible {
+    outline: var(--accessibility-outline);
+  }
 }
--- a/src/admin/components/elements/CopyToClipboard/index.tsx
+++ b/src/admin/components/elements/CopyToClipboard/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Copy from '../../icons/Copy';
 import Tooltip from '../Tooltip';
@@ -50,6 +50,7 @@ const CopyToClipboard: React.FC<Props> = ({
        </Tooltip>
        <textarea
          readOnly
+          tabIndex={-1}
          value={value}
          ref={ref}
        />
--- a/src/admin/components/elements/DeleteDocument/index.tsx
+++ b/src/admin/components/elements/DeleteDocument/index.tsx
@@ -79,18 +79,17 @@ const DeleteDocument: React.FC<Props> = (props) => {
  if (id) {
    return (
      <React.Fragment>
-        <button
-          type="button"
+        <Button
+          buttonStyle="none"
          id={buttonId}
          className={`${baseClass}__toggle`}
-          onClick={(e) => {
-            e.preventDefault();
+          onClick={() => {
            setDeleting(false);
            toggleModal(modalSlug);
          }}
        >
          {t('delete')}
-        </button>
+        </Button>
        <Modal
          slug={modalSlug}
          className={baseClass}
--- a/src/admin/components/elements/FileDetails/Meta/index.scss
+++ b/src/admin/components/elements/FileDetails/Meta/index.scss
@@ -8,7 +8,7 @@
      font-weight: 600;
      text-decoration: none;

-      &:hover {
+      &:hover, &:focus-visible {
        text-decoration: underline;
      }
    }
--- a/src/admin/components/elements/FileDetails/index.scss
+++ b/src/admin/components/elements/FileDetails/index.scss
@@ -27,7 +27,7 @@
    font-weight: 600;
    text-decoration: none;

-    &:hover {
+    &:hover, &:focus-visible {
      text-decoration: underline;
    }
  }
--- a/src/admin/components/elements/ListDrawer/index.scss
+++ b/src/admin/components/elements/ListDrawer/index.scss
@@ -39,8 +39,8 @@
    cursor: pointer;
    color: inherit;

-    &:focus,
-    &:focus-within {
+    &:focus:not(:focus-visible),
+    &:focus-within:not(:focus-visible) {
      outline: none;
    }

--- a/src/admin/components/elements/Localizer/index.scss
+++ b/src/admin/components/elements/Localizer/index.scss
@@ -13,7 +13,7 @@
    font-weight: 600;
    cursor: pointer;

-    &:hover {
+    &:hover, &:focus-visible {
      text-decoration: underline;
    }

@@ -38,7 +38,7 @@
      cursor: pointer;
      padding-right: 0;

-      &:hover {
+      &:hover, &:focus-visible {
        text-decoration: underline;
      }
    }
--- a/src/admin/components/elements/Nav/index.scss
+++ b/src/admin/components/elements/Nav/index.scss
@@ -71,6 +71,10 @@
    >* {
      margin-top: base(1);
    }
+
+    a:focus-visible {
+      outline: var(--accessibility-outline);
+    }
  }

  &__log-out {
@@ -88,12 +92,12 @@
      display: flex;
      text-decoration: none;

-      &:focus {
+      &:focus:not(:focus-visible) {
        box-shadow: none;
        font-weight: 600;
      }

-      &:hover {
+      &:hover, &:focus-visible {
        text-decoration: underline;
      }

--- a/src/admin/components/elements/NavGroup/index.scss
+++ b/src/admin/components/elements/NavGroup/index.scss
@@ -22,13 +22,17 @@
      margin-top: base(-.2);
    }

-    &:hover {
+    &:hover, &:focus-visible {
      color: var(--theme-elevation-1000);

      .stroke {
        stroke: var(--theme-elevation-1000);
      }
    }
+
+    &:focus-visible {
+      outline: none;
+    }
  }

  &__indicator {
--- a/src/admin/components/elements/Paginator/ClickableArrow/index.tsx
+++ b/src/admin/components/elements/Paginator/ClickableArrow/index.tsx
@@ -23,6 +23,7 @@ const ClickableArrow: React.FC<Props> = (props) => {
  return (
    <button
      className={classes}
+      disabled={isDisabled}
      onClick={!isDisabled ? updatePage : undefined}
      type="button"
    >
--- a/src/admin/components/elements/Paginator/index.scss
+++ b/src/admin/components/elements/Paginator/index.scss
@@ -35,8 +35,14 @@
    color: var(--theme-elevation-800);
    line-height: base(1);

-    &:hover:not(.clickable-arrow--is-disabled) {
-      background: var(--theme-elevation-100);
+    &:not(.clickable-arrow--is-disabled) {
+      &:hover, &:focus-visible {
+        background: var(--theme-elevation-100);
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--accessibility-outline);
    }
  }

--- a/src/admin/components/elements/PerPage/index.scss
+++ b/src/admin/components/elements/PerPage/index.scss
@@ -19,7 +19,7 @@
    text-align: left;
    width: 100%;

-    &:hover {
+    &:hover, &:focus-visible {
      text-decoration: underline;
    }
  }
--- a/src/admin/components/elements/Pill/index.scss
+++ b/src/admin/components/elements/Pill/index.scss
@@ -23,10 +23,15 @@
  }

  &:active,
-  &:focus {
+  &:focus:not(:focus-visible) {
    outline: none;
  }

+  &:focus-visible {
+    outline: var(--accessibility-outline);
+    outline-offset: var(--accessibility-outline-offset);
+  }
+
  &--has-action {
    cursor: pointer;
    text-decoration: none;
--- a/src/admin/components/elements/StepNav/index.scss
+++ b/src/admin/components/elements/StepNav/index.scss
@@ -25,7 +25,7 @@
      cursor: pointer;
    }

-    &:hover {
+    &:hover, &:focus-visible {
      text-decoration: underline;
    }
  }
--- a/src/admin/components/elements/Table/index.scss
+++ b/src/admin/components/elements/Table/index.scss
@@ -28,6 +28,11 @@
    }
  }

+  a:focus-visible {
+    outline: var(--accessibility-outline);
+    outline-offset: var(--accessibility-outline-offset);
+  }
+
  @include mid-break {

    th,
--- a/src/admin/components/elements/VersionsCount/index.scss
+++ b/src/admin/components/elements/VersionsCount/index.scss
@@ -3,7 +3,7 @@
 .versions-count__button {
  font-weight: 600;

-  &:hover {
+  &:hover, &:focus-visible {
    text-decoration: underline;
  }
 }
--- a/src/admin/components/forms/field-types/Array/index.scss
+++ b/src/admin/components/forms/field-types/Array/index.scss
@@ -45,7 +45,7 @@
    cursor: pointer;
    margin-left: base(.5);

-    &:hover {
+    &:hover, &:focus-visible {
      text-decoration: underline;
    }
  }
--- a/src/admin/components/forms/field-types/Blocks/index.scss
+++ b/src/admin/components/forms/field-types/Blocks/index.scss
@@ -51,7 +51,7 @@
    cursor: pointer;
    margin-left: base(.5);

-    &:hover {
+    &:hover, &:focus-visible {
      text-decoration: underline;
    }
  }
--- a/src/admin/components/forms/field-types/RichText/elements/link/Element/index.scss
+++ b/src/admin/components/forms/field-types/RichText/elements/link/Element/index.scss
@@ -37,7 +37,7 @@
      cursor: pointer;
      margin: 0 0 0 base(.25);

-      &:hover {
+      &:hover, &:focus-visible {
        text-decoration: underline;
      }
    }
--- a/src/admin/components/views/Account/index.scss
+++ b/src/admin/components/views/Account/index.scss
@@ -138,7 +138,7 @@
      font-weight: 600;
      text-decoration: none;

-      &:hover {
+      &:hover, &:focus-visible {
        text-decoration: underline;
      }
    }
--- a/src/admin/components/views/Global/index.scss
+++ b/src/admin/components/views/Global/index.scss
@@ -157,7 +157,7 @@
      font-weight: bold;
      text-decoration: none;

-      &:hover {
+      &:hover, &:focus-visible {
        text-decoration: underline;
      }
    }
--- a/src/admin/components/views/collections/Edit/index.scss
+++ b/src/admin/components/views/collections/Edit/index.scss
@@ -166,7 +166,7 @@
      font-weight: 600;
      text-decoration: none;

-      &:hover {
+      &:hover, &:focus-visible {
        text-decoration: underline;
      }
    }
--- a/src/admin/components/views/collections/List/SelectAll/index.scss
+++ b/src/admin/components/views/collections/List/SelectAll/index.scss
@@ -7,7 +7,7 @@
    align-items: center;
    cursor: pointer;

-    &:focus,
+    &:focus:not(:focus-visible),
    &:active {
      outline: none;
    }
@@ -17,6 +17,10 @@
        opacity: .2;
      }
    }
+
+    &:focus-visible {
+      outline-offset: var(--accessibility-outline-offset);
+    }
  }

  &__input {
--- a/src/admin/components/views/collections/List/SelectRow/index.scss
+++ b/src/admin/components/views/collections/List/SelectRow/index.scss
@@ -7,7 +7,7 @@
    align-items: center;
    cursor: pointer;

-    &:focus,
+    &:focus:not(:focus-visible),
    &:active {
      outline: none;
    }
@@ -17,6 +17,11 @@
        opacity: .2;
      }
    }
+
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
+    }
  }

  &__input {
--- a/src/admin/scss/app.scss
+++ b/src/admin/scss/app.scss
@@ -29,6 +29,9 @@
  --z-modal: 30;
  --z-status: 40;

+  --accessibility-outline: 2px solid var(--theme-text);
+  --accessibility-outline-offset: 2px;
+
  --gutter-h: #{base(5)};

  @include large-break {
@@ -142,11 +145,17 @@ ol {
  margin: 0 0 $baseline;
 }

+:focus-visible {
+  outline: var(--accessibility-outline);
+}
+
 a {
  color: currentColor;

  &:focus {
-    opacity: .8;
+    &:not(:focus-visible) {
+      opacity: .8;
+    }
    outline: none;
  }