From 3855da94bdc0bcd2871ffc6637d03d9c92d165d1 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Fri, 21 Apr 2023 12:52:12 +0200
Subject: [PATCH] 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 c2e2081f3aa1d45d45967fdfeb577c929b0d9db2.

* 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
---
 .pa11yci                                      |  1 +
 .../_patterns/01-elements/buttons/button.hbs  |  3 +-
 .../language-switcher/_language-switcher.md   | 12 +++++
 .../language-switcher/language-switcher.hbs   | 29 ++++++++----
 .../language-switcher/language-switcher.md    |  1 -
 .../language-switcher/language-switcher.scss  | 44 ++++++++++++++-----
 .../language-switcher~spa.json                |  3 ++
 .../language-switcher~spa.md                  |  6 +++
 8 files changed, 77 insertions(+), 22 deletions(-)
 create mode 100644 source/_patterns/02-components/language-switcher/_language-switcher.md
 create mode 100644 source/_patterns/02-components/language-switcher/language-switcher~spa.json
 create mode 100644 source/_patterns/02-components/language-switcher/language-switcher~spa.md

diff --git a/.pa11yci b/.pa11yci
index 579442afc1..b4608b1fd9 100644
--- 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
index 5bcaebd7be..4e8f0b8e7e 100644
--- 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
new file mode 100644
index 0000000000..5f5ce3a86e
--- /dev/null
+++ 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
index 0b0e4c940d..d10b088e60 100644
--- 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
index 2afbf28e6f..c98ffad877 100644
--- 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
index 86dbf5faad..baf7c4033c 100644
--- 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
new file mode 100644
index 0000000000..b9c0216d9e
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..3a764b963c
--- /dev/null
+++ 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]