+ // Add an ARIA role `button` to elements that behave like UI controls when JavaScript is on.
+ function aria_button_if_js() {
+ $( '.aria-button-if-js' ).attr( 'role', 'button' );
+ }
+
+ $( document ).ajaxComplete( function() {
+ aria_button_if_js();
+ });
+
+ /**
+ * @summary Get the viewport width.
+ *
+ * @since 4.7.0
+ *
+ * @returns {number|boolean} The current viewport width or false if the
+ * browser doesn't support innerWidth (IE < 9).
+ */
+ function getViewportWidth() {
+ var viewportWidth = false;
+
+ if ( window.innerWidth ) {
+ // On phones, window.innerWidth is affected by zooming.
+ viewportWidth = Math.max( window.innerWidth, document.documentElement.clientWidth );
+ }
+
+ return viewportWidth;
+ }
+
+ /**
+ * @summary Set the admin menu collapsed/expanded state.
+ *
+ * Sets the global variable `menuState` and triggers a custom event passing
+ * the current menu state.
+ *
+ * @since 4.7.0
+ *
+ * @returns {void}
+ */
+ function setMenuState() {
+ var viewportWidth = getViewportWidth() || 961;
+
+ if ( viewportWidth <= 782 ) {
+ menuState = 'responsive';
+ } else if ( $body.hasClass( 'folded' ) || ( $body.hasClass( 'auto-fold' ) && viewportWidth <= 960 && viewportWidth > 782 ) ) {
+ menuState = 'folded';
+ } else {
+ menuState = 'open';
+ }
+
+ $document.trigger( 'wp-menu-state-set', { state: menuState } );
+ }
+
+ // Set the menu state when the window gets resized.
+ $document.on( 'wp-window-resized.set-menu-state', setMenuState );
+
+ /**
+ * @summary Set ARIA attributes on the collapse/expand menu button.
+ *
+ * When the admin menu is open or folded, updates the `aria-expanded` and
+ * `aria-label` attributes of the button to give feedback to assistive
+ * technologies. In the responsive view, the button is always hidden.
+ *
+ * @since 4.7.0
+ *
+ * @returns {void}
+ */
+ $document.on( 'wp-menu-state-set wp-collapse-menu', function( event, eventData ) {
+ var $collapseButton = $( '#collapse-button' ),
+ ariaExpanded = 'true',
+ ariaLabelText = commonL10n.collapseMenu;
+
+ if ( 'folded' === eventData.state ) {
+ ariaExpanded = 'false';
+ ariaLabelText = commonL10n.expandMenu;
+ }
+
+ $collapseButton.attr({
+ 'aria-expanded': ariaExpanded,
+ 'aria-label': ariaLabelText
+ });
+ });
+