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
db-ui · Apr 21, 2023 · 3855da9 · 3855da9
1 parent fe9ebc7
commit 3855da9
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 22 deletions.
diff --git a/.pa11yci b/.pa11yci
@@ -25,6 +25,7 @@
 		"http://127.0.0.1:8080/patterns/components-dropdown/index.html",
 		"http://127.0.0.1:8080/patterns/components-form/index.html",
 		"http://127.0.0.1:8080/patterns/components-overflow-menu/index.html",
+		"http://127.0.0.1:8080/patterns/components-language-switcher/index.html",
 		"http://127.0.0.1:8080/patterns/components-pagination/index.html",
 		"http://127.0.0.1:8080/patterns/components-table/index.html",
 		"http://127.0.0.1:8080/patterns/areas-footer/index.html",

diff --git a/source/_patterns/01-elements/buttons/button.hbs b/source/_patterns/01-elements/buttons/button.hbs
@@ -6,6 +6,7 @@
 	{{#if role }} role="{{ role }}"{{/if }}
 	{{#if disabled }} disabled{{/if }}
 	{{#if icon}} data-icon="{{ icon }}"{{/if}}
-	{{#if icon-after}} data-icon-after="{{ icon-after }}"{{/if}}>
+	{{#if icon-after}} data-icon-after="{{ icon-after }}"{{/if}}
+	{{#if label}} aria-label="{{ label }}"{{/if }}>
 	{{{ value }}}
 </button>
diff --git a/source/_patterns/02-components/language-switcher/_language-switcher.md b/source/_patterns/02-components/language-switcher/_language-switcher.md
@@ -0,0 +1,12 @@
+---
+title: Language switcher
+state: inprogress
+---
+
+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.
+
+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.
+
+In both cases there's a slightly different HTML approach that you could inspect within the different examples below.
+
+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.
diff --git a/source/_patterns/02-components/language-switcher/language-switcher.hbs b/source/_patterns/02-components/language-switcher/language-switcher.hbs
@@ -1,13 +1,24 @@
-{{! TODO: evaluate on the correct role and aria-label in here }}
-<!-- [html-validate-disable-next prefer-native-element] -->
-<ul class="cmp-language-switcher" role="listbox">
-	<li role="option">
-		{{> elements-link href='#' hreflang='en' value='EN' title='English language' rel='alternate' }}
+{{#if spa}}<!-- [html-validate-disable-next prefer-native-element] -->{{/if }}
+<ul class="cmp-language-switcher"{{#if spa}} role="listbox"{{/if }}>
+	<li{{#if spa}} role="option"{{/if }}>
+		{{#unless spa}}
+			{{> elements-link href='#' hreflang='en' value='EN' title='English language' rel='alternate' }}
+		{{else}}
+			{{> elements-button type='button' value='EN' title='English language' variant='tertiary-plain' }}
+		{{/unless }}
 	</li>
-	<li role="option" aria-selected="true">
-		{{> elements-link href='#' hreflang='de' value='DE' title='Deutsche Sprache' rel='bookmark' }}
+	<li{{#if spa}} role="option" aria-selected="true"{{else}} aria-current="page"{{/if }}>
+		{{#unless spa}}
+			{{> elements-link href='#' hreflang='de' value='DE' title='Deutsche Sprache' rel='bookmark' }}
+		{{else}}
+			{{> elements-button type='button' value='DE' title='Deutsche Sprache' variant='tertiary-plain' }}
+		{{/unless }}
 	</li>
-	<li role="option">
-		{{> elements-link href='#' hreflang='fr' value='FR' title='Langue française' rel='alternate' }}
+	<li{{#if spa}} role="option"{{/if }}>
+		{{#unless spa}}
+			{{> elements-link href='#' hreflang='fr' value='FR' title='Langue française' rel='alternate' }}
+		{{else}}
+			{{> elements-button type='button' value='FR' title='Langue française' variant='tertiary-plain' }}
+		{{/unless }}
 	</li>
 </ul>
diff --git a/source/_patterns/02-components/language-switcher/language-switcher.md b/source/_patterns/02-components/language-switcher/language-switcher.md
@@ -1,7 +1,6 @@
 ---
 title: Language switcher
 state: inprogress
-tags: [style-1.6]
 ---
 
 [Insert description here]
diff --git a/source/_patterns/02-components/language-switcher/language-switcher.scss b/source/_patterns/02-components/language-switcher/language-switcher.scss
@@ -10,10 +10,11 @@
 	&:hover,
 	&:focus {
 		li {
-			&:not([aria-selected]) {
+			&:not([aria-current], [aria-selected]) {
 				visibility: visible;
 			}
 
+			&[aria-current="page"],
 			&[aria-selected="true"] {
 				color: $db-color-red-500;
 			}
@@ -33,19 +34,28 @@
 			z-index: $z-index-rea-header-cmp-language-switcher-li; // * TODO: possibly rework variable naming
 
 			// TODO: This is an enhancement for more languages, but obviously doesn't scale that nicely and would need some rework
-			&:not([aria-selected="true"]) ~ li:not([aria-selected="true"]) {
+			&:not([aria-current="page"], [aria-selected="true"])
+				~ li:not([aria-current="page"], [aria-selected="true"]) {
 				top: to-rem($pxValue: 54 * 2);
 
-				& ~ li:not([aria-selected="true"]) {
+				& ~ li:not([aria-current="page"], [aria-selected="true"]) {
 					top: to-rem($pxValue: 54 * 3);
 
-					& ~ li:not([aria-selected="true"]) {
+					& ~ li:not([aria-current="page"], [aria-selected="true"]) {
 						top: to-rem($pxValue: 54 * 4);
 
-						& ~ li:not([aria-selected="true"]) {
+						&
+							~ li:not(
+								[aria-current="page"],
+								[aria-selected="true"]
+							) {
 							top: to-rem($pxValue: 54 * 5);
 
-							& ~ li:not([aria-selected="true"]) {
+							&
+								~ li:not(
+									[aria-current="page"],
+									[aria-selected="true"]
+								) {
 								top: to-rem($pxValue: 54 * 6);
 							}
 						}
@@ -57,15 +67,17 @@
 			}
 		}
 
-		.elm-link {
+		.elm-link,
+		.elm-button {
 			color: inherit;
 			text-decoration: none;
 		}
 
-		&:not([aria-selected]) {
+		&:not([aria-current], [aria-selected]) {
 			visibility: hidden;
 
-			.elm-link {
+			.elm-link,
+			.elm-button {
 				padding-bottom: to-rem($pxValue: 15);
 				padding-right: to-rem($pxValue: 34);
 				padding-top: to-rem($pxValue: 15);
@@ -77,10 +89,12 @@
 			}
 		}
 
+		&[aria-current],
 		&[aria-selected] {
 			position: initial;
 
-			.elm-link {
+			.elm-link,
+			.elm-button {
 				@include icon(
 					glyph(expand-more),
 					24,
@@ -103,7 +117,8 @@
 			}
 		}
 
-		.elm-link {
+		.elm-link,
+		.elm-button {
 			display: inline-block;
 
 			padding-left: to-rem($pxValue: 18);
@@ -113,5 +128,12 @@
 				color: initial;
 			}
 		}
+
+		.elm-button {
+			line-height: 1.5;
+			padding-right: 0;
+			border-width: 0;
+			padding-top: to-rem($pxValue: 9);
+		}
 	}
 }
diff --git a/source/_patterns/02-components/language-switcher/language-switcher~spa.json b/source/_patterns/02-components/language-switcher/language-switcher~spa.json
@@ -0,0 +1,3 @@
+{
+	"spa": true
+}
diff --git a/source/_patterns/02-components/language-switcher/language-switcher~spa.md b/source/_patterns/02-components/language-switcher/language-switcher~spa.md
@@ -0,0 +1,6 @@
+---
+title: Language switcher with buttons
+state: inprogress
+---
+
+[Insert description here]