From 49ffdc17c1daa5447b74171f78ab46f96b3ab0dc Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Wed, 24 Nov 2021 20:48:09 -0500
Subject: [PATCH 01/17] init

---
 .../VLogoLoader/VLogoLoader.types.js          | 14 ++++
 src/components/VLogoLoader/VLogoLoader.vue    | 68 +++++++++++++++++++
 .../VLogoLoader/meta/VLogoLoader.stories.js   | 33 +++++++++
 3 files changed, 115 insertions(+)
 create mode 100644 src/components/VLogoLoader/VLogoLoader.types.js
 create mode 100644 src/components/VLogoLoader/VLogoLoader.vue
 create mode 100644 src/components/VLogoLoader/meta/VLogoLoader.stories.js

diff --git a/src/components/VLogoLoader/VLogoLoader.types.js b/src/components/VLogoLoader/VLogoLoader.types.js
new file mode 100644
index 0000000000..9d7a9a506f
--- /dev/null
+++ b/src/components/VLogoLoader/VLogoLoader.types.js
@@ -0,0 +1,14 @@
+export const propTypes = {
+  status: {
+    type: /** @type {'loading'|'idle'} */ String,
+    default: 'idle',
+    required: false,
+  },
+  /** The string to announce when the loading state is active. Should be localized. */
+  loadingLabel: {
+    type: String,
+    required: true,
+  },
+}
+
+/** @typedef {import('@nuxtjs/composition-api').ExtractPropTypes<typeof propTypes>} Props */
diff --git a/src/components/VLogoLoader/VLogoLoader.vue b/src/components/VLogoLoader/VLogoLoader.vue
new file mode 100644
index 0000000000..d06bb8d04f
--- /dev/null
+++ b/src/components/VLogoLoader/VLogoLoader.vue
@@ -0,0 +1,68 @@
+<template>
+  <div
+    :data-fake-aria-label="loadingLabel"
+    class="hover:bg-yellow w-16 h-16 p-4 rounded-sm inline-flex justify-center items-center"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 47 42"
+      class="w-full h-full flex-shrink-0"
+    >
+      <path
+        id="part-1"
+        class="semi order-1"
+        d="M0.999969 9.3975C0.999969 14.5687 5.17217 18.795 10.3353 18.795V0C5.17217 0 0.999969 4.2 0.999969 9.3975Z"
+      />
+      <path
+        id="part-2"
+        class="semi order-2"
+        d="M14.6118 9.3975C14.6118 14.5687 18.784 18.795 23.9471 18.795V0C18.8101 0 14.6118 4.2 14.6118 9.3975Z"
+      />
+      <path
+        id="part-3"
+        class="full order-3"
+        d="M37.5589 18.795C42.7146 18.795 46.8942 14.5876 46.8942 9.3975C46.8942 4.2074 42.7146 0 37.5589 0C32.4031 0 28.2236 4.2074 28.2236 9.3975C28.2236 14.5876 32.4031 18.795 37.5589 18.795Z"
+      />
+      <path
+        id="part-4"
+        class="semi order-a"
+        d="M0.999969 32.6025C0.999969 37.8 5.17217 42 10.3353 42V23.2312C5.17217 23.2312 0.999969 27.4312 0.999969 32.6025Z"
+      />
+      <path
+        id="part-5"
+        class="semi order-b"
+        d="M14.6118 32.5238C14.6118 37.695 18.784 41.9213 23.9471 41.9213V23.1525C18.8101 23.1525 14.6118 27.3525 14.6118 32.5238Z"
+      />
+      <path
+        id="part-6"
+        class="full order-c"
+        d="M37.5589 41.9212C42.7146 41.9212 46.8942 37.7138 46.8942 32.5238C46.8942 27.3337 42.7146 23.1263 37.5589 23.1263C32.4031 23.1263 28.2236 27.3337 28.2236 32.5238C28.2236 37.7138 32.4031 41.9212 37.5589 41.9212Z"
+      />
+    </svg>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+import { warn } from '~/utils/warn'
+
+import { propTypes } from './VLogoLoader.types'
+
+export default defineComponent({
+  name: 'VLogoLoader',
+  props: propTypes,
+  /**
+   * @param {import('./VLogoLoader.types').Props} props
+   * @param {import('@nuxtjs/composition-api').SetupContext} context
+   */
+  setup(props) {
+    if (!props.loadingLabel) {
+      warn(
+        'Please provide a label to announce when the component is "loading".'
+      )
+    }
+
+    return props
+  },
+})
+</script>
diff --git a/src/components/VLogoLoader/meta/VLogoLoader.stories.js b/src/components/VLogoLoader/meta/VLogoLoader.stories.js
new file mode 100644
index 0000000000..f56e156015
--- /dev/null
+++ b/src/components/VLogoLoader/meta/VLogoLoader.stories.js
@@ -0,0 +1,33 @@
+import VLogoLoader from '~/components/VLogoLoader/VLogoLoader.vue'
+
+export default {
+  component: VLogoLoader,
+  title: 'Components/VLogoLoader',
+  argTypes: {
+    status: {
+      default: 'idle',
+      options: ['loading', 'idle'],
+      control: { type: 'radio' },
+    },
+    loadingLabel: {
+      control: { type: 'text' },
+    },
+  },
+}
+
+const SingleLoaderStory = (_, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
+    <div>
+      <VLogoLoader v-bind="$props" />
+    </div>
+  `,
+  components: { VLogoLoader },
+  setup() {},
+})
+
+export const Default = SingleLoaderStory.bind({})
+Default.args = {
+  status: 'idle',
+  loadingLabel: 'Loading images',
+}

From bdb85ad10c78c21588018ba8e63c1f58e22bd273 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Wed, 24 Nov 2021 21:09:46 -0500
Subject: [PATCH 02/17] Reduced motion support and basic state management

---
 src/components/VLogoLoader/VLogoLoader.vue | 27 ++++++++++++++++-
 src/composables/use-event-listener.js      | 33 ++++++++++++++++++++
 src/composables/use-media-query.js         | 35 ++++++++++++++++++++++
 3 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 src/composables/use-event-listener.js
 create mode 100644 src/composables/use-media-query.js

diff --git a/src/components/VLogoLoader/VLogoLoader.vue b/src/components/VLogoLoader/VLogoLoader.vue
index d06bb8d04f..11db32f6e5 100644
--- a/src/components/VLogoLoader/VLogoLoader.vue
+++ b/src/components/VLogoLoader/VLogoLoader.vue
@@ -1,7 +1,12 @@
 <template>
   <div
+    :data-prefers-reduced-motion="prefersReducedMotion"
     :data-fake-aria-label="loadingLabel"
     class="hover:bg-yellow w-16 h-16 p-4 rounded-sm inline-flex justify-center items-center"
+    :class="{
+      [$style.loading]: status === 'loading',
+      [$style.quiet]: status === 'loading' && prefersReducedMotion,
+    }"
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -44,6 +49,7 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
+import { useReducedMotion } from '~/composables/use-media-query'
 import { warn } from '~/utils/warn'
 
 import { propTypes } from './VLogoLoader.types'
@@ -56,13 +62,32 @@ export default defineComponent({
    * @param {import('@nuxtjs/composition-api').SetupContext} context
    */
   setup(props) {
+    const prefersReducedMotion = useReducedMotion()
+
     if (!props.loadingLabel) {
       warn(
         'Please provide a label to announce when the component is "loading".'
       )
     }
 
-    return props
+    return { prefersReducedMotion }
   },
 })
 </script>
+
+<style module>
+.loading {
+  animation: blink 1s steps(5, start) infinite;
+}
+
+@keyframes blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+.quiet {
+  opacity: 0.5;
+  animation: none !important;
+}
+</style>
diff --git a/src/composables/use-event-listener.js b/src/composables/use-event-listener.js
new file mode 100644
index 0000000000..502da87297
--- /dev/null
+++ b/src/composables/use-event-listener.js
@@ -0,0 +1,33 @@
+import {
+  isRef,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  unref,
+} from '@nuxtjs/composition-api'
+
+/**
+ * Use an event listener. Shamelessly stolen from https://logaretm.com/blog/my-favorite-5-vuejs-composables/#useeventlistener
+ *
+ * @param {Ref<EventTarget | null> | EventTarget} target The target can be a reactive ref which adds flexibility
+ * @param {string} event
+ * @param {(e: Event) => void} handler
+ */
+export function useEventListener(target, event, handler) {
+  // if its a reactive ref, use a watcher
+  if (isRef(target)) {
+    watch(target, (value, oldValue) => {
+      oldValue?.removeEventListener(event, handler)
+      value?.addEventListener(event, handler)
+    })
+  } else {
+    // otherwise use the mounted hook
+    onMounted(() => {
+      target.addEventListener(event, handler)
+    })
+  }
+  // clean it up
+  onBeforeUnmount(() => {
+    unref(target)?.removeEventListener(event, handler)
+  })
+}
diff --git a/src/composables/use-media-query.js b/src/composables/use-media-query.js
new file mode 100644
index 0000000000..a92ffdff2c
--- /dev/null
+++ b/src/composables/use-media-query.js
@@ -0,0 +1,35 @@
+import { useEventListener } from '~/composables/use-event-listener'
+import { computed, ref } from '@nuxtjs/composition-api'
+
+/**
+ * Use a media query.
+ * @param {Ref<string> | string} query
+ * @returns
+ */
+export function useMediaQuery(query) {
+  const mediaQuery = window.matchMedia(query)
+  const matches = ref(mediaQuery.matches)
+
+  useEventListener(mediaQuery, 'change', (event) => {
+    matches.value = event.matches
+  })
+
+  return matches
+}
+
+/**
+ * Check if the user prefers reduced motion or not.
+ *
+ * @returns {computed<Boolean>}
+ */
+export function useReducedMotion() {
+  const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
+
+  return computed(() => {
+    if (prefersReducedMotion.value) {
+      return true
+    }
+
+    return false
+  })
+}

From 15c01600ae37cba9a5fc697a26de07a1a50803d4 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Wed, 1 Dec 2021 15:25:34 -0500
Subject: [PATCH 03/17] Improve use-media-query types and add back
 useReducedMotion

---
 src/composables/use-media-query.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/composables/use-media-query.js b/src/composables/use-media-query.js
index b84f73a5ee..f82426c2ce 100644
--- a/src/composables/use-media-query.js
+++ b/src/composables/use-media-query.js
@@ -13,6 +13,7 @@ export function useMediaQuery(query, options = {}) {
   if (!window) return ref(false)
 
   const mediaQuery = window.matchMedia(query)
+  /** @type {import('@nuxtjs/composition-api').Ref<Boolean>} */
   const matches = ref(mediaQuery.matches)
 
   const handler = (/** @type MediaQueryListEvent */ event) => {
@@ -36,3 +37,10 @@ export function useMediaQuery(query, options = {}) {
 
   return matches
 }
+
+/**
+ * Check if the user prefers reduced motion or not.
+ */
+export function useReducedMotion() {
+  return useMediaQuery('(prefers-reduced-motion: reduce)')
+}

From 4b151a243b36bc98840bc39a59e4e4ba0b6bbdd2 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Wed, 1 Dec 2021 15:59:51 -0500
Subject: [PATCH 04/17] Add window management for reduced motion media query
 composable

---
 src/components/VLogoLoader/VLogoLoader.vue | 3 ++-
 src/composables/use-media-query.js         | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/VLogoLoader/VLogoLoader.vue b/src/components/VLogoLoader/VLogoLoader.vue
index 11db32f6e5..4ab61f2abd 100644
--- a/src/components/VLogoLoader/VLogoLoader.vue
+++ b/src/components/VLogoLoader/VLogoLoader.vue
@@ -62,7 +62,8 @@ export default defineComponent({
    * @param {import('@nuxtjs/composition-api').SetupContext} context
    */
   setup(props) {
-    const prefersReducedMotion = useReducedMotion()
+    const defaultWindow = typeof window !== 'undefined' ? window : undefined
+    const prefersReducedMotion = useReducedMotion({ window: defaultWindow })
 
     if (!props.loadingLabel) {
       warn(
diff --git a/src/composables/use-media-query.js b/src/composables/use-media-query.js
index f82426c2ce..9d002e2b77 100644
--- a/src/composables/use-media-query.js
+++ b/src/composables/use-media-query.js
@@ -41,6 +41,6 @@ export function useMediaQuery(query, options = {}) {
 /**
  * Check if the user prefers reduced motion or not.
  */
-export function useReducedMotion() {
-  return useMediaQuery('(prefers-reduced-motion: reduce)')
+export function useReducedMotion(options = {}) {
+  return useMediaQuery('(prefers-reduced-motion: reduce)', options)
 }

From 1db788a7af83ac420e2fa4aaee6e4ba6a5b4c067 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Wed, 1 Dec 2021 16:40:28 -0500
Subject: [PATCH 05/17] Add initial tests

---
 src/components/VLogoLoader/VLogoLoader.vue    |  9 +++--
 .../specs/components/v-logo-loader.spec.js    | 36 +++++++++++++++++++
 2 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 test/unit/specs/components/v-logo-loader.spec.js

diff --git a/src/components/VLogoLoader/VLogoLoader.vue b/src/components/VLogoLoader/VLogoLoader.vue
index 4ab61f2abd..b8579a61ba 100644
--- a/src/components/VLogoLoader/VLogoLoader.vue
+++ b/src/components/VLogoLoader/VLogoLoader.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    role="status"
     :data-prefers-reduced-motion="prefersReducedMotion"
     :data-fake-aria-label="loadingLabel"
     class="hover:bg-yellow w-16 h-16 p-4 rounded-sm inline-flex justify-center items-center"
@@ -12,6 +13,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 47 42"
       class="w-full h-full flex-shrink-0"
+      data-testid="loading-icon"
     >
       <path
         id="part-1"
@@ -54,6 +56,9 @@ import { warn } from '~/utils/warn'
 
 import { propTypes } from './VLogoLoader.types'
 
+export const noLoaderLabelWarning =
+  'Please provide a label to announce when the component is "loading".'
+
 export default defineComponent({
   name: 'VLogoLoader',
   props: propTypes,
@@ -66,9 +71,7 @@ export default defineComponent({
     const prefersReducedMotion = useReducedMotion({ window: defaultWindow })
 
     if (!props.loadingLabel) {
-      warn(
-        'Please provide a label to announce when the component is "loading".'
-      )
+      warn(noLoaderLabelWarning)
     }
 
     return { prefersReducedMotion }
diff --git a/test/unit/specs/components/v-logo-loader.spec.js b/test/unit/specs/components/v-logo-loader.spec.js
new file mode 100644
index 0000000000..28b10693d9
--- /dev/null
+++ b/test/unit/specs/components/v-logo-loader.spec.js
@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/vue'
+import VLogoLoader, {
+  noLoaderLabelWarning,
+} from '~/components/VLogoLoader/VLogoLoader.vue'
+import { warn } from '~/utils/warn'
+
+jest.mock('~/utils/warn', () => ({
+  warn: jest.fn(),
+}))
+
+jest.mock('~/composables/use-media-query', () => ({
+  useReducedMotion: jest.fn(() => true),
+}))
+
+describe('VLogoLoader', () => {
+  it('should render the logo', () => {
+    render(VLogoLoader, { props: { loadingLabel: 'Loading images' } })
+    const element = screen.getByTestId('loading-icon')
+    expect(element).toBeInTheDocument()
+  })
+
+  it('should complain if there is not a label', () => {
+    render(VLogoLoader, {})
+    expect(warn).toHaveBeenCalledWith(noLoaderLabelWarning)
+  })
+
+  describe('accessibility', () => {
+    it('should render differently when the user prefers reduced motion', () => {
+      render(VLogoLoader, {
+        props: { loadingLabel: 'Loading images', status: 'loading' },
+      })
+      const element = screen.getByRole('status')
+      expect(element).toHaveAttribute('data-prefers-reduced-motion', 'true')
+    })
+  })
+})

From dc02695c1f83efaa49847c1c9ba19f67cfb4441a Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Wed, 1 Dec 2021 16:56:31 -0500
Subject: [PATCH 06/17] Add aria live region support

---
 src/components/VLogoLoader/VLogoLoader.vue             | 3 +++
 src/components/VLogoLoader/meta/VLogoLoader.stories.js | 2 +-
 test/unit/specs/components/v-logo-loader.spec.js       | 2 ++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/VLogoLoader/VLogoLoader.vue b/src/components/VLogoLoader/VLogoLoader.vue
index b8579a61ba..53365be98c 100644
--- a/src/components/VLogoLoader/VLogoLoader.vue
+++ b/src/components/VLogoLoader/VLogoLoader.vue
@@ -8,6 +8,9 @@
       [$style.loading]: status === 'loading',
       [$style.quiet]: status === 'loading' && prefersReducedMotion,
     }"
+    :aria-busy="status === 'loading' ? true : undefined"
+    :aria-live="status === 'loading' ? 'polite' : undefined"
+    :aria-label="status === 'loading' ? loadingLabel : undefined"
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/VLogoLoader/meta/VLogoLoader.stories.js b/src/components/VLogoLoader/meta/VLogoLoader.stories.js
index f56e156015..a6a0965871 100644
--- a/src/components/VLogoLoader/meta/VLogoLoader.stories.js
+++ b/src/components/VLogoLoader/meta/VLogoLoader.stories.js
@@ -19,7 +19,7 @@ const SingleLoaderStory = (_, { argTypes }) => ({
   props: Object.keys(argTypes),
   template: `
     <div>
-      <VLogoLoader v-bind="$props" />
+      <VLogoLoader v-bind="$props" :key="$props.status" />
     </div>
   `,
   components: { VLogoLoader },
diff --git a/test/unit/specs/components/v-logo-loader.spec.js b/test/unit/specs/components/v-logo-loader.spec.js
index 28b10693d9..ae6ecbb154 100644
--- a/test/unit/specs/components/v-logo-loader.spec.js
+++ b/test/unit/specs/components/v-logo-loader.spec.js
@@ -32,5 +32,7 @@ describe('VLogoLoader', () => {
       const element = screen.getByRole('status')
       expect(element).toHaveAttribute('data-prefers-reduced-motion', 'true')
     })
+
+    it.todo('Should render as an aria live region when status is loading')
   })
 })

From 861e866127ddad1aeb6d62480cf5be262a8e4891 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Thu, 2 Dec 2021 19:03:13 -0500
Subject: [PATCH 07/17] Add loading story

---
 src/components/VLogoLoader/meta/VLogoLoader.stories.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/VLogoLoader/meta/VLogoLoader.stories.js b/src/components/VLogoLoader/meta/VLogoLoader.stories.js
index a6a0965871..c6b4cc45d2 100644
--- a/src/components/VLogoLoader/meta/VLogoLoader.stories.js
+++ b/src/components/VLogoLoader/meta/VLogoLoader.stories.js
@@ -15,7 +15,7 @@ export default {
   },
 }
 
-const SingleLoaderStory = (_, { argTypes }) => ({
+const SimpleLoaderStory = (_, { argTypes }) => ({
   props: Object.keys(argTypes),
   template: `
     <div>
@@ -26,8 +26,14 @@ const SingleLoaderStory = (_, { argTypes }) => ({
   setup() {},
 })
 
-export const Default = SingleLoaderStory.bind({})
+export const Default = SimpleLoaderStory.bind({})
 Default.args = {
   status: 'idle',
   loadingLabel: 'Loading images',
 }
+
+export const Loading = SimpleLoaderStory.bind({})
+Loading.args = {
+  status: 'loading',
+  loadingLabel: 'Loading images',
+}

From 2929fb24c06b5221515ad59ead804507a4fc127d Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Thu, 2 Dec 2021 19:56:34 -0500
Subject: [PATCH 08/17] Implement animations; remove ARIA; cleanup

---
 .../VLogoLoader/VLogoLoader.types.js          |   5 -
 src/components/VLogoLoader/VLogoLoader.vue    | 189 +++++++++++++-----
 .../VLogoLoader/meta/VLogoLoader.stories.js   |  26 ++-
 .../specs/components/v-logo-loader.spec.js    |  10 +-
 4 files changed, 165 insertions(+), 65 deletions(-)

diff --git a/src/components/VLogoLoader/VLogoLoader.types.js b/src/components/VLogoLoader/VLogoLoader.types.js
index 9d7a9a506f..b05d9c3af4 100644
--- a/src/components/VLogoLoader/VLogoLoader.types.js
+++ b/src/components/VLogoLoader/VLogoLoader.types.js
@@ -4,11 +4,6 @@ export const propTypes = {
     default: 'idle',
     required: false,
   },
-  /** The string to announce when the loading state is active. Should be localized. */
-  loadingLabel: {
-    type: String,
-    required: true,
-  },
 }
 
 /** @typedef {import('@nuxtjs/composition-api').ExtractPropTypes<typeof propTypes>} Props */
