Merge pull request #150 from w3c/feature/simplify-globalnav-markup

Feature/simplify globalnav markup

Author: jean-gui

assets-src/js/main/collapsibles.js

@@ -20,7 +20,7 @@ let collapsibles = function () {
 			headingsArray.forEach(function (heading, index) {
 
 				// Insert a button for opening/closing the collapsible section
-				heading.innerHTML = '<button type="button" class="button--ghost" aria-expanded="false">' + heading.innerHTML + '<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 512" class="icon icon--larger" focusable="false" aria-hidden="true" width="30px" height="30px"><path class="angle-down" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"/><path class="angle-up" d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/></svg></button>';
+				heading.innerHTML = '<button type="button" class="button button--ghost" aria-expanded="false">' + heading.innerHTML + '</svg></button>';
 
 				// Add appropriate aria role to the collapsible section
 				heading.nextElementSibling.setAttribute('aria-hidden', 'true');

assets-src/js/main/navigation.js

@@ -197,10 +197,8 @@ const navigation = function(menu, options) {
 		// Insert a "back" button
 		const backButton = document.createElement('button');
 		backButton.setAttribute('data-button', 'mobile-back');
-		backButton.setAttribute('class', 'button button--ghost u-full-width with-icon--before with-icon--larger');
-		backButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" height="16" width="16" class="icon icon--submenu" focusable="false" aria-hidden="true" fill="currentColor">' +
-			'<path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"/>' +
-			'</svg>' + translate.translate('backToMainMenu', languageCode);
+		backButton.setAttribute('class', 'button button--ghost u-full-width');
+		backButton.innerHTML = translate.translate('backToMainMenu', languageCode);
 		if (settings.submenuIntro === true) {
 			subMenu.parentNode.insertBefore(backButton, subMenu.parentNode.children[0]);
 		} else subMenu.parentNode.insertBefore(backButton, subMenu);

assets-src/styles/sass/30-base/_lists.scss

@@ -2,26 +2,16 @@
     #Lists
 \*------------------------------------*/
 
-/**
-Remove default list styles on lists with a class name (e.g. 'nav-list')
- */
-ol[class],
-ul[class] {
-	list-style: none;
-	padding: 0;
-}
-
-ul:not([class]),
-ol:not([class]),
-ol.counter {
+ul,
+ol {
 	margin-block-end: 1em;
 	margin-block-start: 1em;
 	padding-inline-start: 2.4em;
 
 	> * + *,
 	li ul,
 	li ol {
-		margin-top: 0.75em;
+		margin-block-start: 0.75em;
 	}
 }
 
@@ -32,11 +22,25 @@ ol.counter {
 }
 
 
-// No bullets or numbering
+/**
+Remove bullets, margin and padding from lists inside a <nav> element, and lists with the
+'.clean-list' class/. Note that that this may remove list semantics in some circumstances in
+some WebKit browsers. See https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
+If it's important that the number of items in a list is announced, add role="list" to the <ul> / <ol>
+ */
+nav ul,
+nav ol,
 .clean-list {
-	li {
-		display: block;
-	}
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    li,
+    ol,
+    ul {
+        margin: 0;
+        padding: 0;
+    }
 }
 
 
@@ -52,12 +56,12 @@ dl {
 	}
 
 	dd + dt {
-		margin-top: 0.5em;
+		margin-block-start: 0.5em;
 	}
 
 	dt + dd,
 	dd + dd {
-		margin-top: 0.25em;
+		margin-block-start: 0.25em;
 	}
 }
 
@@ -95,7 +99,7 @@ dl.grid {
 		dd + dt,
 		dt + dd,
 		dd + dd {
-			margin-top: 0;
+			margin-block-start: 0;
 		}
 
 		dt {

assets-src/styles/sass/50-core-components/_navigation.scss

@@ -47,7 +47,7 @@
 
 li.top-nav-item + li.top-nav-item {
 	@include mq($max-width) {
-		margin-inline-start: rem(4);
+		margin-inline-start: rem(8);
 	}
 }
 
@@ -80,7 +80,24 @@ li.top-nav-item + li.top-nav-item {
 }
 
 .global-nav__inner .top-nav-item > .nav-link {
-	font-weight: $emphasis;
+    font-weight: $emphasis;
+}
+
+// Add chevron to links with children - visually hide but retain space.
+.global-nav__inner .has-children > .nav-link {
+    align-items: center;
+    display: flex;
+
+    &::after {
+        block-size: rem(7);
+        border-color: black;
+        border-style: solid;
+        border-width: 0 rem(2) rem(2) 0;
+        content: "";
+        inline-size: rem(7);
+        margin-inline-start: rem(12);
+        visibility: hidden;
+    }
 }
 
 .logo-link {

assets-src/styles/sass/50-core-components/_toc.scss

@@ -3,10 +3,10 @@
 \*------------------------------------*/
 
 .toc + * {
-	margin-top: rem(30);
+	margin-block-start: rem(30);
 
 	@include mq($max-width) {
-		margin-top: rem(80);
+        margin-block-start: rem(80);
 	}
 }
 
@@ -15,22 +15,22 @@
 	font-weight: normal;
 }
 
-.toc ul {
-	border-left: solid 3px $deep-yellow;
-	padding-left: rem(15);
+// Only apply the border to the top level list
+.toc > ul {
+	border-inline-start: solid 3px $deep-yellow;
 }
 
-[dir="rtl"] {
-	.toc ul {
-		border-left: 0;
-		border-right: solid 3px $deep-yellow;
-		padding-left: 0;
-		padding-right: rem(15);
-	}
+.toc ul {
+    line-height: 1em;
+    padding-inline-start: rem(15);
+
+    ul {
+        list-style: circle inside;
+        padding-inline-start: rem(30);
+    }
 }
 
 .toc ul a {
 	display: inline-block;
-	padding-bottom: rem(10);
-	padding-top: rem(10);
+	padding-block: rem(10);
 }

assets-src/styles/sass/60-advanced-components/_collapsibles.scss

@@ -15,7 +15,7 @@
 		line-height: calc(27 / 18);
 		justify-content: space-between;
 		margin-top: 0;
-		padding: 0;
+		padding: rem(3);
 		width: 100%;
 
 		> span {
@@ -27,6 +27,19 @@
 			width: 100%;
 		}
 
+       // Decorative chevron
+        &::after {
+            block-size: rem(14);
+            border-color: black;
+            border-style: solid;
+            border-width: 0 rem(4) rem(4) 0;
+            content: "";
+            inline-size: rem(14);
+            margin-block-start: rem(4);
+            margin-inline-end: rem(2);
+            transform: rotate(45deg);
+        }
+
 		&:hover {
 			text-decoration: underline; /* 1 */
 			text-decoration-skip-ink: auto; // Not supported by Safari
@@ -38,20 +51,15 @@
 			background-color: $focus-color;
 			text-decoration: none;
 		}
-
-		&[aria-expanded="false"] .angle-up {
-			display: none;
-		}
-
-		&[aria-expanded="true"] .angle-down {
-			display: none;
-		}
-
-		svg {
-			flex-shrink: 0;
-		}
 	}
 
+    [data-heading="collapsibles"] button[aria-expanded="true"] {
+        &::after {
+            margin-block-start: rem(10);
+            scale: -1;
+        }
+    }
+
 	[data-heading="collapsibles"] + * {
 		&[aria-hidden="true"] {
 			display: none;

assets-src/styles/sass/60-advanced-components/_disclosure-widget.scss

@@ -15,11 +15,22 @@
 [data-toggle="true"] {
 	@include txt-pluto;
 	align-items: center;
+    display: inline-flex;
 	font-weight: bold;
 
-	svg {
-		pointer-events: none;
-	}
+    // Decorative chevron
+    &::after {
+        block-size: rem(7);
+        border-color: black;
+        border-style: solid;
+        border-width: 0 rem(2) rem(2) 0;
+        content: "";
+        inline-size: rem(7);
+        margin-block-start: rem(-3);
+        margin-inline-end: rem(3);
+        margin-inline-start: rem(12);
+        transform: rotate(45deg);
+    }
 
 	&:hover {
 		box-shadow: 0 0 4px 2px rgba(84,84,84,0.25);
@@ -33,19 +44,16 @@
 }
 
 [data-toggle="true"][aria-expanded="false"] {
-	.angle-up {
-		display: none;
-	}
-
 	+ * {
 		display: none;
 	}
 }
 
 [data-toggle="true"][aria-expanded="true"] {
-	.angle-down {
-		display: none;
-	}
+	&::after {
+        margin-block-start: rem(4);
+        scale: -1;
+    }
 
 	+ * {
 		display: block;