UI state / Toolbar navigation menu

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.

1 Like


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

1 Like

@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?

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

1 Like


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

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