WAI-ARIA for CMSimple_XH

Discussions and requests related to new CMSimple features, plugins, templates etc. and how to develop.
Please don't ask for support at this forums!
Post Reply
Termin
Posts: 101
Joined: Thu Jan 27, 2011 8:55 am
Contact:

WAI-ARIA for CMSimple_XH

Post by Termin » Sat Oct 24, 2015 12:37 pm

HI Community,
Please help make the menu control with the keyboard

http://www.w3.org/TR/wai-aria-practices/#menu
http://heydonworks.com/practical_aria_e ... bar-widget

Code: Select all

<nav id="touch_nav">
       
    <ul itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" class="menulevel1" role="menubar" aria-label="Menu page">
        <li class="doc" role="presentation">
           <a href="/?" itemprop="url" role="menuitem" aria-haspopup="true" tabindex="-1">
           <span itemprop="name">Page</span></a>
        </li>
        <li class="sdoc" role="presentation">
           <a href="/?" itemprop="url" role="menuitem" aria-haspopup="true" tabindex="0">// Active!
           <span itemprop="name">Page2</span></a>
        </li>
        <li class="doc" role="presentation">
           <a href="/?" itemprop="url" role="menuitem" aria-haspopup="true" tabindex="-1">
           <span itemprop="name">Page3</span></a>
        </li>
        <li class="doc" role="presentation" aria-haspopup="true">
           <a href="/?" itemprop="url" role="menuitem" tabindex="-1">
           <span itemprop="name">Page_Submenu</span></a>
           
            <ul itemscope="itemscope" class="menulevel2" role="menu" aria-hidden="true" aria-expanded="false" aria-label="Menu subpage" tabindex="0">
                <li class="doc" role="presentation">
                   <a href="/?" itemprop="url" role="menuitem" tabindex="-1">
                   <span itemprop="name">Subpage1</span></a></li>
                <li class="doc" role="presentation">
                   <a href="/?" itemprop="url" role="menuitem" tabindex="-1">
                   <span itemprop="name">Subpage2</span></a>
                </li>
            </ul>
        </li>
                    <li class="doc" role="presentation">
                        <a href="/?" itemprop="url" role="menuitem" aria-haspopup="true" tabindex="-1">
                        <span itemprop="name">Other Page</span></a>
                    </li>
    </ul>
</nav>
Right arrow: Next menubar item
Left arrow: Previous menubar item

Termin
Posts: 101
Joined: Thu Jan 27, 2011 8:55 am
Contact:

Re: WAI-ARIA for CMSimple_XH

Post by Termin » Fri Oct 30, 2015 2:52 pm

It is not clear why the page does not switch?

Code: Select all

var $container = '#touch_nav';
$($container +' ul').attr('role','menubar');
$($container +' [role="menubar"] li').attr('role','presentation');
$('[role="menubar"] a').attr({
    'role' : 'menuitem',
    'tabindex' : '-1'
});
$('[role="menubar"] a').each(function() {
  $(this).attr(
    'aria-controls', $(this).attr('href').substring(1)
  );
});

$('[role="menubar"] li:first-child a').attr({
    'aria-haspopup' : 'true',
    'tabindex' : '0' 
});

$('[role="menuitem"]').on('keydown', function(e) {

  var $original = $(this);
  var $prev = $(this).parents('li').prev().children('[role="menuitem"]');
  var $next = $(this).parents('li').next().children('[role="menuitem"]');
  var $target;

  switch (e.keyCode) {
    case 37:
      $target = $prev;
      break;
    case 39:
      $target = $next;
      break;
    default:
      $target = false
      break;
  }

  if ($target.length) {
      $original.attr({
        'tabindex' : '-1',
        'aria-selected' : null
      });
      $target.attr({
        'tabindex' : '0',
        'aria-selected' : true
      }).focus();
  }

  $('#' + $(document.activeElement).attr('href').substring(1))
    .attr('aria-hidden', null);

});

$('[role="menuitem"]').on('click', function(e) {

  e.preventDefault();

  $('[role="menuitem"]').attr({
    'tabindex': '-1',
    'aria-selected' : null
    });

  $(this).attr({
    'aria-selected' : true,
    'tabindex' : '0'
  });

  $($container +' [role="menubar"]').attr('aria-hidden', 'true');

  $('#' + $(this).attr('href').substring(1))
    .attr('aria-hidden', null);

});

Post Reply