Drop down menu not showing with aria

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;
  }