Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(link): fix accessibility by inlining link functionality into Shadow DOM #2571

Merged
merged 21 commits into from
May 13, 2024
Merged

fix(link): fix accessibility by inlining link functionality into Shadow DOM #2571

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
673072c
refactor(link): inline link functionality
TomMenga Apr 11, 2024
a57a1cb
refactor(link): update test snapshots
TomMenga Apr 11, 2024
ca2d035
refactor(link): update test snapshots
TomMenga Apr 11, 2024
bf6ec54
refactor(action-base): adapt to inline link
TomMenga Apr 11, 2024
483a2ed
refactor(menu-button): fix disabled logic
TomMenga Apr 16, 2024
163e6bc
Merge branch 'main' into fix/link-a11y
TomMenga Apr 16, 2024
80a3f7a
chore: integrity
TomMenga Apr 16, 2024
70c8ba8
Merge branch 'main' into fix/link-a11y
TomMenga Apr 17, 2024
804dcce
fix(header, menu): fix focus for link variants
TomMenga Apr 18, 2024
7a1c5a5
fix(header, menu): fix focus for link variants
TomMenga Apr 18, 2024
b8a2889
fix(breadcrumb, link): fix focus ring
TomMenga Apr 18, 2024
da81b1a
fix: fix focus ring
TomMenga Apr 18, 2024
82cc719
feat(link-button): fix spec test
TomMenga Apr 24, 2024
4d7d9ff
Merge branch 'main' into fix/link-a11y
TomMenga Apr 24, 2024
919d464
chore: update-snapshots
TomMenga Apr 29, 2024
b5d70ef
Merge branch 'main' into fix/link-a11y
TomMenga May 6, 2024
2f3fb06
fix(link-inline): fix focus-ring
TomMenga May 6, 2024
335098e
test(link-inline): udpate stories and tests with 'accessibility-label'
TomMenga May 6, 2024
75c0e33
chore: update docs
TomMenga May 6, 2024
3bbe3db
docs(link, button): udpate stories with 'accessibility-label'
TomMenga May 6, 2024
3bb30db
feat(link): add 'aria-disabled'
TomMenga May 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 2 additions & 16 deletions src/components/action-group/__snapshots__/action-group.spec.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -60,13 +58,7 @@ snapshots["sbb-action-group renders A11y tree Chrome"] =
},
{
"role": "link",
"name": "Link",
"children": [
{
"role": "link",
"name": "Link"
}
]
"name": "Link"
}
]
}
Expand All @@ -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"
}
]
}
Expand Down
16 changes: 2 additions & 14 deletions src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,13 +54,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",
Expand Down Expand Up @@ -95,13 +89,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",
Expand Down
20 changes: 3 additions & 17 deletions src/components/alert/alert/__snapshots__/alert.spec.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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=""
Expand All @@ -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
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion src/components/alert/alert/alert.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,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}
Expand Down
54 changes: 6 additions & 48 deletions src/components/breadcrumb/breadcrumb-group/__snapshots__/breadcrumb-group.spec.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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"
}
]
}
Expand All @@ -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"
}
]
}
Expand Down
22 changes: 2 additions & 20 deletions src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -85,13 +79,7 @@ snapshots["sbb-breadcrumb A11y tree Chrome"] =
"children": [
{
"role": "link",
"name": "Breadcrumb",
"children": [
{
"role": "link",
"name": "Breadcrumb"
}
]
"name": "Breadcrumb"
}
]
}
Expand All @@ -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"
}
]
}
Expand Down
14 changes: 7 additions & 7 deletions src/components/breadcrumb/breadcrumb/breadcrumb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,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;
Expand All @@ -41,6 +34,13 @@
@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.
&:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch']) {
@include sbb.focus-outline;

border-radius: var(--sbb-border-radius-2x);
}
}

.sbb-breadcrumb__label {
Expand Down
6 changes: 0 additions & 6 deletions src/components/breadcrumb/breadcrumb/breadcrumb.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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="/"
Expand All @@ -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
Expand Down
15 changes: 8 additions & 7 deletions src/components/breadcrumb/breadcrumb/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 relevant nested element. |

## Slots

Expand Down
Loading