False value cause aria boolean attributes to be removed from the DOM

Version

2.6.11

Reproduction link

https://www.dropbox.com/s/3ltqeent65djedw/problematic-false-aria-values.zip?dl=0

Steps to reproduce

1. Extract the provided zip archive and enter the produced “problematic-false-aria-values” directory.
2. Install dependencies (i.e. yarn install).
3. Run the development server (i.e. yarn serve) and head to its url with your favorite browser.
4. Inspect the DOM of the page: the aria-checked and aria-expanded attributes won’t be there.
5. Enable the checkbox and/or expand the toggle.
6. Inspect the DOM of the page: this time both aria-checked and aria-expanded will be there as expected.
7. Disable the checkbox and collapse the toggle.
8. Inspect the DOM of the page: the aria-checked and aria-expanded attributes won’t be there, again.

What is expected?

Aria attributes should be present in the DOM even if their value is false.

What is actually happening?

Aria attributes are not present in the DOM when their value is false.

---

Unlike for html 5 boolean values, removing aria attributes from the DOM when their value is false changes the page semantics and degrades its accessibility, causing markup validation issues as well.

[LinusBorg]

I didn’t check out the repro as i don’t have access to dropbox.

But:

• A value of false is the only way to tell Vue to actually remove an attribute - which you may also want to do with an aria attribute in some situtions.
• aria-checkedvalues (like all html attribute values) are strings, not booleans: 'true' and 'false', respectively, so you have to set them as strings:

v-bind:aria-checked="checked ? 'true' : 'false'"

I don’t think it makes sense to have aria attributes behave differently than other html attributes in this regard.

Also, we need a way to tell Vue “remove that attribute”, which is setting it to false.

We’re aware that this works a bit differently than vanilla js: setAttribute('aria-checked', false) will set the attribute to aria-checked="false". But so will it do for checked or any other element:

el.setAttribute('aria-selected', false)
<div aria-selected="false">

el.setAttribute('checked', false)
<div aria-selected="false" checked="false">

el.setAttribute('placeholder', false)
<div aria-selected="false" checked="false" placeholder="false">

So Vue treats false differently, but it does so consistently and for a reason.

[LinusBorg]

Vue can’t know which custom attribute of a web component is meant to be a boolean attribute (as opposed to actual HTML attributes wich are defined as being boolean or not ion the spec). So we treat custom attributes as non-boolean attributes.

But: Most Web component implementations sync custom attributes to DOM properties and vice versa (see here).

For web components that do this, the described problem doesn’t really exist, in my experience: When Vue can find a DOM property named booleanAttribute (as per your example above), it will use that to set it (el.booleanAttribute = false), instead of setting the attribute (el.setAttribute('boolean-attribute', false)).

This way, there is no special treatment necessary - the web component will receive a plain boolean value through the DOM property and can decide how to deal with it (remove the attribute, or set it with a stringified value) according to how it defined that property’s type.

You seem to be using a web component implementation that doesn’t do this, which is unfortunate for for this specific case.