Use a list of links to change group in budgets wizard
The original implementation (which was never merged) had a `<select>` field for the switch, which offered accessibility issues. So I came up with a very bad idea, which was emulating the look and feel of a select field while making it more accessible for keyboard users. This approach is inconvenient because we were using a bunch of ARIA roles to do the same thing that can be done with a list of links, going against the first rule of ARIA, which is: > "Don’t use ARIA if you can achieve the same semantics with a native > HTML element or attribute Not only that, but the control was confusing for people using mobile phones (select fields don't behave the same way), and we were using *invalid* ARIA roles in this situation, leading Axe to report a critical accessibility error: ``` aria-required-children: Certain ARIA roles must contain particular children (critical) https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI The following 1 node violate this rule: Selector: ul[data-dropdown-menu="edw1i2-dropdown-menu"] HTML: <ul class="dropdown menu" wnenu="edw1i2-dropdown-menu" data-disable-hover="true" op="true" role="menubar"> Fix any of the following: - Element has children which are not allowed: button[tabindex] ``` So, at least for now, we're using a simple list of links. We might style it in the future if we find ways to make usability improvements, but, for now, it does the job, and it does it better than the custom control we were using.
This commit is contained in:
@@ -7,15 +7,16 @@
|
||||
</p>
|
||||
<% else %>
|
||||
<p><%= currently_showing_text %></p>
|
||||
<ul class="dropdown menu" data-dropdown-menu data-disable-hover="true" data-click-open="true">
|
||||
<li class="has-submenu">
|
||||
<button type="button"><%= t("admin.budget_headings.group_switcher.different_group") %></button>
|
||||
<ul class="menu" data-submenu>
|
||||
<% other_groups.each do |other_group| %>
|
||||
<li><%= link_to other_group.name, headings_path(other_group) %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</li>
|
||||
<ul>
|
||||
<% other_groups.each do |other_group| %>
|
||||
<li>
|
||||
<%= link_to sanitize(t(
|
||||
"admin.budget_headings.group_switcher.the_other_group",
|
||||
group: tag.strong(other_group.name)
|
||||
)),
|
||||
headings_path(other_group) %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user