GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-20 15:02:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Address a11y warning for TabbedValue (#2582)

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CONTRIBUTORS
View file

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

2
ts/deck-options/SettingTitle.svelte
View file

@ -2,6 +2,8 @@
Copyright: Ankitects Pty Ltd and contributors Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html 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> <div class="setting-title" on:click>
<slot /> <slot />
</div> </div>

11
ts/deck-options/TabbedValue.svelte
View file

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