aria tag gets removed entirely on "false"

[warrebuysse]

When you use a screenreader to visit an accordion (dropdown) you need the aria-expanded to be "false" on init. Vue automatically removes the aria-expanded tag entirely when false. Is there a way to keep the aria-expanded tag with a "false" value.

<button type="button" class="bl-panel__header bl-panel__header--has-action" @click.prevent="isOpened1 = !isOpened1" :aria-expanded="isOpened1" aria-controls="dropdown-1">
        <span aria-hidden="true" class="bl-panel__header__toggle vi vi-u-badge vi-u-badge--small vi-arrow vi-u-90deg" :class="{'bl-panel__header__toggle--reverse': !isOpened1}"></span>
        <div class="bl-panel__header__content">
          <h1 class="bl-panel__header__content__title">
            Call to action (button)
          </h1>
          <h2 class="bl-panel__header__content__subtitle">
            Schoolabonnementen
          </h2>
        </div>
      </button>

:aria-expanded="isOpened1" is removed on false.

[vue-bot]

Hello, your issue has been closed because it does not conform to our issue requirements. Please use the Issue Helper to create an issue - thank you!

[yyx990803]

If you want to keep it, use a string "false" instead of a boolean false.

[warrebuysse]

@yyx990803 that doesn't work as the "false" argument is a variable.

[ktsn]

You can stringify your variable.

:aria-expanded="String(isOpened1)"

[warrebuysse]

@ktsn Genius! Thanks!