refactor: setting the aria-current on the links

instead of the list items

Author: mfranzke

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

@@ -2,8 +2,8 @@
 	<li>
 		{{> elements-link href='#' hreflang='en' value='EN' title='English language' rel='alternate' }}
 	</li>
-	<li aria-current="page">
-		{{> elements-link href='#' hreflang='de' value='DE' title='Deutsche Sprache' rel='bookmark' }}
+	<li>
+		{{> elements-link href='#' hreflang='de' value='DE' title='Deutsche Sprache' rel='bookmark' current="page" }}
 	</li>
 	<li>
 		{{> elements-link href='#' hreflang='fr' value='FR' title='Langue française' rel='alternate' }}

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

@@ -10,7 +10,7 @@
 	&:hover,
 	&:focus {
 		li {
-			&:not([aria-current]) {
+			&:not(:has([aria-current="page"])) {
 				visibility: visible;
 			}
 
@@ -33,19 +33,20 @@
 			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-current="page"]) ~ li:not([aria-current="page"]) {
+			&:not(:has([aria-current="page"]))
+				~ li:not(:has([aria-current="page"])) {
 				top: to-rem($pxValue: 54 * 2);
 
-				& ~ li:not([aria-current="page"]) {
+				& ~ li:not(:has([aria-current="page"])) {
 					top: to-rem($pxValue: 54 * 3);
 
-					& ~ li:not([aria-current="page"]) {
+					& ~ li:not(:has([aria-current="page"])) {
 						top: to-rem($pxValue: 54 * 4);
 
-						& ~ li:not([aria-current="page"]) {
+						& ~ li:not(:has([aria-current="page"])) {
 							top: to-rem($pxValue: 54 * 5);
 
-							& ~ li:not([aria-current="page"]) {
+							& ~ li:not(:has([aria-current="page"])) {
 								top: to-rem($pxValue: 54 * 6);
 							}
 						}
@@ -62,7 +63,7 @@
 			text-decoration: none;
 		}
 
-		&:not([aria-current]) {
+		&:not(:has([aria-current="page"])) {
 			visibility: hidden;
 
 			.elm-link {
@@ -77,7 +78,7 @@
 			}
 		}
 
-		&[aria-current] {
+		&:has([aria-current]) {
 			position: initial;
 
 			.elm-link {