Convert 'See Resume' on About page to a button to meet WCAG requirements

Author: webstackdev

src/components/Button/server/__tests__/index.spec.ts

@@ -50,6 +50,16 @@ describe('Button server helpers', () => {
       expect(classList['aspect-square']).toBe(true)
       expect(classList['p-2']).toBe(true)
     })
+
+    it('supports the page-inverse variant', () => {
+      const classList = buildButtonClassList({
+        variant: 'page-inverse',
+      })
+
+      expect(classList['bg-page-inverse']).toBe(true)
+      expect(classList['text-content-inverse']).toBe(true)
+      expect(classList['hover:bg-content-active']).toBe(true)
+    })
   })
 
   describe('resolveAriaLabel', () => {

src/components/Button/server/index.ts

@@ -1,6 +1,7 @@
 export type ButtonVariant =
   | 'danger'
   | 'note'
+  | 'page-inverse'
   | 'primary'
   | 'secondary'
   | 'twitter'
@@ -81,6 +82,11 @@ const variantClasses: Record<ButtonVariant, string> = {
     'hover:bg-note-offset ' +
     'focus-visible:bg-note-offset ' +
     'active:bg-note-offset',
+  'page-inverse':
+    'bg-page-inverse text-content-inverse ' +
+    'hover:bg-content-active ' +
+    'focus-visible:bg-content-active ' +
+    'active:bg-content-active',
   primary:
     'bg-primary text-primary-inverse ' +
     'hover:bg-primary-offset ' +

src/components/Pages/About/index.astro

@@ -1,6 +1,7 @@
 ---
 import Contact from '@components/CallToAction/Contact/index.astro'
 import HeadingAnchor from '@components/Layout/HeadingAnchor/index.astro'
+import Button from '@components/Button/index.astro'
 import Icon from '@components/Icon/index.astro'
 
 export type Props = {
@@ -88,13 +89,17 @@ const expertiseIcons = ['cloud', 'document', 'gear', 'globe', 'wrench', 'chart']
               <h3 class="text-page-inverse mb-2">{item.title}</h3>
               <p class="text-content leading-relaxed">{item.description}</p>
               {index === 0 && (
-                <a
-                  href="https://webstackdev.github.io/"
-                  class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-(--color-secondary) hover:text-(--color-secondary-offset) transition-colors"
-                >
-                  View Resume
-                  <Icon icon="exit-right-thin" size={4} color="inherit" />
-                </a>
+                <div class="mt-3 flex justify-end">
+                  <Button
+                    text="View C.V."
+                    variant="page-inverse"
+                    size="small"
+                    href="https://webstackbuilders.com/resume"
+                    icon="arrow-right"
+                    iconPosition="right"
+                    iconSize={4}
+                  />
+                </div>
               )}
             </div>
           </div>

src/components/Pages/Contact/uppy-dashboard.css

@@ -2351,11 +2351,16 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
 }
 
 .uppy-Dashboard-browse {
+  align-items: center;
   color: var(--color-primary-offset);
   cursor: pointer;
+  display: inline-flex;
+  min-height: 24px;
+  min-width: 24px;
   text-decoration-color: var(--color-primary-offset);
   text-decoration-line: underline;
   text-decoration-style: dotted;
+  vertical-align: middle;
 }
 
 .uppy-Dashboard-browse:focus {