Add menuitem role to sign out button
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]
```
This commit is contained in:
8
app/assets/javascripts/account_menu.js
Normal file
8
app/assets/javascripts/account_menu.js
Normal file
@@ -0,0 +1,8 @@
|
||||
(function() {
|
||||
"use strict";
|
||||
App.AccountMenu = {
|
||||
initialize: function() {
|
||||
$(".account-menu > li > form button").attr("role", "menuitem");
|
||||
}
|
||||
};
|
||||
}).call(this);
|
||||
@@ -117,6 +117,7 @@
|
||||
//= require budget_edit_associations
|
||||
//= require budget_hide_money
|
||||
//= require datepicker
|
||||
//= require account_menu
|
||||
//= require authenticity_token_refresh
|
||||
//= require_tree ./admin
|
||||
//= require_tree ./polls
|
||||
@@ -181,6 +182,7 @@ var initialize_modules = function() {
|
||||
App.PollsForm.initialize();
|
||||
App.SDGRelatedListSelector.initialize();
|
||||
App.SDGManagementRelationSearch.initialize();
|
||||
App.AccountMenu.initialize();
|
||||
App.AuthenticityTokenRefresh.initialize();
|
||||
App.CookiesConsent.initialize();
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user