Fix VIconButton default variant (#1255)

* Fix VIconButton default variant

* Undo unnecessary code changes

* Update POT

* Fix close button position and color

* Increase timeout to prevent flakiness

src/components/VAudioTrack/VPlayPause.vue

@@ -10,8 +10,8 @@
   />
 </template>
 
-<script>
-import { defineComponent } from '@nuxtjs/composition-api'
+<script lang="ts">
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import VIconButton from '~/components/VIconButton/VIconButton.vue'
 
@@ -36,22 +36,20 @@ export default defineComponent({
      * the current play status of the audio
      */
     status: {
-      type: String,
-      validator: (val) => ['playing', 'paused', 'played'].includes(val),
+      type: String as PropType<'playing' | 'paused' | 'played'>,
+      required: true,
+      validator: (val: unknown) =>
+        ['playing', 'paused', 'played'].includes(val as string),
     },
     /**
      * The parent audio layout currently in use
      * @todo This type def should be extracted for reuse across components
      */
     layout: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<'full' | 'box' | 'row' | 'global'>} */ (
-        String
-      ),
+      type: String as PropType<'full' | 'box' | 'row' | 'global'>,
       default: 'full',
-      /**
-       * @param {string} val
-       */
-      validator: (val) => ['full', 'box', 'row', 'global'].includes(val),
+      validator: (val: unknown) =>
+        ['full', 'box', 'row', 'global'].includes(val as string),
     },
   },
   data() {
@@ -69,19 +67,19 @@ export default defineComponent({
     }
   },
   computed: {
-    isPlaying() {
+    isPlaying(): boolean {
       return this.status === 'playing'
     },
     /**
      * Get the button label based on the current status of the player.
      */
-    label() {
+    label(): string {
       return `play-pause.${this.statusVerbMap[this.status]}`
     },
     /**
      * Get the button icon based on the current status of the player.
      */
-    icon() {
+    icon(): string {
       return this.statusIconMap[this.status]
     },
   },

src/components/VButton.vue

@@ -35,6 +35,8 @@ import {
 
 import { warn } from '~/utils/console'
 
+import type { ProperlyExtractPropTypes } from '~/types/prop-extraction'
+
 import VLink from '~/components/VLink.vue'
 
 const buttonForms = ['VLink', 'button'] as const
@@ -63,6 +65,10 @@ const buttonTypes = ['button', 'submit', 'reset'] as const
 
 export type ButtonType = typeof buttonTypes[number]
 
+export type ButtonProps = ProperlyExtractPropTypes<
+  NonNullable<typeof VButton['props']>
+>
+
 /**
  * A button component that behaves just like a regular HTML `button` element
  * aside from pre-applied styles based on the passed in variant.

src/components/VContentReport/VContentReportPopover.vue

@@ -9,11 +9,15 @@
       <VContentReportButton v-bind="a11yProps" />
     </template>
     <template #default="{ close }">
-      <div class="relative">
+      <div class="relative" data-testid="content-report-popover">
         <VIconButton
-          class="absolute top-0 end-0 border-none"
+          class="absolute top-0 end-0 border-none text-dark-charcoal-70"
           size="search-medium"
           :icon-props="{ iconPath: icons.closeSmall }"
+          :button-props="{
+            'aria-label': $t('modal.close').toString(),
+            variant: 'plain',
+          }"
           @click="close"
         />
         <VContentReportForm

src/components/VFilters/VFilterChecklist.vue

@@ -42,7 +42,7 @@
           <div class="relative">
             <VIconButton
               :aria-label="$t('modal.close')"
-              class="absolute top-2 end-2 border-none"
+              class="absolute top-0 end-0 border-none text-dark-charcoal-70"
               size="small"
               :icon-props="{ iconPath: icons.closeSmall }"
               @click="close"

src/components/VIconButton/VIconButton.vue

@@ -19,7 +19,7 @@
 import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import VIcon, { IconProps } from '~/components/VIcon/VIcon.vue'
-import VButton from '~/components/VButton.vue'
+import VButton, { ButtonProps } from '~/components/VButton.vue'
 import type { ButtonType } from '~/components/VButton.vue'
 
 const SIZE_MAP = Object.freeze({
@@ -65,7 +65,10 @@ export default defineComponent({
      * props to pass down to the `VButton` component nested inside the button;
      * See documentation on `VButton`.
      */
-    buttonProps: {},
+    buttonProps: {
+      type: Object as PropType<ButtonProps>,
+      default: () => ({ variant: 'plain' }),
+    },
   },
   setup(props, { attrs }) {
     const type = (attrs['type'] ?? 'button') as ButtonType

src/locales/po-files/openverse.pot

@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-04-18T13:47:09+00:00\n"
+"POT-Creation-Date: 2022-04-22T12:44:37+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -93,7 +93,7 @@ msgctxt "error-images.waiting-for-a-bite"
 msgid "Three boys sit on a broken log while two of them fish."
 msgstr ""
 
-#: src/components/VFilters/VFilterChecklist.vue:44
+#: src/components/VContentReport/VContentReportPopover.vue:18
 msgctxt "modal.close"
 msgid "Close"
 msgstr ""

src/types/prop-extraction.ts

@@ -0,0 +1,17 @@
+import type {
+  ExtractPropTypes,
+  ExtractDefaultPropTypes,
+} from '@nuxtjs/composition-api'
+
+/**
+ * Correctly extracts optional prop types.
+ *
+ * I think this is fixed in the Vue 3 types but hasn't been
+ * ported back to `@vue/composition-api` so for now we have
+ * to suffer this ugly type.
+ */
+export type ProperlyExtractPropTypes<P> = Omit<
+  ExtractPropTypes<P>,
+  keyof ExtractDefaultPropTypes<P>
+> &
+  Partial<ExtractDefaultPropTypes<P>>

test/playwright/visual-regression/content-report-form.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('content report form', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/image/feb91b13-422d-46fa-8ef4-cbf1e6ddee9b')
+  })
+
+  test('unfocused close button', async ({ page }) => {
+    await page.click('button:has-text("report")', { timeout: 500 })
+    const form = page.locator('[data-testid="content-report-popover"]')
+
+    expect(await form.screenshot({ timeout: 500 })).toMatchSnapshot({
+      name: 'content-report-unfocused.png',
+    })
+  })
+
+  test('focused close button', async ({ page }) => {
+    await page.click('button:has-text("report")', { timeout: 500 })
+    const form = page.locator('[data-testid="content-report-popover"]')
+
+    await form.locator('[aria-label="Close"]').focus({ timeout: 500 })
+    expect(await form.screenshot()).toMatchSnapshot({
+      name: 'content-report-focused.png',
+    })
+  })
+})

test/tapes/detail_images_feb91b13-422d-46fa-8ef4-cbf1e6ddee9b_close.json5

@@ -0,0 +1,114 @@
+{
+    meta: {
+        createdAt: '2022-04-11T12:31:19.362Z',
+        host: 'https://api.openverse.engineering',
+        resHumanReadable: true,
+    },
+    req: {
+        headers: {
+            accept: 'application/json, text/plain, */*',
+            connection: 'close',
+        },
+        url: '/v1/images/feb91b13-422d-46fa-8ef4-cbf1e6ddee9b/',
+        method: 'GET',
+        body: '',
+    },
+    res: {
+        status: 200,
+        headers: {
+            date: [
+                'Mon, 11 Apr 2022 12:31:19 GMT',
+            ],
+            'content-type': [
+                'application/json',
+            ],
+            'transfer-encoding': [
+                'chunked',
+            ],
+            connection: [
+                'close',
+            ],
+            vary: [
+                'Accept-Encoding, Accept, Authorization, Origin',
+            ],
+            allow: [
+                'GET, HEAD, OPTIONS',
+            ],
+            'x-frame-options': [
+                'DENY',
+            ],
+            'x-content-type-options': [
+                'nosniff',
+            ],
+            'referrer-policy': [
+                'same-origin',
+            ],
+            'cross-origin-opener-policy': [
+                'same-origin',
+            ],
+            'cache-control': [
+                'max-age=14400',
+            ],
+            'cf-cache-status': [
+                'HIT',
+            ],
+            age: [
+                '533',
+            ],
+            'last-modified': [
+                'Mon, 11 Apr 2022 12:22:26 GMT',
+            ],
+            'expect-ct': [
+                'max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"',
+            ],
+            'strict-transport-security': [
+                'max-age=15552000; includeSubDomains; preload',
+            ],
+            server: [
+                'cloudflare',
+            ],
+            'cf-ray': [
+                '6fa3bd128beb0e12-MXP',
+            ],
+            'alt-svc': [
+                'h3=":443"; ma=86400, h3-29=":443"; ma=86400',
+            ],
+        },
+        body: {
+            id: 'feb91b13-422d-46fa-8ef4-cbf1e6ddee9b',
+            title: 'Galah in Darwin (Eolophus roseicapilla)',
+            foreign_landing_url: 'https://www.flickr.com/photos/126953422@N04/40593461235',
+            creator: 'Graham Winterflood',
+            creator_url: 'https://www.flickr.com/photos/126953422@N04',
+            url: 'https://live.staticflickr.com/894/40593461235_b72593df28_b.jpg',
+            filesize: null,
+            filetype: null,
+            license: 'by-sa',
+            license_version: '2.0',
+            license_url: 'https://creativecommons.org/licenses/by-sa/2.0/',
+            provider: 'flickr',
+            source: 'flickr',
+            category: null,
+            tags: [
+                {
+                    name: 'bird',
+                },
+                {
+                    name: 'canoneos7d',
+                },
+                {
+                    name: 'eolophusroseicapilla',
+                },
+                {
+                    name: 'galah',
+                },
+            ],
+            attribution: '"Galah in Darwin (Eolophus roseicapilla)" by Graham Winterflood is licensed under CC-BY-SA 2.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/2.0/.',
+            height: 683,
+            width: 1024,
+            thumbnail: 'http://localhost:49153/v1/images/feb91b13-422d-46fa-8ef4-cbf1e6ddee9b/thumb/',
+            detail_url: 'http://localhost:49153/v1/images/feb91b13-422d-46fa-8ef4-cbf1e6ddee9b/',
+            related_url: 'http://localhost:49153/v1/images/feb91b13-422d-46fa-8ef4-cbf1e6ddee9b/related/',
+        },
+    },
+}