fix(link): fix accessibility by inlining link functionality into Shad…

…ow DOM (#2571) Closes #2514, #2604, #2376, #2496 ------ BREAKING CHANGE: Due to screen reader limitations, we had to move the `link` role inside the Shadow DOM. Therefore, for the following components, replace the `[aria-label]` attribute with `[accessibility-label]` attribute or `accessibilityLabel` property: - `sbb-breadcrumb` - `sbb-button-link`, `sbb-secondary-button-link`, `sbb-tertiary-button-link`, `sbb-transparent-button-link` - `sbb-card-link` - `sbb-header-link` - `sbb-link`, `sbb-block-link` - `sbb-menu-link` - `sbb-navigation-link` - `sbb-teaser`, `sbb-teaser-hero`, `sbb-teaser-paid`
sbb-design-systems · May 13, 2024 · 52344e9 · 52344e9
1 parent da9c3bf
commit 52344e9
Show file tree

Hide file tree

Showing 89 changed files with 694 additions and 857 deletions.
diff --git a/src/components/action-group/__snapshots__/action-group.spec.snap.js b/src/components/action-group/__snapshots__/action-group.spec.snap.js
@@ -30,9 +30,7 @@ snapshots["sbb-action-group renders renders - Dom"] =
     href="https://github.com/lyne-design-system/lyne-components"
     icon-name="chevron-small-left-small"
     icon-placement="start"
-    role="link"
     size="m"
-    tabindex="0"
   >
     Link
   </sbb-block-link>
@@ -60,13 +58,7 @@ snapshots["sbb-action-group renders A11y tree Chrome"] =
     },
     {
       "role": "link",
-      "name": "Link",
-      "children": [
-        {
-          "role": "link",
-          "name": "Link"
-        }
-      ]
+      "name": "Link"
     }
   ]
 }
@@ -87,13 +79,7 @@ snapshots["sbb-action-group renders A11y tree Firefox"] =
     {
       "role": "link",
       "name": "Link",
-      "children": [
-        {
-          "role": "link",
-          "name": "Link",
-          "value": "https://github.com/lyne-design-system/lyne-components"
-        }
-      ]
+      "value": "https://github.com/lyne-design-system/lyne-components"
     }
   ]
 }

