fix (aria-expanded) : add toggle text

Author: n-langle

components/parts/common/header.php

@@ -11,7 +11,8 @@
 
 			<button class="header__menu-toggle" aria-expanded="false" aria-controls="menu">
 				<span aria-hidden="true"></span>
-				<span class="sr-only"><?php esc_html_e( 'Open/Close the menu', 'beapi-frontend-framework' ); ?></span>
+				<span class="sr-only aria-expanded-false-text"><?php esc_html_e( 'Open the menu', 'beapi-frontend-framework' ); ?></span>
+				<span class="sr-only aria-expanded-true-text"><?php esc_html_e( 'Close the menu', 'beapi-frontend-framework' ); ?></span>
 			</button>
 
 			<nav id="menu" class="header__menu" aria-label="<?php esc_attr_e( 'Main navigation', 'beapi-frontend-framework' ); ?>" role="navigation">

inc/Helpers/Custom_Menu_Walker.php

@@ -24,7 +24,8 @@ public function start_el( &$output, $item, $depth = 0, $args = [], $id = 0 ) {
 			$sub_menu_id = 'header-sub-menu-' . $item->ID;
 
 			$output .= '<button class="header__sub-menu-toggle" type="button" aria-expanded="false" aria-controls="' . esc_attr( $sub_menu_id ) . '">';
-			$output .= esc_html__( 'Toggle menu', 'beapi-frontend-framework' );
+			$output .= sprintf( '<span class="aria-expanded-false-text">%s</span>', esc_html__( 'Open menu', 'beapi-frontend-framework' ) );
+			$output .= sprintf( '<span class="aria-expanded-true-text">%s</span>', esc_html__( 'Close menu', 'beapi-frontend-framework' ) );
 			$output .= '</button>';
 			$output .= sprintf( '<div id="%s" class="header__sub-menu %s"><div>', esc_attr( $sub_menu_id ), esc_attr( 'header__sub-menu-level-' . $depth ) );
 			$output .= '<ul>';

src/scss/04-utilities/_aria.scss

@@ -0,0 +1,11 @@
+[aria-expanded="false"] {
+	.aria-expanded-true-text {
+		display: none !important;
+	}
+}
+
+[aria-expanded="true"] {
+	.aria-expanded-false-text {
+		display: none !important;
+	}
+}

src/scss/04-utilities/utilities.scss

@@ -6,3 +6,4 @@
 @import "./container";
 @import "./sr-only";
 @import "./js-animation";
+@import "./aria";