diff --git a/src/components/VLogoLoader/VLogoLoader.vue b/src/components/VLogoLoader/VLogoLoader.vue
index 53365be98c..c4ecff8e74 100644
--- a/src/components/VLogoLoader/VLogoLoader.vue
+++ b/src/components/VLogoLoader/VLogoLoader.vue
@@ -1,52 +1,40 @@
 <template>
   <div
-    role="status"
+    aria-hidden="true"
     :data-prefers-reduced-motion="prefersReducedMotion"
-    :data-fake-aria-label="loadingLabel"
-    class="hover:bg-yellow w-16 h-16 p-4 rounded-sm inline-flex justify-center items-center"
-    :class="{
-      [$style.loading]: status === 'loading',
-      [$style.quiet]: status === 'loading' && prefersReducedMotion,
-    }"
-    :aria-busy="status === 'loading' ? true : undefined"
-    :aria-live="status === 'loading' ? 'polite' : undefined"
-    :aria-label="status === 'loading' ? loadingLabel : undefined"
+    class="hover:bg-yellow w-16 h-16 p-4 rounded inline-flex justify-center items-center"
   >
     <svg
+      viewBox="0 0 34 32"
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 47 42"
-      class="w-full h-full flex-shrink-0"
-      data-testid="loading-icon"
+      :class="{
+        [$style.loading]: status === 'loading' && !prefersReducedMotion,
+        [$style.quiet]: status === 'loading' && prefersReducedMotion,
+      }"
     >
       <path
