@hilemangroup/bp-frontend
Version:
Common shared frontend utilities for boilerplate projects
245 lines (231 loc) • 6.09 kB
Markdown
# jquery.accessible-menu.js
> A keyboard accessible navigation menu.
## Usage
Create your nav menu using an unordered list.
```html
<div class="navbar">
<ul>
<li>
<a href="#">Services</a>
<ul>
<li>
<a href="#">Demand Generation</a>
<ul>
<li><a href="#">Inbound-Marketing</a></li>
<li><a href="#">Content-Marketing</a></li>
<li><a href="#">Analytics</a></li>
</ul>
</li>
<li><a href="#">Marketing Automation</a></li>
<li><a href="#">Technology Services</a></li>
<li><a href="#">Video</a></li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
```
Initialize the menu and pass in additional settings.
```js
$('.navbar').accessibleMenu({
openOnTab: false
});
```
## Settings
<table>
<thead>
<tr>
<th>
Name
</th>
<th>
Type
</th>
<th>
Default
</th>
<th>
Description
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
hoverClass
</td>
<td>
string
</td>
<td>
<code>'hover'</code>
</td>
<td>
CSS class added to <code>li</code> element when sub-menu contains hover.
</td>
</tr>
<tr>
<td>
focusClass
</td>
<td>
string
</td>
<td>
<code>'focus'</code>
</td>
<td>
CSS class added to <code>li</code> element when sub-menu contains focus.
</td>
</tr>
<tr>
<td>
openClass
</td>
<td>
string
</td>
<td>
<code>'open'</code>
</td>
<td>
CSS class added to <code>li</code> element when sub-menu is open.
</td>
</tr>
<tr>
<td>
enableArrowKeys
</td>
<td>
boolean
</td>
<td>
<code>true</code>
</td>
<td>
Whether or not to allow operation using arrow keys.
</td>
</tr>
<tr>
<td>
openOnTab
</td>
<td>
boolean
</td>
<td>
<code>true</code>
</td>
<td>
Whether or not tab focus should open a sub-menu.
</td>
</tr>
<tr>
<td>
closeOnHover
</td>
<td>
boolean
</td>
<td>
<code>true</code>
</td>
<td>
If hovering on a menu item should cause other sub-menus to close.
</td>
</tr>
<tr>
<td>
menuDirection
</td>
<td>
Array[string]
</td>
<td>
<code>['horizontal', 'vertical']</code>
</td>
<td>
Contains an array of strings that are either <code>'horizontal'</code> or <code>'vertical'</code>. Determines whether menu navigation is vertical or horizontal. Each array item corresponds to a menu-level, the last item will act as a default for deeper levels.
</td>
</tr>
</tbody>
</table>
## Keyboard Support
<table>
<thead>
<tr>
<th>
Key
</th>
<th>
Function
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Enter
</td>
<td>
Opens the link.<br />
Opens the sub-menu if link is not present.<br />
Closes sub-menu if open.
</td>
</tr>
<tr>
<td>
Space
</td>
<td>
Opens the sub-menu.<br />
Closes sub-menu if open.
</td>
</tr>
<tr>
<td>
Tab / Shift + Tab
</td>
<td>
Moves focus to the next/previous visible link.
</td>
</tr>
<tr>
<td>
Down Arrow (on main menu)<br />
Right Arrow (on sub-menu)
</td>
<td>
Opens the sub-menu and moves focus to the first containing link.
</td>
</tr>
<tr>
<td>
Left Arrow (on main menu)<br />
Right Arrow (on main menu)<br />
Up Arrow (on sub-menu)<br />
Down Arrow (on sub-menu)
</td>
<td>
Moves focus to the next/previous visible link.
</td>
</tr>
<tr>
<td>
Escape<br />
Left Arrow (on sub-menu)
</td>
<td>
Closes sub-menu and moves focus to parent menu item.
</td>
</tr>
</tbody>
</table>
This plugin purposefully does not implement `role="menu"`, `aria-haspopup="true"` or similar ARIA roles as these ATs are not intended to describe navigation menus on a website. Additional keyboard functionality is provided solely as a convenience.</p>
### Further reading
- [Building Accessible Menu Systems — Smashing Magazine](https://www.smashingmagazine.com/2017/11/building-accessible-menu-systems/)