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:
Javi Martín
2025-11-07 15:31:26 +01:00
parent b896fc4bba
commit 9a898495ac
2 changed files with 10 additions and 0 deletions

View File

@@ -0,0 +1,8 @@
(function() {
"use strict";
App.AccountMenu = {
initialize: function() {
$(".account-menu > li > form button").attr("role", "menuitem");
}
};
}).call(this);

View File

@@ -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();
};