Vue removes aria-attributes that evaluate to false

[obulat]

Description

The search bar in the header of the search page has a role of combobox. It has to have aria-expanded="false" in collapsed state. However, Vue removes the attribute if the values evaluates to false¹.

To overcome this, we must convert the values for boolean aria attributes to strings.

Here are the places where search bar aria-expanded needs to be fixed:

openverse/frontend/src/components/VHeader/VSearchBar/VSearchBar.vue

Line 27 in 2e96028

:aria-expanded="isRecentVisible"

:aria-expanded="`${isRecentVisible}`"

openverse/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue

Line 56 in 2e96028

:aria-expanded="showRecentSearches"

:aria-expanded="`${showRecentSearches}`"

There probably are other places, too, where aria-expanded should be fixed.

Reproduction

Run the lighthouse A11y check on the search page, and you will see this issue reported.

Additional context

Mdn article states that the attribute is mandatory when the combobox is collapsed:

Typically, the initial state of a combobox is collapsed, with aria-expanded="false" set. In the collapsed state, only the combobox element and, optionally a sibling button to invoke the popup, are visible. The aria-expanded, with the value set to false, is required when collapsed, because it indicates to assistive technologies that the widget is expandable.

Footnotes

1. Bind boolean values to accessibility attributes ↩

[dhruvkb]

This was apparently fixed in Vue 3. #411 can't come soon enough.

[obulat]

Closing this issue as the Nuxt 3 migration has fixed it.
However, it is necessary to audit the properties that should be removed instead of having =false value in other components.