-        id="part-1"
-        class="semi order-1"
-        d="M0.999969 9.3975C0.999969 14.5687 5.17217 18.795 10.3353 18.795V0C5.17217 0 0.999969 4.2 0.999969 9.3975Z"
+        data-logo-part-1
+        d="M0 6.962c0 3.831 3.09 6.962 6.916 6.962V0C3.09 0 0 3.111 0 6.962Z"
       />
       <path
-        id="part-2"
-        class="semi order-2"
-        d="M14.6118 9.3975C14.6118 14.5687 18.784 18.795 23.9471 18.795V0C18.8101 0 14.6118 4.2 14.6118 9.3975Z"
+        data-logo-part-2
+        d="M10.084 6.962c0 3.831 3.091 6.962 6.916 6.962V0c-3.806 0-6.916 3.111-6.916 6.962Z"
       />
       <path
-        id="part-3"
-        class="full order-3"
-        d="M37.5589 18.795C42.7146 18.795 46.8942 14.5876 46.8942 9.3975C46.8942 4.2074 42.7146 0 37.5589 0C32.4031 0 28.2236 4.2074 28.2236 9.3975C28.2236 14.5876 32.4031 18.795 37.5589 18.795Z"
+        data-logo-part-3
+        d="M27.084 13.924c3.82 0 6.916-3.117 6.916-6.962C34 3.117 30.904 0 27.084 0c-3.82 0-6.916 3.117-6.916 6.962 0 3.845 3.097 6.962 6.916 6.962Z"
       />
       <path
