Address a11y warning for TabbedValue (#2582)

* Address a11y warning for TabbedValue

* Make the tab underline straight (dae)
This commit is contained in:
Derek Dang 2023-07-18 05:49:02 -07:00 committed by GitHub
parent 9430e3ddf2
commit 1cac2dc85f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 5 deletions

View file

@ -129,7 +129,7 @@ Ben Yip <github.com/bennyyip>
mmjang <752515918@qq.com>
shunlog <github.com/shunlog>
3ter <github.com/3ter>
Derek Dang <https://github.com/derekdang/>
Derek Dang <github.com/derekdang/>
********************

View file

@ -2,6 +2,8 @@
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="setting-title" on:click>
<slot />
</div>

View file

@ -45,7 +45,7 @@
<ul>
{#each tabs as tab, idx}
<li class:active={activeTab === idx}>
<span on:click={handleClick(idx)}>{tab.title}</span>
<button on:click={handleClick(idx)}>{tab.title}</button>
</li>
{/each}
</ul>
@ -61,19 +61,22 @@
list-style: none;
}
span {
button {
display: block;
white-space: nowrap;
cursor: pointer;
color: var(--fg-subtle);
border: none;
background-color: transparent;
}
li.active > span {
li.active > button {
color: var(--fg);
border-bottom: 4px solid var(--border-focus);
margin-bottom: -2px;
border-radius: 0;
}
span:hover {
button:hover {
color: var(--fg);
}
</style>