Collapsible navigation sidebar and Bootstrap Dropdown, are these similar?
This is a control panel for administrators. The collapsible sidebar you see below contains links to other pages related to administration.
This image shows me navigating with the TAB key, demonstrating that the TAB order is not messed up. The button is right before the collapsible sidebar.
When the collapsible target element is transitioned in or out of the screen, it is made visible or hidden with the display property. This means that the navigation links are only accessible after using the toggle button. This is very similar to Bootstrap's Collapse component, but it's my code.
Another thing it does is toggle the value of aria-expanded. The attribute aria-controls points to the target collapsible element.
So far so good, right? But I've been thinking... isn't this menu of the same kind as the Bootstrap Dropdown you see to the top-right corner?
- Both toggle the display of something.
- Both cause that something to 'popup' on the screen.
- Both toggles are buttons. They execute JavaScript when activated. It's not like a list of links that is always accessible by keyboard and that slides into view when you hover over an element.
The Bootstrap Dropdown component, in addition to what my menu also implements, uses the attribute aria-haspopup and provides keyboard navigation between menu items using the arrow keys. The ESC key closes it. Finally, when focus leaves the toggle or the popup menu, it is collapsed/closed.
So the question is, should I treat my collapsible menu the same as a Bootstrap Dropdown? That would mean implementing all of the dropdown's accessibility features.