Drop down menu not showing with aria

Question

I have a dropdown menu that is supposed to show up when you click on the user profile name but it's not doing it for some reason. It will only show if I add "aria-expanded="true". Can someone help?

This is in my HBS

{{#if signed_in}}
  <div class="user-info dropdown" >
    <button class="dropdown_toggle" aria-haspopup="true">
      {{user_avatar class="user-avatar"}}
        {{user_name}}
      <span>
        <svg xmlns="IMAGELINK" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="dropdown-chevron-icon" aria-hidden="true">
          <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
        </svg>
      </span>
    </button>
    <div class="dropdown-menu" role="menu" aria-expanded="true">
      {{#my_profile role="menuitem"}}{{t 'profile'}}{{/my_profile}}
      {{link "requests" role="menuitem"}}
      <div class="separator" role="separator"></div>
      {{link "sign_out" role="menuitem"}}
    </div>
  </div>
{{/if}}

This is my script

 // Dropdowns

function Dropdown(toggle, menu) {

this.toggle = toggle;
this.menu = menu;

this.menuPlacement = {
  top: menu.classList.contains("dropdown-menu-top"),
  end: menu.classList.contains("dropdown-menu-end")
};

this.toggle.addEventListener("click", this.clickHandler.bind(this));
this.toggle.addEventListener("keydown", this.toggleKeyHandler.bind(this));
this.menu.addEventListener("keydown", this.menuKeyHandler.bind(this));

This is my HTML

    .dropdown-menu {
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    display: none;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    left: 0;
    margin-top: 1px;
    min-width: 170px;
    padding: 10px 0;
    position: absolute;
    text-align: left;
    z-index: 1000;
  }

  [dir="rtl"] .dropdown-menu {
    text-align: right;
  }

  .dropdown-menu[aria-expanded="true"] {
    display: block;
  }

Answer 1

It's unclear where your JavaScript comes from, but it has errors that should get fixed.

What's happening is that the CSS code makes it so that the menu is only visible if it has the aria-expanded="true" attribute, via an attribute selector

.dropdown-menu {
  display: none;
}
.dropdown-menu[aria-expanded="true"] {
    display: block;
}

The JavaScript then should toggle that attribute on button click. Probably there's an error in your JavaScript that is not setting this attribute correctly.

Try to open up your browser developer tools, inspect the menu element, click on the button, and try to observe what changes.

Errors in the current implementation

I believe it to be a great idea to base CSS onARIA attributes . These attributes communicate element's meaning and status to assistive technology, that users with disabilities rely on to use web applications. Binding CSS to these attributes makes the approach ARIA-first.

But, in this case, this is a wrong implementation of aria-expanded .

It's a common misconception that the attribute would be placed on the expanded element, but actually it has to go on the toggle button.

The simplest way to hide the menu then, is by means of the hidden attribute .

Also, the value of haspopup needs to match the role of the popup, which is menu in this case.

<button class="dropdown_toggle" aria-expanded="false" aria-haspopup="menu">…</button>
<div class="dropdown-menu" role="menu" hidden>

The JavaScript then will need to manage ARIA attributes on both elements, like so:

clickHandler: () => {
  this.toggle.setAttribute('aria-expanded', !this.menu.toggleAttribute('hidden'));
}

Try to find a similar piece of code in your case.

What's also weird is the binding to the keydown event, since <button> will automatically fire a click event if users activate it by means of keyboard.