-        id="part-4"
-        class="semi order-a"
-        d="M0.999969 32.6025C0.999969 37.8 5.17217 42 10.3353 42V23.2312C5.17217 23.2312 0.999969 27.4312 0.999969 32.6025Z"
+        data-logo-part-4
+        d="M0 24.153c0 3.85 3.09 6.962 6.916 6.962V17.21C3.09 17.21 0 20.322 0 24.153Z"
       />
       <path
-        id="part-5"
-        class="semi order-b"
-        d="M14.6118 32.5238C14.6118 37.695 18.784 41.9213 23.9471 41.9213V23.1525C18.8101 23.1525 14.6118 27.3525 14.6118 32.5238Z"
+        data-logo-part-5
+        d="M10.084 24.095c0 3.83 3.091 6.962 6.916 6.962V17.152c-3.806 0-6.916 3.112-6.916 6.943Z"
       />
       <path
-        id="part-6"
-        class="full order-c"
-        d="M37.5589 41.9212C42.7146 41.9212 46.8942 37.7138 46.8942 32.5238C46.8942 27.3337 42.7146 23.1263 37.5589 23.1263C32.4031 23.1263 28.2236 27.3337 28.2236 32.5238C28.2236 37.7138 32.4031 41.9212 37.5589 41.9212Z"
+        data-logo-part-6
+        d="M27.084 31.057c3.82 0 6.916-3.117 6.916-6.962 0-3.845-3.096-6.962-6.916-6.962-3.82 0-6.916 3.117-6.916 6.962 0 3.845 3.097 6.962 6.916 6.962Z"
       />
     </svg>
   </div>
