9a898495ac
Back in commit c6f0a3761, we replaced the link to sign out with a
button. However, this button is a child of a data-responsive-menu
dropdown element. Since Foundation adds the `menubar` role to responsive
menus, its children are supposed to have a `menuitem` role. So we're
adding it.
Note we're adding the role with JavaScript because, when JavaScript is
disabled, Foundation won't change the `responsive-menu` role to
`menubar`. So we can't have a `menuitem` in this case.
Axe was reporting the following issue:
```
Found 1 accessibility violation:
1) aria-required-children: Certain ARIA roles must contain
particular children (critical)
https://dequeuniversity.com/rules/axe/4.11/aria-required-children?application=axeAPI
The following 1 node violate this rule:
Selector: .account-menu
HTML: <ul class="account-menu menu dropdown"
data-responsive-menu="medium-dropdown" role="menubar"
data-dropdown-menu="cabp3q-dropdown-menu"
data-mutate="ph8tvp-responsive-menu">
Fix any of the following:
- Element has children which are not allowed: button[tabindex]
```
9 lines
177 B
JavaScript
9 lines
177 B
JavaScript
(function() {
|
|
"use strict";
|
|
App.AccountMenu = {
|
|
initialize: function() {
|
|
$(".account-menu > li > form button").attr("role", "menuitem");
|
|
}
|
|
};
|
|
}).call(this);
|