Skip to content

Commit 3855da9

Browse files
mfranzkemfranzke
authored
refactor: switched to a11y compliant HTML (#417)
* refactor: switched to a11y compliant HTML * refactor: setting the aria-current on the links instead of the list items * Revert "refactor: setting the aria-current on the links" This reverts commit c2e2081. * refactor: added aria-label to button component * refactor: added SPA variant * docs: added another quick hint * chore: remove 1.6 styling tag temporarily, until we render enterprise version of the styleguide as well
1 parent fe9ebc7 commit 3855da9

File tree

8 files changed

+77
-22
lines changed

8 files changed

+77
-22
lines changed

‎.pa11yci

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"http://127.0.0.1:8080/patterns/components-dropdown/index.html",
2626
"http://127.0.0.1:8080/patterns/components-form/index.html",
2727
"http://127.0.0.1:8080/patterns/components-overflow-menu/index.html",
28+
"http://127.0.0.1:8080/patterns/components-language-switcher/index.html",
2829
"http://127.0.0.1:8080/patterns/components-pagination/index.html",
2930
"http://127.0.0.1:8080/patterns/components-table/index.html",
3031
"http://127.0.0.1:8080/patterns/areas-footer/index.html",

‎source/_patterns/01-elements/buttons/button.hbs

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
{{#if role }} role="{{ role }}"{{/if }}
77
{{#if disabled }} disabled{{/if }}
88
{{#if icon}} data-icon="{{ icon }}"{{/if}}
9-
{{#if icon-after}} data-icon-after="{{ icon-after }}"{{/if}}>
9+
{{#if icon-after}} data-icon-after="{{ icon-after }}"{{/if}}
10+
{{#if label}} aria-label="{{ label }}"{{/if }}>
1011
{{{ value }}}
1112
</button>

‎source/_patterns/02-components/language-switcher/_language-switcher.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: Language switcher
3+
state: inprogress
4+
---
5+
6+
You could either use the language switcher component with hyperlinks, which would be the recommended way, to link to another language based page, which is addressable by a different URL.
7+
8+
The other way (especially for Single Page Applications) would be to use `<button type="button">` elements, that have some JavaScript events attached to them to handle the switch directly. Please keep in mind to announce a change of contents e.g. to screenreaders in this case.
9+
10+
In both cases there's a slightly different HTML approach that you could inspect within the different examples below.
11+
12+
Please keep in mind that the styling is optimized to look good included within the header section of the page and doesn't "shine" included in here.

‎source/_patterns/02-components/language-switcher/language-switcher.hbs

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,24 @@
1-
{{! TODO: evaluate on the correct role and aria-label in here }}
2-
<!-- [html-validate-disable-next prefer-native-element] -->
3-
<ul class="cmp-language-switcher" role="listbox">
4-
<li role="option">
5-
{{> elements-link href='#' hreflang='en' value='EN' title='English language' rel='alternate' }}
1+
{{#if spa}}<!-- [html-validate-disable-next prefer-native-element] -->{{/if }}
2+
<ul class="cmp-language-switcher"{{#if spa}} role="listbox"{{/if }}>
3+
<li{{#if spa}} role="option"{{/if }}>
4+
{{#unless spa}}
5+
{{> elements-link href='#' hreflang='en' value='EN' title='English language' rel='alternate' }}
6+
{{else}}
7+
{{> elements-button type='button' value='EN' title='English language' variant='tertiary-plain' }}
8+
{{/unless }}
69
</li>
7-
<li role="option" aria-selected="true">
8-
{{> elements-link href='#' hreflang='de' value='DE' title='Deutsche Sprache' rel='bookmark' }}
10+
<li{{#if spa}} role="option" aria-selected="true"{{else}} aria-current="page"{{/if }}>
11+
{{#unless spa}}
12+
{{> elements-link href='#' hreflang='de' value='DE' title='Deutsche Sprache' rel='bookmark' }}
13+
{{else}}
14+
{{> elements-button type='button' value='DE' title='Deutsche Sprache' variant='tertiary-plain' }}
15+
{{/unless }}
916
</li>
10-
<li role="option">
11-
{{> elements-link href='#' hreflang='fr' value='FR' title='Langue française' rel='alternate' }}
17+
<li{{#if spa}} role="option"{{/if }}>
18+
{{#unless spa}}
19+
{{> elements-link href='#' hreflang='fr' value='FR' title='Langue française' rel='alternate' }}
20+
{{else}}
21+
{{> elements-button type='button' value='FR' title='Langue française' variant='tertiary-plain' }}
22+
{{/unless }}
1223
</li>
1324
</ul>

‎source/_patterns/02-components/language-switcher/language-switcher.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
title: Language switcher
33
state: inprogress
4-
tags: [style-1.6]
54
---
65

76
[Insert description here]

‎source/_patterns/02-components/language-switcher/language-switcher.scss

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@
1010
&:hover,
1111
&:focus {
1212
li {
13-
&:not([aria-selected]) {
13+
&:not([aria-current], [aria-selected]) {
1414
visibility: visible;
1515
}
1616

17+
&[aria-current="page"],
1718
&[aria-selected="true"] {
1819
color: $db-color-red-500;
1920
}
@@ -33,19 +34,28 @@
3334
z-index: $z-index-rea-header-cmp-language-switcher-li; // * TODO: possibly rework variable naming
3435

3536
// TODO: This is an enhancement for more languages, but obviously doesn't scale that nicely and would need some rework
36-
&:not([aria-selected="true"]) ~ li:not([aria-selected="true"]) {
37+
&:not([aria-current="page"], [aria-selected="true"])
38+
~ li:not([aria-current="page"], [aria-selected="true"]) {
3739
top: to-rem($pxValue: 54 * 2);
3840

39-
& ~ li:not([aria-selected="true"]) {
41+
& ~ li:not([aria-current="page"], [aria-selected="true"]) {
4042
top: to-rem($pxValue: 54 * 3);
4143

42-
& ~ li:not([aria-selected="true"]) {
44+
& ~ li:not([aria-current="page"], [aria-selected="true"]) {
4345
top: to-rem($pxValue: 54 * 4);
4446

45-
& ~ li:not([aria-selected="true"]) {
47+
&
48+
~ li:not(
49+
[aria-current="page"],
50+
[aria-selected="true"]
51+
) {
4652
top: to-rem($pxValue: 54 * 5);
4753

48-
& ~ li:not([aria-selected="true"]) {
54+
&
55+
~ li:not(
56+
[aria-current="page"],
57+
[aria-selected="true"]
58+
) {
4959
top: to-rem($pxValue: 54 * 6);
5060
}
5161
}
@@ -57,15 +67,17 @@
5767
}
5868
}
5969

60-
.elm-link {
70+
.elm-link,
71+
.elm-button {
6172
color: inherit;
6273
text-decoration: none;
6374
}
6475

65-
&:not([aria-selected]) {
76+
&:not([aria-current], [aria-selected]) {
6677
visibility: hidden;
6778

68-
.elm-link {
79+
.elm-link,
80+
.elm-button {
6981
padding-bottom: to-rem($pxValue: 15);
7082
padding-right: to-rem($pxValue: 34);
7183
padding-top: to-rem($pxValue: 15);
@@ -77,10 +89,12 @@
7789
}
7890
}
7991

92+
&[aria-current],
8093
&[aria-selected] {
8194
position: initial;
8295

83-
.elm-link {
96+
.elm-link,
97+
.elm-button {
8498
@include icon(
8599
glyph(expand-more),
86100
24,
@@ -103,7 +117,8 @@
103117
}
104118
}
105119

106-
.elm-link {
120+
.elm-link,
121+
.elm-button {
107122
display: inline-block;
108123

109124
padding-left: to-rem($pxValue: 18);
@@ -113,5 +128,12 @@
113128
color: initial;
114129
}
115130
}
131+
132+
.elm-button {
133+
line-height: 1.5;
134+
padding-right: 0;
135+
border-width: 0;
136+
padding-top: to-rem($pxValue: 9);
137+
}
116138
}
117139
}

‎source/_patterns/02-components/language-switcher/language-switcher~spa.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"spa": true
3+
}

‎source/_patterns/02-components/language-switcher/language-switcher~spa.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: Language switcher with buttons
3+
state: inprogress
4+
---
5+
6+
[Insert description here]

0 commit comments

Comments
 (0)