Modify styling when a Tab is disabled.

[eugbyte]

Describe the feature in detail (code, mocks, or screenshots encouraged)

As per title.

It is possible to reduces the opacity of the element, when setting the component to disable={true}.

Similar to the tailwind Button component.

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

Similar to the tailwind Button component.

[endigo9740]

Quick updated on this. I've taken a look at what level of effort would look like to implement this. We'll likely tackle this alongside these planned a11y-focused improvements:

• Fix Svelte 4 a11y warnings #1708

The reason being is that currently the normal Tab component uses an html structure like this:

<label>
    <div>...</div>
</label>

The more appropriate structure for a11y would be something more like this:

<label>
    <button>...</button>
</label>

However, we have a lot of overall tab styling applied via the outer-most element (the label) where as this should likely be applied to the button instead. By doing this, we can likely implement something like this:

<button disabled={prunedRestProps().disabled}>

Otherwise we have to implement this change in multiple places (visually on label; functionally on button). With the small refactor coming from the a11y changes, I think it'll be best to handle all this at once in the near future.

[eugbyte]

The workaround that I have is to manually style the regionTab like so:

        <Tab
		bind:group={tabSet}
		value={-1}
		name="current_location"
		disabled
		regionTab="hover:cursor-not-allowed opacity-50"
	>
		<Icon slot="lead" data={userCircle} scale={2} />
	</Tab>

[eugbyte]

Will wait for the update