@@ -55,13 +43,9 @@
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
 import { useReducedMotion } from '~/composables/use-media-query'
-import { warn } from '~/utils/warn'
 
 import { propTypes } from './VLogoLoader.types'
 
-export const noLoaderLabelWarning =
-  'Please provide a label to announce when the component is "loading".'
-
 export default defineComponent({
   name: 'VLogoLoader',
   props: propTypes,
@@ -69,32 +53,147 @@ export default defineComponent({
    * @param {import('./VLogoLoader.types').Props} props
    * @param {import('@nuxtjs/composition-api').SetupContext} context
    */
-  setup(props) {
+  setup() {
     const defaultWindow = typeof window !== 'undefined' ? window : undefined
     const prefersReducedMotion = useReducedMotion({ window: defaultWindow })
 
-    if (!props.loadingLabel) {
-      warn(noLoaderLabelWarning)
-    }
-
     return { prefersReducedMotion }
   },
 })
 </script>
 
 <style module>
+/**
+  Openverse Logo Loader
+
+  ┌───┐ ┌───┐ ┌──────┐
+  │ 1 │ │ 2 │ │   3  │
+  └───┘ └───┘ └──────┘
+  ┌───┐ ┌───┐ ┌──────┐
+  │ 4 │ │ 5 │ │   6  │
+  └───┘ └───┘ └──────┘
+
+  The logo, in goofy ascii!
+
+  The loader keyframe animation steps (the defined percentage blocks within each animation)
+  are tightly coupled to the cubic bezier easing curve of the full circles (parts 3 and 6),
+  as they move from right to left and back to their starting positions.
+
+  This easing curve determines at which point in the animation timeline the sphere will be
+  in a particular position. Changing it or the keyframe step percentages will break the animation.
+
+  Things you *can* change are:
+
+  1. The duration of the animation
+  2. The easing of parts 1,2,4, and 5 (this is the animation of the half circles shifting in from
+  the right after the circles 'sweep' by)
+  3. The size of the logo (has no bearing on the animation despite the 'magic' pixel values in our
+  CSS vars)
+
+  Things you can't change, without making several additional changes:
+
+  1. The --halfcircle-shift and --circle-shift variable values
+  2. The easing curve of the end-shift animation on parts 3 and 6
+  3. The keyframe percentage steps (think of these as points on a timeline of the animation, with 0%
+  being the start and 100% being the end)
+*/
+
 .loading {
-  animation: blink 1s steps(5, start) infinite;
+  --halfcircle-shift: 7px;
+  --circle-shift: -20.1px;
 }
 
-@keyframes blink {
-  to {
+.loading > [data-logo-part-1],
+.loading > [data-logo-part-4] {
+  animation: start-shift 2s infinite ease-in-out;
+}
+
+.loading > [data-logo-part-2],
+.loading > [data-logo-part-5] {
+  animation: middle-shift 2s infinite ease-in-out;
+}
+
+.loading > [data-logo-part-3],
+.loading > [data-logo-part-6] {
+  /**
+    Changing this cubic-bezier will break the animation and require changes to the
+    start-shift and middle-shift keyframe steps.
+  */
+  animation: end-shift 2s infinite cubic-bezier(0.79, 0.14, 0.15, 0.86);
+}
+
+/* Stagger the second row so it animates slightly after the first */
+.loading > [data-logo-part-4],
+.loading > [data-logo-part-5],
+.loading > [data-logo-part-6] {
+  animation-delay: 0.35s;
+}
+
+@keyframes start-shift {
+  0% {
+    visibility: visible;
+    transform: translateX(0);
+  }
+  50% {
+    visibility: hidden;
+    transform: translateX(0);
+  }
+  73% {
     visibility: hidden;
+    transform: translateX(var(--halfcircle-shift));
+  }
+  79% {
+    visibility: visible;
+    transform: translateX(0);
   }
 }
 
+@keyframes middle-shift {
+  0% {
+    visibility: visible;
+    transform: translateX(0);
+  }
+  30% {
+    visibility: hidden;
+    transform: translateX(0);
+  }
+  78.6% {
+    visibility: hidden;
+    transform: translateX(var(--halfcircle-shift));
+  }
+  86% {
+    visibility: visible;
+    transform: translateX(0);
+  }
+}
+
+/**
+  The stops at 20% and 40% here are used to simulate a 'pause' whenever the spheres
+  reach the start or end of the logo. CSS's built in animation-delay property only
+  works on the first cycle of an animation, not  between subsequent runs.
+ */
+@keyframes end-shift {
+  0%,
+  20% {
+    transform: translateX(0);
+  }
+  40%,
+  50% {
+    transform: translateX(var(--circle-shift));
+  }
+}
+
+/** A simple opacity pulse for when the user prefers reduced motion. */
 .quiet {
-  opacity: 0.5;
-  animation: none !important;
+  animation: scale 1s infinite linear alternate;
+}
+
+@keyframes scale {
+  from {
+    opacity: 0.7;
+  }
+  to {
+    opacity: 1;
+  }
 }
 </style>
diff --git a/src/components/VLogoLoader/meta/VLogoLoader.stories.js b/src/components/VLogoLoader/meta/VLogoLoader.stories.js
index c6b4cc45d2..75effd5bfc 100644
--- a/src/components/VLogoLoader/meta/VLogoLoader.stories.js
+++ b/src/components/VLogoLoader/meta/VLogoLoader.stories.js
@@ -1,4 +1,4 @@
-import VLogoLoader from '~/components/VLogoLoader/VLogoLoader.vue'
+import VLogoLoader from '~/components/VLogoLoader/VLogoLoader'
 
 export default {
   component: VLogoLoader,
@@ -9,9 +9,6 @@ export default {
       options: ['loading', 'idle'],
       control: { type: 'radio' },
     },
-    loadingLabel: {
-      control: { type: 'text' },
-    },
   },
 }
 
@@ -19,7 +16,8 @@ const SimpleLoaderStory = (_, { argTypes }) => ({
   props: Object.keys(argTypes),
   template: `
     <div>
-      <VLogoLoader v-bind="$props" :key="$props.status" />
+      <VLogoLoader v-bind="$props" />
+      <p>Remember to test with the <code class="inline p-0"><pre class="inline bg-light-gray p-0 m-0 leading-normal">prefers-reduced-motion</pre></code> media query. You can find instructions for doing so in Firefox <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences">here.</a>
     </div>
   `,
   components: { VLogoLoader },
@@ -29,7 +27,6 @@ const SimpleLoaderStory = (_, { argTypes }) => ({
 export const Default = SimpleLoaderStory.bind({})
 Default.args = {
   status: 'idle',
-  loadingLabel: 'Loading images',
 }
 
 export const Loading = SimpleLoaderStory.bind({})
@@ -37,3 +34,20 @@ Loading.args = {
   status: 'loading',
   loadingLabel: 'Loading images',
 }
+
+const LinkWrappedLoaderStory = (_, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
+    <a class="focus:outline-none focus:ring focus:ring-offset-2 focus:ring-pink inline-block" href='https://wordpress.org/openverse'>
+      <VLogoLoader v-bind="$props" />
+    </a>
+  `,
+  components: { VLogoLoader },
+  setup() {},
+})
+
+export const LinkWrapped = LinkWrappedLoaderStory.bind({})
+LinkWrappedLoaderStory.args = {
+  status: 'idle',
+  loadingLabel: 'Loading images',
+}
diff --git a/test/unit/specs/components/v-logo-loader.spec.js b/test/unit/specs/components/v-logo-loader.spec.js
index ae6ecbb154..b188a142fd 100644
--- a/test/unit/specs/components/v-logo-loader.spec.js
+++ b/test/unit/specs/components/v-logo-loader.spec.js
@@ -1,8 +1,5 @@
 import { render, screen } from '@testing-library/vue'
-import VLogoLoader, {
-  noLoaderLabelWarning,
-} from '~/components/VLogoLoader/VLogoLoader.vue'
-import { warn } from '~/utils/warn'
+import VLogoLoader from '~/components/VLogoLoader/VLogoLoader.vue'
 
 jest.mock('~/utils/warn', () => ({
   warn: jest.fn(),
@@ -19,11 +16,6 @@ describe('VLogoLoader', () => {
     expect(element).toBeInTheDocument()
   })
 
-  it('should complain if there is not a label', () => {
-    render(VLogoLoader, {})
-    expect(warn).toHaveBeenCalledWith(noLoaderLabelWarning)
-  })
-
   describe('accessibility', () => {
     it('should render differently when the user prefers reduced motion', () => {
       render(VLogoLoader, {

From afa7731cb050a871dbdd3cb99bd9bb8f8b56a1a6 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Thu, 2 Dec 2021 19:59:58 -0500
Subject: [PATCH 09/17] Fix tests

---
 src/components/VLogoLoader/VLogoLoader.vue    | 68 +++++++++----------
 .../specs/components/v-logo-loader.spec.js    |  8 +--
 2 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/src/components/VLogoLoader/VLogoLoader.vue b/src/components/VLogoLoader/VLogoLoader.vue
index c4ecff8e74..33a9d293c7 100644
--- a/src/components/VLogoLoader/VLogoLoader.vue
+++ b/src/components/VLogoLoader/VLogoLoader.vue
@@ -1,43 +1,41 @@
 <template>
-  <div
+  <svg
+    viewBox="0 0 34 32"
+    xmlns="http://www.w3.org/2000/svg"
+    :class="{
+      [$style.loading]: status === 'loading' && !prefersReducedMotion,
+      [$style.quiet]: status === 'loading' && prefersReducedMotion,
+    }"
     aria-hidden="true"
     :data-prefers-reduced-motion="prefersReducedMotion"
+    data-testid="logo-loader"
     class="hover:bg-yellow w-16 h-16 p-4 rounded inline-flex justify-center items-center"
   >
-    <svg
-      viewBox="0 0 34 32"
-      xmlns="http://www.w3.org/2000/svg"
-      :class="{
-        [$style.loading]: status === 'loading' && !prefersReducedMotion,
-        [$style.quiet]: status === 'loading' && prefersReducedMotion,
-      }"
-    >
-      <path
-        data-logo-part-1
-        d="M0 6.962c0 3.831 3.09 6.962 6.916 6.962V0C3.09 0 0 3.111 0 6.962Z"
-      />
-      <path
-        data-logo-part-2
-        d="M10.084 6.962c0 3.831 3.091 6.962 6.916 6.962V0c-3.806 0-6.916 3.111-6.916 6.962Z"
-      />
-      <path
-        data-logo-part-3
-        d="M27.084 13.924c3.82 0 6.916-3.117 6.916-6.962C34 3.117 30.904 0 27.084 0c-3.82 0-6.916 3.117-6.916 6.962 0 3.845 3.097 6.962 6.916 6.962Z"
-      />
-      <path
-        data-logo-part-4
-        d="M0 24.153c0 3.85 3.09 6.962 6.916 6.962V17.21C3.09 17.21 0 20.322 0 24.153Z"
-      />
-      <path
-        data-logo-part-5
-        d="M10.084 24.095c0 3.83 3.091 6.962 6.916 6.962V17.152c-3.806 0-6.916 3.112-6.916 6.943Z"
-      />
-      <path
-        data-logo-part-6
-        d="M27.084 31.057c3.82 0 6.916-3.117 6.916-6.962 0-3.845-3.096-6.962-6.916-6.962-3.82 0-6.916 3.117-6.916 6.962 0 3.845 3.097 6.962 6.916 6.962Z"
-      />
-    </svg>
-  </div>
+    <path
+      data-logo-part-1
+      d="M0 6.962c0 3.831 3.09 6.962 6.916 6.962V0C3.09 0 0 3.111 0 6.962Z"
+    />
+    <path
+      data-logo-part-2
+      d="M10.084 6.962c0 3.831 3.091 6.962 6.916 6.962V0c-3.806 0-6.916 3.111-6.916 6.962Z"
+    />
+    <path
+      data-logo-part-3
+      d="M27.084 13.924c3.82 0 6.916-3.117 6.916-6.962C34 3.117 30.904 0 27.084 0c-3.82 0-6.916 3.117-6.916 6.962 0 3.845 3.097 6.962 6.916 6.962Z"
+    />
+    <path
+      data-logo-part-4
+      d="M0 24.153c0 3.85 3.09 6.962 6.916 6.962V17.21C3.09 17.21 0 20.322 0 24.153Z"
+    />
+    <path
+      data-logo-part-5
+      d="M10.084 24.095c0 3.83 3.091 6.962 6.916 6.962V17.152c-3.806 0-6.916 3.112-6.916 6.943Z"
+    />
+    <path
+      data-logo-part-6
+      d="M27.084 31.057c3.82 0 6.916-3.117 6.916-6.962 0-3.845-3.096-6.962-6.916-6.962-3.82 0-6.916 3.117-6.916 6.962 0 3.845 3.097 6.962 6.916 6.962Z"
+    />
+  </svg>
 </template>
 
 <script>
diff --git a/test/unit/specs/components/v-logo-loader.spec.js b/test/unit/specs/components/v-logo-loader.spec.js
index b188a142fd..378f4e3a1b 100644
--- a/test/unit/specs/components/v-logo-loader.spec.js
+++ b/test/unit/specs/components/v-logo-loader.spec.js
@@ -11,17 +11,17 @@ jest.mock('~/composables/use-media-query', () => ({
 
 describe('VLogoLoader', () => {
   it('should render the logo', () => {
-    render(VLogoLoader, { props: { loadingLabel: 'Loading images' } })
-    const element = screen.getByTestId('loading-icon')
+    render(VLogoLoader)
+    const element = screen.getByTestId('logo-loader')
     expect(element).toBeInTheDocument()
   })
 
   describe('accessibility', () => {
     it('should render differently when the user prefers reduced motion', () => {
       render(VLogoLoader, {
-        props: { loadingLabel: 'Loading images', status: 'loading' },
+        props: { status: 'loading' },
       })
-      const element = screen.getByRole('status')
+      const element = screen.getByTestId('logo-loader')
       expect(element).toHaveAttribute('data-prefers-reduced-motion', 'true')
     })
 

From 3e62fcf9ef78d87010c4fc31282605418ccd2a70 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Thu, 2 Dec 2021 20:01:38 -0500
Subject: [PATCH 10/17] Remove aria todo test

---
 test/unit/specs/components/v-logo-loader.spec.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/test/unit/specs/components/v-logo-loader.spec.js b/test/unit/specs/components/v-logo-loader.spec.js
index 378f4e3a1b..cc627a0de6 100644
--- a/test/unit/specs/components/v-logo-loader.spec.js
+++ b/test/unit/specs/components/v-logo-loader.spec.js
@@ -24,7 +24,5 @@ describe('VLogoLoader', () => {
       const element = screen.getByTestId('logo-loader')
       expect(element).toHaveAttribute('data-prefers-reduced-motion', 'true')
     })
-
-    it.todo('Should render as an aria live region when status is loading')
   })
 })

From f380dc1775ca1c1278e150a70deb234f5d5da178 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Fri, 3 Dec 2021 07:07:19 -0500
Subject: [PATCH 11/17] Update src/components/VLogoLoader/VLogoLoader.vue

Co-authored-by: Olga Bulat <obulat@gmail.com>
---
 src/components/VLogoLoader/VLogoLoader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VLogoLoader/VLogoLoader.vue b/src/components/VLogoLoader/VLogoLoader.vue
index 33a9d293c7..e1b6c31c1f 100644
--- a/src/components/VLogoLoader/VLogoLoader.vue
+++ b/src/components/VLogoLoader/VLogoLoader.vue
@@ -168,7 +168,7 @@ export default defineComponent({
 /**
   The stops at 20% and 40% here are used to simulate a 'pause' whenever the spheres
   reach the start or end of the logo. CSS's built in animation-delay property only
-  works on the first cycle of an animation, not  between subsequent runs.
+  works on the first cycle of an animation, not between subsequent runs.
  */
 @keyframes end-shift {
   0%,

From 65036fd3d5b591f2d84d252624b3583ccd29c638 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Fri, 3 Dec 2021 10:26:48 -0500
Subject: [PATCH 12/17] Update
 src/components/VLogoLoader/meta/VLogoLoader.stories.js

Co-authored-by: Krystle Salazar <krystle.salazar@automattic.com>
---
 src/components/VLogoLoader/meta/VLogoLoader.stories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VLogoLoader/meta/VLogoLoader.stories.js b/src/components/VLogoLoader/meta/VLogoLoader.stories.js
index 75effd5bfc..42d40d4107 100644
--- a/src/components/VLogoLoader/meta/VLogoLoader.stories.js
+++ b/src/components/VLogoLoader/meta/VLogoLoader.stories.js
@@ -17,7 +17,7 @@ const SimpleLoaderStory = (_, { argTypes }) => ({
   template: `
     <div>
       <VLogoLoader v-bind="$props" />
-      <p>Remember to test with the <code class="inline p-0"><pre class="inline bg-light-gray p-0 m-0 leading-normal">prefers-reduced-motion</pre></code> media query. You can find instructions for doing so in Firefox <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences">here.</a>
+      <p>Remember to test with the <code class="inline p-0"><pre class="inline bg-light-gray p-0 m-0 leading-normal">prefers-reduced-motion</pre></code> media query. You can find instructions for doing so in Firefox <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences">here.</a></p>
     </div>
   `,
   components: { VLogoLoader },

From a5eb8db8e1e83dea379b55974a2fcc295ff7030b Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Fri, 3 Dec 2021 11:34:36 -0500
Subject: [PATCH 13/17] Update src/composables/use-event-listener.js

Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
---
 src/composables/use-event-listener.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/composables/use-event-listener.js b/src/composables/use-event-listener.js
index 502da87297..5ce9f30368 100644
--- a/src/composables/use-event-listener.js
+++ b/src/composables/use-event-listener.js
@@ -9,7 +9,7 @@ import {
 /**
  * Use an event listener. Shamelessly stolen from https://logaretm.com/blog/my-favorite-5-vuejs-composables/#useeventlistener
  *
- * @param {Ref<EventTarget | null> | EventTarget} target The target can be a reactive ref which adds flexibility
+ * @param {import('@nuxtjs/composition-api').Ref<EventTarget | null> | EventTarget} target The target can be a reactive ref which adds flexibility
  * @param {string} event
  * @param {(e: Event) => void} handler
  */

From e06038875b5061cffdeb755662cf139f5542f170 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Fri, 3 Dec 2021 11:35:45 -0500
Subject: [PATCH 14/17] Update src/composables/use-media-query.js

Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
---
 src/composables/use-media-query.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/composables/use-media-query.js b/src/composables/use-media-query.js
index 9d002e2b77..4156a34989 100644
--- a/src/composables/use-media-query.js
+++ b/src/composables/use-media-query.js
@@ -13,7 +13,7 @@ export function useMediaQuery(query, options = {}) {
   if (!window) return ref(false)
 
   const mediaQuery = window.matchMedia(query)
-  /** @type {import('@nuxtjs/composition-api').Ref<Boolean>} */
+  /** @type {import('@nuxtjs/composition-api').Ref<boolean>} */
   const matches = ref(mediaQuery.matches)
 
   const handler = (/** @type MediaQueryListEvent */ event) => {

From ae0201d7cd2fbf7dfb983b4d52f3ea9c052825b8 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Fri, 3 Dec 2021 11:57:03 -0500
Subject: [PATCH 15/17] Remove reduced motion animation

---
 src/components/VLogoLoader/VLogoLoader.vue | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/components/VLogoLoader/VLogoLoader.vue b/src/components/VLogoLoader/VLogoLoader.vue
index e1b6c31c1f..ce4ddac143 100644
--- a/src/components/VLogoLoader/VLogoLoader.vue
+++ b/src/components/VLogoLoader/VLogoLoader.vue
@@ -4,7 +4,6 @@
     xmlns="http://www.w3.org/2000/svg"
     :class="{
       [$style.loading]: status === 'loading' && !prefersReducedMotion,
-      [$style.quiet]: status === 'loading' && prefersReducedMotion,
     }"
     aria-hidden="true"
     :data-prefers-reduced-motion="prefersReducedMotion"
@@ -180,18 +179,4 @@ export default defineComponent({
     transform: translateX(var(--circle-shift));
   }
 }
-
-/** A simple opacity pulse for when the user prefers reduced motion. */
-.quiet {
-  animation: scale 1s infinite linear alternate;
-}
-
-@keyframes scale {
-  from {
-    opacity: 0.7;
-  }
-  to {
-    opacity: 1;
-  }
-}
 </style>

From 9808f3f8bfd1429678f64ea035488f36c982aa79 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Fri, 3 Dec 2021 12:00:55 -0500
Subject: [PATCH 16/17] Add complementary test for reduced motion testing

---
 test/unit/specs/components/v-logo-loader.spec.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/test/unit/specs/components/v-logo-loader.spec.js b/test/unit/specs/components/v-logo-loader.spec.js
index cc627a0de6..52d38e8e6b 100644
--- a/test/unit/specs/components/v-logo-loader.spec.js
+++ b/test/unit/specs/components/v-logo-loader.spec.js
@@ -1,12 +1,13 @@
 import { render, screen } from '@testing-library/vue'
 import VLogoLoader from '~/components/VLogoLoader/VLogoLoader.vue'
+import { useReducedMotion } from '~/composables/use-media-query'
 
 jest.mock('~/utils/warn', () => ({
   warn: jest.fn(),
 }))
 
 jest.mock('~/composables/use-media-query', () => ({
-  useReducedMotion: jest.fn(() => true),
+  useReducedMotion: jest.fn(),
 }))
 
 describe('VLogoLoader', () => {
@@ -18,11 +19,22 @@ describe('VLogoLoader', () => {
 
   describe('accessibility', () => {
     it('should render differently when the user prefers reduced motion', () => {
+      useReducedMotion.mockImplementation(() => true)
+
       render(VLogoLoader, {
         props: { status: 'loading' },
       })
       const element = screen.getByTestId('logo-loader')
       expect(element).toHaveAttribute('data-prefers-reduced-motion', 'true')
     })
+    it('should show the default loading style when no motion preference is set', () => {
+      useReducedMotion.mockImplementation(() => false)
+
+      render(VLogoLoader, {
+        props: { status: 'loading' },
+      })
+      const element = screen.getByTestId('logo-loader')
+      expect(element).not.toHaveAttribute('data-prefers-reduced-motion')
+    })
   })
 })

From 12cedb4cd7173ff488e4c17636becde9acbeb288 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Fri, 3 Dec 2021 12:02:18 -0500
Subject: [PATCH 17/17] Update src/components/VLogoLoader/VLogoLoader.types.js

Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
---
 src/components/VLogoLoader/VLogoLoader.types.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VLogoLoader/VLogoLoader.types.js b/src/components/VLogoLoader/VLogoLoader.types.js
index b05d9c3af4..64db226166 100644
--- a/src/components/VLogoLoader/VLogoLoader.types.js
+++ b/src/components/VLogoLoader/VLogoLoader.types.js
@@ -1,6 +1,6 @@
 export const propTypes = {
   status: {
-    type: /** @type {'loading'|'idle'} */ String,
+    type: /** @type {'loading'|'idle'} */ (String),
     default: 'idle',
     required: false,
   },