aria-disabled='true' could still be applied, which could be used as styling attribute and helps sreenreaders to know that this button is disabled. See e.g. Aria-disabled or How can I make a disabled button focusable, clickable, in general “interact-able”?

Actually, unless I'm mistaken, we don't even have to remove the disabled attribute on the root element, as that has no effect on custom elements.

Yes, we still need to keep disabled for styling and to ensure that e.g. setDisableOnClick(true) works as expected.
Also, we need to ensure that click events would not fire on disabled elements (maybe stop propagation for them).

This issue would also be relevant for vaadin-tooltip as users might want to use it with disabled components:

• V23.3: Tooltip does not show up when the component is disabled flow-components#4393
• CheckBox in disabled state does not show title and tooltip flow-components#4455

The current workaround would be to wrap disabled component in a different element and set a tooltip for it.

Just noting, that e.g. with buttons, it is possible to override the style using this in styles.css

vaadin-button[disabled] {
   pointer-events: auto;
}

it is possible to override the style using this in styles.css

An unwanted side-effect of that is that disabled button will then apply :hover and [active] styles, making them appear clickable.

Just noting, that e.g. with buttons, it is possible to override the style using this in styles.css

Horrible UX (open/close flicker) with Select as well, so not a generically viable solution.

Having said that. @TatuLund 's idea seems to work really well for one customer of mine. They claim they have tested a huge range of components with the events enabled along the implementation above. Only Select, for them, exposed an unwanted flicker. Maybe an implementation with pointer events being enabled is not as hard as we think (bar the testing).

From what I can tell, the following would need to be done to make disabled buttons focusable and hoverable:

• Introduce a feature flag for enabling tabindex and pointer-events changes below to avoid affecting existing applications (other changes should be safe without flag)
• Remove tabindex="-1" allowing the button to receive focus
• Remove pointer-events:none allowing the button to react to hover
• Suppress active state styling when disabled
• Set cursor: not-allowed cursor when disabled
• Add logic to prevent pointer and keyboard clicks when disabled
• Add documentation (Button docs page, setEnabled javadoc and disabled jsdoc)
• Test on big 3 screen readers that the disabled buttons are focusable and correctly announced as disabled
• Test that Tooltips and focus/hover-triggered Popovers work normally on disabled buttons

The disabled attribute can be retained, as it should not affect focusability or screen reader accessibility on its own (since the button is a custom element).