Setting tabindex on disabled components

Only a small set of HTML-elements can get the disabled attribute, custom elements like our zui-components can't get the native disabled. To achieve a similar behavior, we use the tabindex attribute. This causes the limitation that it is not possible to change the tabindex when disabled is set. The value of the tabindex will be saved when disabled is set and after removing the attribute this value from the moment where disabled was set is reapplied. When a component is disabled and you try to set the tabindex you will break our disabled behavior.

You can set a tabindex and then disable the element like this:

<zui-button disabled tabindex="-1">
   Click
</zui-button>

When the disabled attribute is removed the value of the tabindex is restored.

This does not work:

<zui-button disabled>
   Click
</zui-button>

<script> 
   document.querySelector('zui-button').addEventListener('click', () => {
       document.querySelector('zui-button').setAttribute('tabindex', '2');
   });
</script>

After clicking the button the tabindex will be changed to '2' (please don't use different tabindexes than '-1' or '0') and disabled will not work anymore. When disabled is removed the initial tabindex (no tabindex) is restored and not the tabindex which was set.