keyboard support

[OlivierNourry]

(tried only on the demo page: "simple" and "responsive" buttons) When activated with keyboard only (tabbing then pressing Enter), the menu opens but the focus remains on the opening button. It is possible to tab to the menu, but since the element is placed at the end of the DOM, it requires from the user to tab until the end of the page. Meh. You may apply these guidelines from the W3C/WAI: https://www.w3.org/WAI/PF/aria-practices/#menubutton they describe expected behavior of components defined as menubuttons through code and visual aspect.

[artberri]

Thank you @OlivierNourry You are right, I'll take a look and I'll try to make it accessible, I can not give you a due date, sorry.

[robincornett]

I've used this function in my sidr-related js to get keyboard nav/tabbing to work:

    /**
     * add keyboard navigation to the panel
     * @param  mainmenuButton main menu button
     *
     */
    function _a11y( mainmenuButton ) {
        var navEl     = $( cssSelectors.sidr ),
            items     = navEl.children(),
            firstItem = items.first(),
            lastItem  = items.last();

        /* Thanks to Rob Neu for the following code,
         all pulled from the Compass theme. */
        // Add some attributes to the menu container.
        navEl.attr( { tabindex: '0' } ).focus();
        // When focus is on the menu container.
        navEl.on( 'keydown.sidrNav', function ( e ) {
            // If it's not the tab key then return.
            if ( 9 !== e.keyCode ) {
                return;
            }
            // When tabbing forwards and tabbing out of the last link.
            if ( lastItem[ 0 ] === e.target && !e.shiftKey ) {
                mainmenuButton.focus();
                return false;
                // When tabbing backwards and tabbing out of the first link OR the menu container.
            }
            if ( ( firstItem[ 0 ] === e.target || navEl[ 0 ] === e.target ) && e.shiftKey ) {
                mainmenuButton.focus();
                return false;
            }
        } );
        // When focus is on the toggle button.
        mainmenuButton.on( 'keydown.sidrNav', function ( e ) {
            // If it's not the tab key then return.
            if ( 9 !== e.keyCode ) {
                return;
            }
            // when tabbing forwards
            if ( mainmenuButton[ 0 ] === e.target && !e.shiftKey ) {
                firstItem.focus();
                return false;
            }
        } );
    }

(If this is helpful)

[jigarius]

I am implementing the exact thing in the Drupal integration that I did for this plugin and I would like to add some more points:

• When a sidr is closed, it should also be display: none. This will prevent the users from cycling through sidr elements even though the sidr is hidden. Currently the sidr hides only using CSS to go outside the screen.