Dropdown menu briefly shown on page load

[r-a-y]

Describe the bug When the page hasn't fully loaded, the dropdown menu can be visible.

To Reproduce Steps to reproduce the behavior:

1. Load the demo page - https://davidetriso.github.io/aria-dropdown/
2. You can view the menu for a split second or two.

Expected behavior The dropdown menu should not be visible unless it has focus.

Additional context I have the following CSS fix in a testing environment:

.dropdown__menu {
  /* hide offscreen for accessibility */
  position: absolute;
  left:-10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* show menu when expanded */
.dropdown__menu_expanded {
  left: auto;
  width: auto;
  height: auto;
  overflow: auto;
}

The "moving content offscreen" technique is from the WebAIM article - "Invisible Content Just for Screen Reader Users": https://webaim.org/techniques/css/invisiblecontent/

I'm not sure if this is the proper technique for menus. CSS Tricks has the following article on dropdown menus: https://css-tricks.com/solved-with-css-dropdown-menus/

They are using simply visibility: hidden and display: none. I don't necessarily think "display: none" is the best approach there. Would welcome your thoughts.

Also worth noting from the comments section of the CSSTricks article are the following attempts at addressing accessible dropdown menus:

• https://www.ajsaucier.com/accessibility/2018/06/13/accessible-keyboard-navigation.html
• https://github.com/Heydon/inclusive-menu-button (article explaining the approach)

[DavideTriso]

Hello @r-a-y and tank you for reporting the issue.

In my opinion the offscreen technique is not appropriate, because the dropdown menu must be hidden also to assistive technologies when collapsed.

Using display: none or visibility: hidden is the easiest and appropriate way to hide the menu and avoid the flashing on page load.

Unfortunately this css properties cannot be directly added to the .dropdown__menu class because:

• display: none will break the plugin functionality when cssTransitions is set to true,
• visibility: hidden will break the plugin functionality when cssTransitions is false and the slide-down and slid-up animations are handled by jQuery,
• with both of them the dropdown's menu would not be accessible when JS is disabled.

A possible solution would be to add a class (e.g. .dropdown_nojs) to the dropdown to position it offscreen (like in your example) and let the plugin remove it right after initialisation.