Bind boolean values to accessibility attributes

[JohnmarkBeaty]

What problem does this feature solve?

As you know, Vue currently removes HTML attributes bound to a boolean that evaluates to false.

Currently <div :checked="false"></div> renders as <div></div>. Perfect.

However, this does not work well for aria attributes. Per spec, many aria attributes need to have values set to false for screen readers.

Ideally
<div :aria-expanded="false"></div> renders to <div aria-expanded="false"></div>

This fiddle demonstrates the desired output and my current workaround.

While :aria-expanded="expanded ? expanded : 'false'" works, it gets messy with multiple aria attributes. I know I could also use strings, but that feels even messier and more hackish to me.

What does the proposed API look like?

The easiest way I can think of fixing this is with a .boolean Modifier.

<div :aria-expanded.boolean="falseBool"></div> renders to <div aria-expanded="false"></div>

Thoughts or guidance?

[yyx990803]

If your values are always booleans, you can just do :aria-expanded="String(expanded)". This is more explicit IMO. Having to include a whitelist for aria attributes is impractical, while a modifier seems unnecessary when you can just cast yourself.

[stowball]

What if null and undefined were the only values that removed the attribute entirely? Then we wouldn't have to litter our code with this "hack" everywhere (which I forget to do a lot, thus inadvertently punishing screenreader users).

Is there potential for this behaviour to change for v3?

[adambloomer]

If your values are always booleans, you can just do :aria-expanded="String(expanded)".

@yyx990803 Is this documented in the vue Docs anywhere? I have tried to search for it but can't find any mention of this. Thanks.

[Josh68]

If your values are always booleans, you can just do :aria-expanded="String(expanded)".

@yyx990803 Is this documented in the vue Docs anywhere? I have tried to search for it but can't find any mention of this. Thanks.

I agree that this could be made explicit in the docs. It's just a matter of the binding value (which generally looks like a string) actually being an expression. Doesn't help that you can actually get away with doing :attribute=value or :attribute="value" -- it's a bit confusing (to me, at least) that this works with or without quotes.

reference

In the case of boolean attributes, where their mere existence implies true, v-bind works a little differently. In this example:

<button v-bind:disabled="isButtonDisabled">Button</button>

If isButtonDisabled has the value of null, undefined, or false, the disabled attribute will not even be included in the rendered element.

The last sentence could add the value of 'false', and show the workaround of casting by doing v-bind:aria-expanded="String(isElementExpanded)". This is important for attributes that should always be rendered.