Replace focus: with focus-visible: (#4054)

Signed-off-by: Olga Bulat <obulat@gmail.com>
WordPress · Apr 8, 2024 · 9ab390d · 9ab390d
1 parent 4e01e2a
commit 9ab390d
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 6 deletions.
diff --git a/frontend/src/components/VAudioTrack/VWaveform.vue b/frontend/src/components/VAudioTrack/VWaveform.vue
@@ -2,7 +2,7 @@
   <div
     v-bind="waveformAttributes"
     ref="el"
-    class="waveform bg-background-var group/waveform relative overflow-hidden text-dark-charcoal focus:outline-none"
+    class="waveform bg-background-var group/waveform relative overflow-hidden text-dark-charcoal focus-visible:outline-none"
     :style="heightProperties"
     :tabIndex="isTabbable && isInteractive ? 0 : -1"
     :aria-disabled="!isInteractive"

diff --git a/frontend/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue b/frontend/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue
@@ -19,7 +19,7 @@
         type="search"
         name="q"
         :placeholder="$t('hero.search.placeholder').toString()"
-        class="paragraph-large md:label-regular ms-4 h-full w-full appearance-none rounded-none bg-tx leading-none text-dark-charcoal placeholder-dark-charcoal-70 focus:outline-none"
+        class="paragraph-large md:label-regular ms-4 h-full w-full appearance-none rounded-none bg-tx leading-none text-dark-charcoal placeholder-dark-charcoal-70 focus-visible:outline-none"
         :aria-label="
           $t('search.searchBarLabel', {
             openverse: 'Openverse',

diff --git a/frontend/src/components/VHomeGallery/VHomeGallery.vue b/frontend/src/components/VHomeGallery/VHomeGallery.vue
@@ -25,7 +25,7 @@
           appear
         >
           <VLink
-            class="home-cell rounded-full p-1 focus:bg-white"
+            class="home-cell rounded-full p-1 focus-visible:bg-white"
             :class="idx >= imageCount ? 'hidden' : 'block'"
             :style="{ '--delay': `${idx * 0.05}s` }"
             :href="image.url"

diff --git a/frontend/src/components/VInputField/VInputField.vue b/frontend/src/components/VInputField/VInputField.vue
@@ -17,7 +17,7 @@
       v-bind="$attrs"
       ref="inputEl"
       :type="type"
-      class="ms-4 h-full w-full appearance-none rounded-none bg-tx text-2xl font-semibold leading-none placeholder-dark-charcoal-70 focus:outline-none md:text-base"
+      class="ms-4 h-full w-full appearance-none rounded-none bg-tx text-2xl font-semibold leading-none placeholder-dark-charcoal-70 focus-visible:outline-none md:text-base"
       :value="modelValue"
       :aria-label="labelText"
       @input="updateModelValue"

diff --git a/frontend/src/components/VItemGroup/VItem.vue b/frontend/src/components/VItemGroup/VItem.vue
@@ -18,7 +18,7 @@
     <VButton
       data-item-group-item
       :as="as"
-      class="group relative flex min-w-full justify-between border-0 hover:bg-dark-charcoal-10 focus:z-10"
+      class="group relative flex min-w-full justify-between border-0 hover:bg-dark-charcoal-10 focus-visible:z-10"
       :class="{
         'w-max': contextProps.direction === 'horizontal',
         'p-3': contextProps.size === 'small',

diff --git a/frontend/src/components/VRadio/VRadio.vue b/frontend/src/components/VRadio/VRadio.vue
@@ -4,7 +4,7 @@
       :id="id"
       v-bind="$attrs"
       :value="value_"
-      class="radio relative me-3 h-5 w-5 flex-shrink-0 appearance-none rounded-full border border-dark-charcoal bg-white focus:outline-none focus:ring focus:ring-pink focus:ring-offset-2 disabled:border-dark-charcoal-40 disabled:bg-dark-charcoal-10"
+      class="radio relative me-3 h-5 w-5 flex-shrink-0 appearance-none rounded-full border border-dark-charcoal bg-white focus-visible:outline-none focus-visible:ring focus-visible:ring-pink focus-visible:ring-offset-2 disabled:border-dark-charcoal-40 disabled:bg-dark-charcoal-10"
       type="radio"
       :checked="isChecked"
       @input="handleInput"