cc-button: focus is lost when set to disabled

[florian-sanders-cc]

Context

We have decided that the native button within the <cc-button> component should remain focusable while the component is disabled.
This is done by using aria-disabled instead of disabled on the <button> element.

Unfortunately, Chrome considers the focus to be lost as soon as we set the component to disabled.
This seems to be caused by a clash with the native disabled attribute / prop.

Even though Chrome should not do that, we should change the attribute / prop and we should enforce never using native attributes as props for our components (see # TODO edit to link to the separate issue).

Edit: the issue is only present when dealing with formAssociated components as you can see with this minimal reproduction (https://jsbin.com/munohafoqa/1/edit?html,css,js,output).
It does make sense because formAssociated elements are recognized as actual form elements and chrome removes focus from disabled elements (this is why we have decided not to disable the native <button> element within the component and use aria-disable instead).

Moving away from disabled attributes means that disabled custom elements will now participate in forms and _internals.willValidate() will be true.
We could remove form data entries when a component is disabled _internals.setFormValue(null) but this is not great + we would need to change what willValidate exposes (instead of directly exposing _internals.willValidate, we would have to expose whether it's disabled or willValidate. All of this is not great because the abstract class that handles form controls does not know of the disabled (or isDisabled property).

Decision & TODO

• In cc-button add a console.error()when bothdisabledandwaiting` are used at the same time,
• Fix cases where both disabled and waiting are used at the same time,
• Create an issue on Chrome bug tracker with the minimal reproduction.

[pdesoyres-cc]

We also have the problem on cc-input-* components in the following scenario:

• user fills a cc-input-text
• user type the Enter key to validate the form
• an event is sent to a smart component
• the smart changes the state so that the input becomes disabled => the focus is lost
• the smart calls the API
• the smart changes the state so that the input go back to enabled. But this is too late, the focus was already lost.

[florian-sanders-cc]

@pdesoyres-cc nice catch, it makes sense that we have the same issue with other form elements (should only happen with form elements because that's the only place disabled may clash with native).

Let's discuss this next week?