diff --git a/src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js b/src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js
@@ -55,13 +55,7 @@ snapshots["sbb-alert-group should render A11y tree Chrome"] =
     },
     {
       "role": "link",
-      "name": "Find out more",
-      "children": [
-        {
-          "role": "link",
-          "name": "Find out more"
-        }
-      ]
+      "name": "Find out more"
     },
     {
       "role": "button",
@@ -96,13 +90,7 @@ snapshots["sbb-alert-group should render A11y tree Firefox"] =
     {
       "role": "link",
       "name": "Find out more",
-      "children": [
-        {
-          "role": "link",
-          "name": "Find out more",
-          "value": "https://www.sbb.ch/"
-        }
-      ]
+      "value": "https://www.sbb.ch/"
     },
     {
       "role": "button",

diff --git a/src/components/alert/alert/__snapshots__/alert.spec.snap.js b/src/components/alert/alert/__snapshots__/alert.spec.snap.js
@@ -97,7 +97,7 @@ snapshots["sbb-alert should render customized properties"] =
           </slot>
         </p>
         <sbb-link
-          aria-label="label"
+          accessibility-label="label"
           data-action=""
           data-link=""
           data-sbb-link=""
@@ -106,9 +106,7 @@ snapshots["sbb-alert should render customized properties"] =
           href="https://www.sbb.ch"
           negative=""
           rel="noopener"
-          role="link"
           size="s"
-          tabindex="0"
           target="_blank"
         >
           Show much more
@@ -161,13 +159,7 @@ snapshots["sbb-alert A11y tree Chrome"] =
     },
     {
       "role": "link",
-      "name": "test-a11y-label",
-      "children": [
-        {
-          "role": "link",
-          "name": "Find out more"
-        }
-      ]
+      "name": "test-a11y-label"
     },
     {
       "role": "button",
@@ -197,13 +189,7 @@ snapshots["sbb-alert A11y tree Firefox"] =
     {
       "role": "link",
       "name": "test-a11y-label",
-      "children": [
-        {
-          "role": "link",
-          "name": "Find out more",
-          "value": "https://www.sbb.ch/"
-        }
-      ]
+      "value": "https://www.sbb.ch/"
     },
     {
       "role": "button",

diff --git a/src/components/alert/alert/alert.ts b/src/components/alert/alert/alert.ts
@@ -151,7 +151,7 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) {
               </p>
               ${this.href
                 ? html` <sbb-link
-                    aria-label=${this.accessibilityLabel ?? nothing}
+                    accessibility-label=${this.accessibilityLabel ?? nothing}
                     href=${this.href ?? nothing}
                     target=${this.target ?? nothing}
                     rel=${this.rel ?? nothing}

diff --git a/src/components/breadcrumb/breadcrumb-group/__snapshots__/breadcrumb-group.spec.snap.js b/src/components/breadcrumb/breadcrumb-group/__snapshots__/breadcrumb-group.spec.snap.js
@@ -12,19 +12,15 @@ snapshots["sbb-breadcrumb-group renders - Dom"] =
     dir="ltr"
     href="https://example.com"
     icon-name="pie-small"
-    role="link"
     slot="li-0"
-    tabindex="0"
   >
   </sbb-breadcrumb>
   <sbb-breadcrumb
     data-action=""
     data-link=""
     dir="ltr"
     href="https://example.com/one"
-    role="link"
     slot="li-1"
-    tabindex="0"
   >
     One
   </sbb-breadcrumb>
@@ -34,9 +30,7 @@ snapshots["sbb-breadcrumb-group renders - Dom"] =
     data-link=""
     dir="ltr"
     href="https://example.com/one"
-    role="link"
     slot="li-2"
-    tabindex="0"
   >
     Two
   </sbb-breadcrumb>
@@ -90,33 +84,15 @@ snapshots["sbb-breadcrumb-group A11y tree Chrome"] =
   "children": [
     {
       "role": "link",
-      "name": "",
-      "children": [
-        {
-          "role": "link",
-          "name": ""
-        }
-      ]
+      "name": ""
     },
     {
       "role": "link",
-      "name": "One",
-      "children": [
-        {
-          "role": "link",
-          "name": "One"
-        }
-      ]
+      "name": "One"
     },
     {
       "role": "link",
-      "name": "Two",
-      "children": [
-        {
-          "role": "link",
-          "name": "Two"
-        }
-      ]
+      "name": "Two"
     }
   ]
 }
@@ -133,35 +109,17 @@ snapshots["sbb-breadcrumb-group A11y tree Firefox"] =
     {
       "role": "link",
       "name": "",
-      "children": [
-        {
-          "role": "link",
-          "name": "",
-          "value": "https://example.com/"
-        }
-      ]
+      "value": "https://example.com/"
     },
     {
       "role": "link",
       "name": "One",
-      "children": [
-        {
-          "role": "link",
-          "name": "One",
-          "value": "https://example.com/one"
-        }
-      ]
+      "value": "https://example.com/one"
     },
     {
       "role": "link",
       "name": "Two",
-      "children": [
-        {
-          "role": "link",
-          "name": "Two",
-          "value": "https://example.com/one"
-        }
-      ]
+      "value": "https://example.com/one"
     }
   ]
 }

diff --git a/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js b/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js
@@ -7,8 +7,6 @@ snapshots["sbb-breadcrumb renders with text"] =
   download=""
   href="https://example.com/test"
   rel="subsection"
-  role="presentation"
-  tabindex="-1"
   target="_blank"
 >
   <slot name="icon">
@@ -28,8 +26,6 @@ snapshots["sbb-breadcrumb renders with icon"] =
 `<a
   class="sbb-action-base sbb-breadcrumb"
   href="/"
-  role="presentation"
-  tabindex="-1"
 >
   <slot name="icon">
     <sbb-icon
@@ -56,8 +52,6 @@ snapshots["sbb-breadcrumb renders with icon and text"] =
 `<a
   class="sbb-action-base sbb-breadcrumb"
   href="/"
-  role="presentation"
-  tabindex="-1"
 >
   <slot name="icon">
     <sbb-icon
@@ -85,13 +79,7 @@ snapshots["sbb-breadcrumb A11y tree Chrome"] =
   "children": [
     {
       "role": "link",
-      "name": "Breadcrumb",
-      "children": [
-        {
-          "role": "link",
-          "name": "Breadcrumb"
-        }
-      ]
+      "name": "Breadcrumb"
     }
   ]
 }
@@ -108,13 +96,7 @@ snapshots["sbb-breadcrumb A11y tree Firefox"] =
     {
       "role": "link",
       "name": "Breadcrumb",
-      "children": [
-        {
-          "role": "link",
-          "name": "Breadcrumb",
-          "value": "https://example.com/test"
-        }
-      ]
+      "value": "https://example.com/test"
     }
   ]
 }

diff --git a/src/components/breadcrumb/breadcrumb/breadcrumb.scss b/src/components/breadcrumb/breadcrumb/breadcrumb.scss
@@ -19,13 +19,6 @@
   --sbb-breadcrumb-color: var(--sbb-color-anthracite);
 }
 
-// Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components.
-:host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) {
-  @include sbb.focus-outline;
-
-  border-radius: var(--sbb-border-radius-2x);
-}
-
 .sbb-breadcrumb {
   @include sbb.text-xs--regular;
   @include sbb.link-base;
@@ -36,10 +29,18 @@
   color: var(--sbb-breadcrumb-color);
   align-items: center;
   overflow: hidden;
+  outline: none;
 
   @include sbb.if-forced-colors {
     --sbb-breadcrumb-color: ButtonText;
   }
+
+  // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components.
+  :host(:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) &:focus-visible {
+    @include sbb.focus-outline;
+
+    border-radius: var(--sbb-border-radius-2x);
+  }
 }
 
 .sbb-breadcrumb__label {

diff --git a/src/components/breadcrumb/breadcrumb/breadcrumb.spec.ts b/src/components/breadcrumb/breadcrumb/breadcrumb.spec.ts
@@ -16,10 +16,8 @@ describe(`sbb-breadcrumb`, () => {
     expect(root).dom.to.be.equal(`
       <sbb-breadcrumb
         dir="ltr"
-        role="link"
         data-action
         data-link
-        tabindex="0"
         href="https://example.com/test"
         target="_blank"
         download
@@ -39,8 +37,6 @@ describe(`sbb-breadcrumb`, () => {
     expect(root).dom.to.be.equal(`
       <sbb-breadcrumb
         dir="ltr"
-        role="link"
-        tabindex="0"
         data-action
         data-link
         href="/"
@@ -58,10 +54,8 @@ describe(`sbb-breadcrumb`, () => {
     expect(root).dom.to.be.equal(`
       <sbb-breadcrumb
         dir="ltr"
-        role="link"
         data-action
         data-link
-        tabindex="0"
         href="/"
         icon-name="house-small">
         Home

diff --git a/src/components/breadcrumb/breadcrumb/readme.md b/src/components/breadcrumb/breadcrumb/readme.md
@@ -39,13 +39,14 @@ By default, the `sbb-breadcrumb-group` component sets `aria-current="page"` on t
 
 ## Properties
 
-| Name       | Attribute   | Privacy | Type                                    | Default | Description                                                                                                                      |
-| ---------- | ----------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `iconName` | `icon-name` | public  | `string \| undefined`                   |         | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
-| `href`     | `href`      | public  | `string \| undefined`                   |         | The href value you want to link to.                                                                                              |
-| `target`   | `target`    | public  | `LinkTargetType \| string \| undefined` |         | Where to display the linked URL.                                                                                                 |
-| `rel`      | `rel`       | public  | `string \| undefined`                   |         | The relationship of the linked URL as space-separated link types.                                                                |
-| `download` | `download`  | public  | `boolean \| undefined`                  |         | Whether the browser will show the download dialog on click.                                                                      |
+| Name                 | Attribute             | Privacy | Type                                    | Default | Description                                                                                                                      |
+| -------------------- | --------------------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `iconName`           | `icon-name`           | public  | `string \| undefined`                   |         | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
+| `href`               | `href`                | public  | `string \| undefined`                   |         | The href value you want to link to.                                                                                              |
+| `target`             | `target`              | public  | `LinkTargetType \| string \| undefined` |         | Where to display the linked URL.                                                                                                 |
+| `rel`                | `rel`                 | public  | `string \| undefined`                   |         | The relationship of the linked URL as space-separated link types.                                                                |
+| `download`           | `download`            | public  | `boolean \| undefined`                  |         | Whether the browser will show the download dialog on click.                                                                      |
+| `accessibilityLabel` | `accessibility-label` | public  | `string \| undefined`                   |         | This will be forwarded as aria-label to the inner anchor element.                                                                |
 
 ## Slots