It is not possible to remove the role attribute which results in invalid HTML

[SantosGuillamot]

• Check if updating to the latest Preact version resolves the issue

Describe the bug
It seems impossible to toggle between having a role attribute (dialog for example) and removing the attribute. For example, I want to have a role="dialog" when a menu is open, but remove the role attribute when it is closed. It currently returns an empty value. This affects accessibility because having an empty role is not valid HTML. You can check that using an HTML validator:

This seems to be the behavior in Preact with the following options:

• Using null: It keeps the role attribute in the element.
• Using an empty string: It keeps the role attribute in the element.
• Using false: It sets role="false".

I also tried using another role value as none, but it changes the accessibility tree.

I made a quick video using this CodeSandbox explaining that better:

Sandbox.-.CodeSandbox.-.19.September.2023.mp4

I've tested it in React, and it seems possible to remove the role attribute by using null. I used this other CodeSandbox as shown in this other video:

React.App.-.19.September.2023.mp4

To Reproduce

Preact behavior

Using this CodeSandbox, toggle between the different options to see how the role attribute of the div containing the <pre> element changes.

React behavior

Using this CodeSandbox, toggle between the different options to see how the role attribute of the div containing the <pre> element changes.

Expected behavior
It should be possible to remove the role attribute as it happens in React.

[rschristian]

Interestingly, your Preact sandbox seems to work as you'd expect in FireFox (false and null both cause removal). Can reproduce what you show in Chrome.

Edit: Ah, FF doesn't add it (role) to the DOM, while Chrome does.

[DAreRodz]

Edit: Ah, FF doesn't add it (role) to the DOM, while Chrome does.

Exactly; most browsers seem to have implemented the properties defined in the ARIAMixin interface, whereas Firefox hasn't implemented them yet.

Examples:

• role (https://caniuse.com/mdn-api_element_role)
• ariaAtomic (https://caniuse.com/mdn-api_element_ariaatomic)
• ariaAutoComplete (https://caniuse.com/mdn-api_element_ariaautocomplete)
• ariaBusy (https://caniuse.com/?search=ariaBusy)
• ...

[DAreRodz]

In the browsers where Element.role exists, this condition inside setProperty becomes true:

preact/src/diff/props.js

Line 126 in 7dc66bc

name in dom

That makes Preact assign an empty string to Element.role when the following line is reached shortly after:

preact/src/diff/props.js

Line 129 in 7dc66bc

dom[name] = value == null ? '' : value;

However, the value assigned in this case should be null instead.

Maybe the fix is just a matter of adding another check above? Like those for width, height, href, list, etc.? 🤔

[marvinhagemeister]

@DAreRodz That analysis is spot on. Feel free to make a PR that adds it to the list (+ a test) 👍

[DAreRodz]

Thanks @marvinhagemeister! I've created this PR, ready for review. 😄

• fix: remove role attribute when it's null or undefined #4137