UI state / Toolbar navigation menu

hayavuk · August 17, 2023, 3:59pm

URL: /
Criterion: 4.1.2 Name, Role, Value (A)

In some cases, we use elements that don’t have a prescribed behavior or their behaviors don’t match the default one. Accessibility tools should still be able to determine and convey the intended behavior to the end user.

The navigation menu in the toolbar does not provide enough information for programmatically determining its function and states.

As we have determined that jQuery should be phased out and replaced by vanilla code that is compatible with React, I have coded up a PoC for the possible fox for the toolbar menu.

You can find the implementation on Codepen.io.

The menu implementation uses the NAV element as the outermost wrapper. This gives the users with advanced accessibility needs a labelled landmark to land on. The menu itself is marked up using the MENU tag. Additionally a custom element UI-DROPDOWN is used to manage the button state.

The PoC implementation uses a button to activate the second level. I also had another idea that doesn’t require any JavaScript. It would expand the second level automatically as the user tabs into it. The problem with this idea is it’s too cool… No, I’m joking. The problem is that the user needs to tab through each and every link without the ability to skip over sections that they don’t care about.

I will integrate this fix into the Indico core once I’m finished with my text fixes.

troun · August 18, 2023, 9:10am

Nice job, I like it! And of course the less jQuery the better…

hayavuk · August 18, 2023, 10:14am

@troun Off the top of your head, do you foresee any issues with integrating that? Maybe some tips on what I should watch out for?

troun · August 18, 2023, 11:58am

I’m not that familiar with that part of the code, so can’t think of anything rn. I can have a look later at the code we have currently and see if there’s anything

hayavuk · August 18, 2023, 12:35pm

Thanks

troun · August 18, 2023, 3:43pm

Doesn’t seem like there’s much to it besides the menu items being provided dynamically:

github.com

indico/indico/blob/495f4b3f541cb300232fb482d2826a78b28cf9f5/indico/web/templates/header.html#L24-L47


      
          <div class="global-menu toolbar">
              {% block global_menu %}
                  {% for item in top_menu_items recursive %}
                      {% if loop.depth0 %}
                          {# we're inside a section #}
                          <li>
                              {% if item.section == 'create-event' and item.url in ('lecture', 'meeting', 'conference') %}
                                  {# special handling for event creation links #}
                                  {{ create_event_link(category, item.url, item.title, id=item.name) }}
                              {% else %}
                                  <a href="{{ item.url }}">{{ item.title }}</a>
                              {% endif %}
                          </li>
                      {% elif not item.is_section %}
                          <a href="{{ item.url }}">{{ item.title }}</a>
                      {% elif item.items %}
                          <a class="arrow js-dropdown" href="#" data-toggle="dropdown">{{ item.title }}</a>
                          <ul class="i-dropdown">
                              {{ loop(item.items) }}
                          </ul>

This file has been truncated. show original

hayavuk · August 18, 2023, 5:23pm

Thanks for looking into it. I’ll take care of it on Monday then, and we’ll see how it goes.