From 23c9eb73aa53dfadc1a1f0b3292228819f1fb7b9 Mon Sep 17 00:00:00 2001 From: wukko <me@wukko.me> Date: Tue, 23 Jul 2024 14:41:55 +0600 Subject: [PATCH] web: global `data-focus-ring-hidden` attribute --- web/src/components/misc/Placeholder.svelte | 4 +++- web/src/routes/+layout.svelte | 16 ++++------------ web/src/routes/+page.svelte | 7 ++++++- web/src/routes/settings/+layout.svelte | 10 ++++++++-- web/src/routes/updates/+page.svelte | 6 +----- 5 files changed, 22 insertions(+), 21 deletions(-) diff --git a/web/src/components/misc/Placeholder.svelte b/web/src/components/misc/Placeholder.svelte index b9a73b1d..167bed1d 100644 --- a/web/src/components/misc/Placeholder.svelte +++ b/web/src/components/misc/Placeholder.svelte @@ -6,7 +6,9 @@ <div id="placeholder-container" class="center-column-container"> <Meowbalt emotion="smile" /> - <div data-first-focus tabindex="-1">{`${pageName} page is not ready yet!`}</div> + <div tabindex="-1" data-first-focus data-focus-ring-hidden> + {`${pageName} page is not ready yet!`} + </div> </div> <style> diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte index 53e38e1a..ed8ed818 100644 --- a/web/src/routes/+layout.svelte +++ b/web/src/routes/+layout.svelte @@ -319,6 +319,10 @@ z-index: 1; } + :global([data-focus-ring-hidden]:focus-visible) { + box-shadow: none !important; + } + :global(button:active, .button:active) { background-color: var(--button-hover); } @@ -366,18 +370,6 @@ margin-block: 0; } - :global( - h1:focus-visible, - h2:focus-visible, - h3:focus-visible, - h4:focus-visible, - h5:focus-visible, - h6:focus-visible, - main:focus-visible - ) { - box-shadow: none !important; - } - :global(h1) { font-size: 24px; letter-spacing: -1px; diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte index 1e1cc3ff..eebcdec3 100644 --- a/web/src/routes/+page.svelte +++ b/web/src/routes/+page.svelte @@ -10,7 +10,12 @@ </svelte:head> <div id="cobalt-save-container" class="center-column-container"> - <main id="cobalt-save" data-first-focus tabindex="-1"> + <main + id="cobalt-save" + tabindex="-1" + data-first-focus + data-focus-ring-hidden + > <Meowbalt emotion="smile" /> <Omnibox /> </main> diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte index 2a356db5..d6c485ce 100644 --- a/web/src/routes/settings/+layout.svelte +++ b/web/src/routes/settings/+layout.svelte @@ -67,8 +67,9 @@ <h3 id="settings-page-title" aria-level="1" - data-first-focus tabindex="-1" + data-first-focus + data-focus-ring-hidden > {#if !isHome} {$t(`settings.page.${currentPageTitle}`)} @@ -155,7 +156,12 @@ </div> {#if !isMobile || !isHome} - <main id="settings-page-content" data-first-focus tabindex="-1"> + <main + id="settings-page-content" + tabindex="-1" + data-first-focus + data-focus-ring-hidden + > <slot></slot> </main> {/if} diff --git a/web/src/routes/updates/+page.svelte b/web/src/routes/updates/+page.svelte index 70f4e5ca..c1e0f907 100644 --- a/web/src/routes/updates/+page.svelte +++ b/web/src/routes/updates/+page.svelte @@ -70,7 +70,7 @@ <svelte:window on:keydown={handleKeydown} /> -<div class="news" data-first-focus tabindex="-1"> +<div class="news" tabindex="-1" data-first-focus data-focus-ring-hidden> {#if changelog} <div id="left-button" class="button-wrapper-desktop"> {#if prev} @@ -135,10 +135,6 @@ justify-content: space-evenly; } - .news:focus-visible { - box-shadow: none !important; - } - .button-wrapper-desktop { display: flex; justify-content: center;