feat(core): update menu to be more inlined with MW core

* Use label instead of h3 for menu headings
* Rename portals to portlets according to core
* Replace label-class with heading-class
* Use has-label to hide labels instead of adding screen reader class

includes/Partials/Drawer.php

@@ -50,36 +50,44 @@ final class Drawer extends Partial {
 	public function getDrawerTemplateData() {
 		$drawer = [];
 		$drawerData = $this->skin->buildSidebar();
+		$index = 0;
 
-		// Render portals
+		// Render portlets
 		foreach ( $drawerData as $name => $items ) {
 			if ( is_array( $items ) ) {
 				// Numeric strings gets an integer when set as key, cast back - T73639
 				$name = (string)$name;
 				switch ( $name ) {
-					// ignore search
+					// Ignore search
+					// Handled by Header
 					case 'SEARCH':
-					// we build in PageTools instead
+						break;
+					// Ignore toolbox
+					// Handled by PageTools
 					case 'TOOLBOX':
 						break;
+					// Ignore language
+					// Handled by PageTools
 					case 'LANGUAGES':
 						break;
 					default:
 						$drawer[] = $this->skin->getPortletData( $name, $items );
+						$drawer[$index]['has-label'] = true;
+						$index++;
 						break;
 				}
 			}
 		}
 
-		$portalLabel = $this->getConfigValue( 'CitizenPortalAttach' ) ?? 'first';
+		$portletLabel = $this->getConfigValue( 'CitizenPortalAttach' ) ?? 'first';
 
-		$firstPortal = array_shift( $drawer );
+		$firstPortlet = array_shift( $drawer );
 
-		if ( $portalLabel === 'first' && $firstPortal !== null && isset( $firstPortal['html-items'] ) ) {
-			$this->addToolboxLinksToDrawer( $firstPortal['html-items'] );
+		if ( $portletLabel === 'first' && $firstPortlet !== null && isset( $firstPortlet['html-items'] ) ) {
+			$this->addToolboxLinksToDrawer( $firstPortlet['html-items'] );
 		} else {
-			for ( $i = 0, $portalCount = count( $drawer ); $i < $portalCount; $i++ ) {
-				if ( isset( $drawer[$i]['label'] ) && $drawer[$i]['label'] === $portalLabel ) {
+			for ( $i = 0, $portletCount = count( $drawer ); $i < $portletCount; $i++ ) {
+				if ( isset( $drawer[$i]['label'] ) && $drawer[$i]['label'] === $portletLabel ) {
 					$this->addToolboxLinksToDrawer( $drawer[$i]['html-items'] );
 					break;
 				}
@@ -88,8 +96,8 @@ final class Drawer extends Partial {
 
 		$drawerData = [
 			'msg-citizen-drawer-toggle' => $this->skin->msg( 'citizen-drawer-toggle' )->text(),
-			'data-portals-first' => $firstPortal,
-			'array-portals-rest' => $drawer,
+			'data-portlets-first' => $firstPortlet,
+			'array-portlets-rest' => $drawer,
 			'data-drawer-sitestats' => $this->getSiteStats(),
 		];
 
@@ -149,7 +157,7 @@ final class Drawer extends Partial {
 	}
 
 	/**
-	 * Add a link to special pages and the upload form to the first portal in the drawer
+	 * Add a link to special pages and the upload form to the first portlet in the drawer
 	 *
 	 * @param string &$htmlItems
 	 *

includes/Partials/Header.php

@@ -67,9 +67,6 @@ final class Header extends Partial {
 
 		$personalMenu = $this->skin->getPortletData( 'personal', $personalTools );
 
-		// Hide label for personal tools
-		$personalMenu[ 'label-class' ] = 'screen-reader-text';
-
 		return [
 			'msg-citizen-personalmenu-toggle' => $this->skin->msg( 'citizen-personalmenu-toggle' )->text(),
 			'data-personal-menu-list' => $personalMenu,
@@ -97,9 +94,6 @@ final class Header extends Partial {
 
 		$html = $this->skin->getPortletData( 'notifications', $notifications );
 
-		// Hide label for extra tools
-		$html[ 'label-class' ] = 'screen-reader-text';
-
 		return $html;
 	}
 

includes/Partials/PageTools.php

@@ -108,19 +108,14 @@ final class PageTools extends Partial {
 				}
 			}
 
-			if ( $viewshtml ) {
-				$viewshtml[ 'label-class' ] ??= '';
-				$viewshtml[ 'label-class' ] .= 'screen-reader-text';
+			// Toggle label for toolbox
+			if ( $toolboxhtml ) {
+				$toolboxhtml['has-label'] = true;
 			}
 
-			if ( $actionshtml ) {
-				$actionshtml[ 'label-class' ] ??= '';
-				$actionshtml[ 'label-class' ] .= 'screen-reader-text';
-			}
-
-			if ( $namespaceshtml ) {
-				$namespaceshtml[ 'label-class' ] ??= '';
-				$namespaceshtml[ 'label-class' ] .= 'screen-reader-text';
+			// Toggle label for variants
+			if ( $variantshtml ) {
+				$variantshtml['has-label'] = true;
 			}
 
 			$props = [

resources/skins.citizen.styles/Menu.less

@@ -1,13 +1,18 @@
-.mw-portlet {
-	h3 {
-		padding: 0.625rem 1.25rem;
-		margin: 0;
-		color: var( --color-base--subtle );
-		font-size: inherit;
-		font-weight: normal;
-		letter-spacing: 0.75px;
+.citizen-menu {
+	&__heading {
+		&-label {
+			display: block;
+			padding: 0.625rem 1.25rem;
+			margin: 0;
+			color: var( --color-base--subtle );
+			font-size: inherit;
+			font-weight: normal;
+			letter-spacing: 0.75px;
+		}
 	}
+}
 
+.mw-portlet {
 	// Hide selected item
 	.selected {
 		.mixin-screen-reader-text;

templates/Drawer.mustache

@@ -20,8 +20,8 @@
 			</div>
 		</header>
 		<section class="citizen-drawer__menu">
-			{{#data-portals-first}}{{>Menu}}{{/data-portals-first}}
-			{{#array-portals-rest}}{{>Menu}}{{/array-portals-rest}}
+			{{#data-portlets-first}}{{>Menu}}{{/data-portlets-first}}
+			{{#array-portlets-rest}}{{>Menu}}{{/array-portlets-rest}}
 		</section>
 	</aside>
 	{{>Drawer__button}}

templates/Menu.mustache

@@ -1,9 +1,16 @@
 {{!
 
 }}
-<nav id="{{id}}"{{#class}} class="{{.}}"{{/class}} {{{html-tooltip}}}
-	 {{{html-userlangattributes}}}>
-	<h3 id="{{label-id}}"{{#label-class}} class="{{.}}"{{/label-class}}>{{label}}</h3>
+<nav id="{{id}}"{{#class}} class="{{.}}"{{/class}} {{{html-tooltip}}} {{{html-userlangattributes}}}>
+	{{#has-label}}
+	<label
+		id="{{id}}-label"
+		{{#aria-label}} aria-label="{{.}}"{{/aria-label}}
+		class="citizen-menu__heading{{#heading-class}} {{.}}{{/heading-class}}">
+		<span class="citizen-menu__heading-label">{{label}}</span>
+	</label>
+	{{/has-label}}
+	{{{html-before-portal}}}
 	<ul>{{{html-items}}}</ul>
 	{{{html-after-portal}}}
 </nav>