Add focus-zone css class & Breadcrumb accessibility improvements

scm-ui/ui-components/src/Breadcrumb.tsx

@@ -22,10 +22,9 @@ import styled from "styled-components";
 import { urls } from "@scm-manager/ui-api";
 import { Branch, File, Repository } from "@scm-manager/ui-types";
 import { binder, ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
-import Icon from "./Icon";
-import Tooltip from "./Tooltip";
 import copyToClipboard from "./CopyToClipboard";
 import { devices } from "./devices";
+import { Icon, Tooltip } from "@scm-manager/ui-core";
 
 type Props = {
   repository: Repository;
@@ -110,7 +109,7 @@ const BreadcrumbNode: FC<{ clickable: boolean; text: string; url: string; curren
   clickable,
   text,
   url,
-  current
+  current,
 }) => {
   if (clickable) {
     return (
@@ -137,7 +136,7 @@ const Breadcrumb: FC<Props> = ({
   sources,
   permalink,
   preButtons,
-  clickable = true
+  clickable = true,
 }) => {
   const location = useLocation();
   const history = useHistory();
@@ -212,24 +211,44 @@ const Breadcrumb: FC<Props> = ({
         aria-label="breadcrumbs"
       >
         {prefixButtons}
-        <ul>
+        <ul aria-label={t("breadcrumb.currentPath")}>
           <li>
             {clickable ? (
               <Link to={homeUrl} aria-label={t("breadcrumb.home")}>
-                <HomeIcon title={t("breadcrumb.home")} name="home" color="inherit" />
+                <HomeIcon type="has-text-inherit fas">home</HomeIcon>
               </Link>
             ) : (
-              <Icon name="home" color="inherit" className="mr-3" />
+              <Icon className="mr-3">home</Icon>
             )}
           </li>
           {pathSection()}
         </ul>
-        <PermaLinkWrapper tabIndex={0} onKeyDown={e => e.key === "Enter" && copySource()}>
+        <PermaLinkWrapper className="icon">
           {copying ? (
-            <Icon name="spinner fa-spin" alt={t("breadcrumb.loading")} />
+            <Icon
+              className="icon focus-zone has-cursor-pointer"
+              type="has-text-inherit fas"
+              tabIndex={0}
+              aria-hidden="false"
+              aria-label={t("breadcrumb.loading")}
+              alt={t("breadcrumb.loading")}
+            >
+              spinner fa-spin
+            </Icon>
           ) : (
             <Tooltip message={t("breadcrumb.copyPermalink")}>
-              <Icon name="link" color="inherit" onClick={() => copySource()} alt={t("breadcrumb.copyPermalink")} />
+              <Icon
+                className="focus-zone has-cursor-pointer"
+                type="has-text-inherit fas"
+                tabIndex={0}
+                aria-hidden="false"
+                aria-label={t("breadcrumb.copyPermalink")}
+                alt={t("breadcrumb.copyPermalink")}
+                onClick={() => copySource()}
+                onKeyDown={(e) => e.key === "Enter" && copySource()}
+              >
+                link
+              </Icon>
             </Tooltip>
           )}
         </PermaLinkWrapper>
@@ -243,7 +262,7 @@ const Breadcrumb: FC<Props> = ({
     branch: branch ? branch : defaultBranch,
     path,
     sources,
-    repository
+    repository,
   };
 
   const renderExtensionPoints = () => {

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -70,19 +70,23 @@ exports[`Storyshots BreadCrumb Default 1`] = `
       aria-label="breadcrumbs"
       className="Breadcrumb__BreadcrumbNav-sc-zvtb4t-1 dInwRH breadcrumb sources-breadcrumb mx-2 my-4 is-flex is-align-items-center is-full-width"
     >
-      <ul>
+      <ul
+        aria-label="breadcrumb.currentPath"
+      >
         <li>
           <a
             aria-label="breadcrumb.home"
             href="/scm-manager.org/scm/repo/hitchhiker/heartOfGold/sources/1/"
             onClick={[Function]}
           >
-            <i
-              aria-label="breadcrumb.home"
-              className="fas fa-fw fa-home has-text-inherit Breadcrumb__HomeIcon-sc-zvtb4t-2 jOnsqH"
-              onKeyPress={[Function]}
-              title="breadcrumb.home"
-            />
+            <span
+              aria-hidden="true"
+              className="Breadcrumb__HomeIcon-sc-zvtb4t-2 jOnsqH icon"
+            >
+              <i
+                className="has-text-inherit fas fa-fw fa-home"
+              />
+            </span>
           </a>
         </li>
         <li>
@@ -140,23 +144,27 @@ exports[`Storyshots BreadCrumb Default 1`] = `
         </li>
       </ul>
       <span
-        className="Breadcrumb__PermaLinkWrapper-sc-zvtb4t-0 dwItUI"
-        onKeyDown={[Function]}
-        tabIndex={0}
+        className="Breadcrumb__PermaLinkWrapper-sc-zvtb4t-0 dwItUI icon"
       >
-        <div
-          className="Tooltip__TooltipWrapper-sc-fmp853-0 fJWuAF"
+        <span
+          alt="breadcrumb.copyPermalink"
+          aria-hidden="false"
+          aria-label="breadcrumb.copyPermalink"
+          className="focus-zone has-cursor-pointer icon"
+          data-state="closed"
+          onBlur={[Function]}
           onClick={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onPointerDown={[Function]}
+          onPointerLeave={[Function]}
+          onPointerMove={[Function]}
+          tabIndex={0}
         >
           <i
-            aria-label="breadcrumb.copyPermalink"
-            className="fas fa-fw fa-link has-text-inherit"
-            onClick={[Function]}
-            onKeyPress={[Function]}
+            className="has-text-inherit fas fa-fw fa-link"
           />
-        </div>
+        </span>
       </span>
     </nav>
     <div
@@ -180,19 +188,23 @@ exports[`Storyshots BreadCrumb Long path 1`] = `
       aria-label="breadcrumbs"
       className="Breadcrumb__BreadcrumbNav-sc-zvtb4t-1 dInwRH breadcrumb sources-breadcrumb mx-2 my-4 is-flex is-align-items-center is-full-width"
     >
-      <ul>
+      <ul
+        aria-label="breadcrumb.currentPath"
+      >
         <li>
           <a
             aria-label="breadcrumb.home"
             href="/scm-manager.org/scm/repo/hitchhiker/heartOfGold/sources/1/"
             onClick={[Function]}
           >
-            <i
-              aria-label="breadcrumb.home"
-              className="fas fa-fw fa-home has-text-inherit Breadcrumb__HomeIcon-sc-zvtb4t-2 jOnsqH"
-              onKeyPress={[Function]}
-              title="breadcrumb.home"
-            />
+            <span
+              aria-hidden="true"
+              className="Breadcrumb__HomeIcon-sc-zvtb4t-2 jOnsqH icon"
+            >
+              <i
+                className="has-text-inherit fas fa-fw fa-home"
+              />
+            </span>
           </a>
         </li>
         <li>
@@ -300,23 +312,27 @@ exports[`Storyshots BreadCrumb Long path 1`] = `
         </li>
       </ul>
       <span
-        className="Breadcrumb__PermaLinkWrapper-sc-zvtb4t-0 dwItUI"
-        onKeyDown={[Function]}
-        tabIndex={0}
+        className="Breadcrumb__PermaLinkWrapper-sc-zvtb4t-0 dwItUI icon"
       >
-        <div
-          className="Tooltip__TooltipWrapper-sc-fmp853-0 fJWuAF"
+        <span
+          alt="breadcrumb.copyPermalink"
+          aria-hidden="false"
+          aria-label="breadcrumb.copyPermalink"
+          className="focus-zone has-cursor-pointer icon"
+          data-state="closed"
+          onBlur={[Function]}
           onClick={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onPointerDown={[Function]}
+          onPointerLeave={[Function]}
+          onPointerMove={[Function]}
+          tabIndex={0}
         >
           <i
-            aria-label="breadcrumb.copyPermalink"
-            className="fas fa-fw fa-link has-text-inherit"
-            onClick={[Function]}
-            onKeyPress={[Function]}
+            className="has-text-inherit fas fa-fw fa-link"
           />
-        </div>
+        </span>
       </span>
     </nav>
     <div
@@ -340,12 +356,18 @@ exports[`Storyshots BreadCrumb Not clickable 1`] = `
       aria-label="breadcrumbs"
       className="Breadcrumb__BreadcrumbNav-sc-zvtb4t-1 dInwRH breadcrumb sources-breadcrumb mx-2 my-4 is-flex is-align-items-center is-full-width"
     >
-      <ul>
+      <ul
+        aria-label="breadcrumb.currentPath"
+      >
         <li>
-          <i
-            className="fas fa-fw fa-home has-text-inherit mr-3"
-            onKeyPress={[Function]}
-          />
+          <span
+            aria-hidden="true"
+            className="mr-3 icon"
+          >
+            <i
+              className="fas fa-fw fa-home"
+            />
+          </span>
         </li>
         <li>
           <span
@@ -391,23 +413,27 @@ exports[`Storyshots BreadCrumb Not clickable 1`] = `
         </li>
       </ul>
       <span
-        className="Breadcrumb__PermaLinkWrapper-sc-zvtb4t-0 dwItUI"
-        onKeyDown={[Function]}
-        tabIndex={0}
+        className="Breadcrumb__PermaLinkWrapper-sc-zvtb4t-0 dwItUI icon"
       >
-        <div
-          className="Tooltip__TooltipWrapper-sc-fmp853-0 fJWuAF"
+        <span
+          alt="breadcrumb.copyPermalink"
+          aria-hidden="false"
+          aria-label="breadcrumb.copyPermalink"
+          className="focus-zone has-cursor-pointer icon"
+          data-state="closed"
+          onBlur={[Function]}
           onClick={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onPointerDown={[Function]}
+          onPointerLeave={[Function]}
+          onPointerMove={[Function]}
+          tabIndex={0}
         >
           <i
-            aria-label="breadcrumb.copyPermalink"
-            className="fas fa-fw fa-link has-text-inherit"
-            onClick={[Function]}
-            onKeyPress={[Function]}
+            className="has-text-inherit fas fa-fw fa-link"
           />
-        </div>
+        </span>
       </span>
     </nav>
     <div
@@ -444,19 +470,23 @@ exports[`Storyshots BreadCrumb With prefix button 1`] = `
           />
         </a>
       </div>
-      <ul>
+      <ul
+        aria-label="breadcrumb.currentPath"
+      >
         <li>
           <a
             aria-label="breadcrumb.home"
             href="/scm-manager.org/scm/repo/hitchhiker/heartOfGold/sources/1/"
             onClick={[Function]}
           >
-            <i
-              aria-label="breadcrumb.home"
-              className="fas fa-fw fa-home has-text-inherit Breadcrumb__HomeIcon-sc-zvtb4t-2 jOnsqH"
-              onKeyPress={[Function]}
-              title="breadcrumb.home"
-            />
+            <span
+              aria-hidden="true"
+              className="Breadcrumb__HomeIcon-sc-zvtb4t-2 jOnsqH icon"
+            >
+              <i
+                className="has-text-inherit fas fa-fw fa-home"
+              />
+            </span>
           </a>
         </li>
         <li>
@@ -514,23 +544,27 @@ exports[`Storyshots BreadCrumb With prefix button 1`] = `
         </li>
       </ul>
       <span
-        className="Breadcrumb__PermaLinkWrapper-sc-zvtb4t-0 dwItUI"
-        onKeyDown={[Function]}
-        tabIndex={0}
+        className="Breadcrumb__PermaLinkWrapper-sc-zvtb4t-0 dwItUI icon"
       >
-        <div
-          className="Tooltip__TooltipWrapper-sc-fmp853-0 fJWuAF"
+        <span
+          alt="breadcrumb.copyPermalink"
+          aria-hidden="false"
+          aria-label="breadcrumb.copyPermalink"
+          className="focus-zone has-cursor-pointer icon"
+          data-state="closed"
+          onBlur={[Function]}
           onClick={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onPointerDown={[Function]}
+          onPointerLeave={[Function]}
+          onPointerMove={[Function]}
+          tabIndex={0}
         >
           <i
-            aria-label="breadcrumb.copyPermalink"
-            className="fas fa-fw fa-link has-text-inherit"
-            onClick={[Function]}
-            onKeyPress={[Function]}
+            className="has-text-inherit fas fa-fw fa-link"
           />
-        </div>
+        </span>
       </span>
     </nav>
     <div

scm-ui/ui-styles/src/components/_main.scss

@@ -365,6 +365,7 @@ a {
   }
 }
 
+// Buttons
 button,
 .button {
   &:focus-visible,
@@ -377,6 +378,22 @@ button,
   }
 }
 
+/* Focus zones for general element focus highlighting.
+   We explicitly want elements tagged with 'focus-zone' to have the below behavior overriding
+   Bulma constraints upon focussing an element, which is why !important is used here.
+   Please use this CSS class with consideration.
+ */
+.focus-zone {
+  &:focus-visible,
+  &.is-focused {
+    outline: $focus-outline-color $focus-outline-style !important;
+    outline-offset: $focus-outline-offset !important;
+    &:not(:active) {
+      box-shadow: none !important;
+    }
+  }
+}
+
 // detail/summary
 summary {
   &:focus-visible,

scm-ui/ui-webapp/public/locales/de/commons.json

@@ -82,6 +82,7 @@
   "breadcrumb": {
     "home": "Hauptseite",
     "copyPermalink": "Link in Zwischenablage kopieren",
+    "currentPath": "Aktueller Pfad",
     "loading": "Lade ..."
   },
   "errorNotification": {

scm-ui/ui-webapp/public/locales/en/commons.json

@@ -83,6 +83,7 @@
   "breadcrumb": {
     "home": "Main page",
     "copyPermalink": "Copy Permalink to Clipboard",
+    "currentPath": "Current path",
     "loading": "Loading ..."
   },
   "errorNotification": {