issue-1051: added accessibility helpers

[oliverfoster]

#1051

• added a11y_attrs_heading(level) - for defining header attributes correctly

<div class="menu-title-inner h1 accessible-text-block" role="heading" aria-level="1" tabindex="0">
{{{displayTitle}}}
</div>

<div class="menu-title-inner h1 accessible-text-block" {{{a11y_attrs_heading 1}}}>
{{{displayTitle}}}
</div>

• added a11y_attrs_tabbable - for defining tabbable attributes correctly

<div class="menu-title-inner h1 accessible-text-block" role="region" tabindex="0">
{{{displayTitle}}}
</div>

<div class="menu-title-inner h1 accessible-text-block" {{{a11y_attrs_tabbable}}}>
{{{displayTitle}}}
</div>

• added a11y_aria_label - for defining aria labels correctly, for entry to a region, always appears at the top of a section
• added a11y_aria_label_relative - for defining relatively positioned aria labels correctly, like at the bottom of pages or menus

<div class="menu-container" role="region" aria-label="{{_globals._menu._boxmenu.ariaRegion}}">

    <div class='menu-container-inner box-menu-inner clearfix'>

    </div>
    <div class="aria-label relative prevent-default" tabindex="0" role="region">{{_globals._menu._boxmenu.menuEnd}}</div>
</div>

<div class="menu-container">
    {{{a11y_aria_label _globals._menu._boxmenu.ariaRegion}}}

    <div class='menu-container-inner box-menu-inner clearfix'>

    </div>
    {{{a11y_aria_label_relative _globals._menu._boxmenu.menuEnd}}}
</div>

• added a11y_wrap_focus - for defining where focus should wrap around to the beginning of the section, like drawer bottom, page/menu bottom etc

<div class="page-inner article-container" role="main" aria-label="{{_accessibility._ariaLabels.page}}">
</div>
{{{a11y_wrap_focus}}}

[lc-thomasberger]

+1

[tomgreenfield]

Do we need the a11y-ignore-focus class on all the helpers?

[guywillis]

+1

[moloko]

are these all going to be documented somewhere?

[oliverfoster]

Yes @moloko i'm going to update the core handlebars and add some behaviour for a11y_wrap_focus first.

[tomgreenfield]

+1

[moloko]

+1