fix: updated a11y compatibility

fluid-design-io · Jun 24, 2024 · 77db6c6 · 77db6c6
1 parent 88ece18
commit 77db6c6
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 16 deletions.
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -15,8 +15,7 @@ const comfortaa = Comfortaa({
 
 export const viewport: Viewport = {
   initialScale: 1.0,
-  maximumScale: 1.0,
-  userScalable: false,
+  userScalable: true,
   viewportFit: 'cover',
   width: 'device-width',
 }

diff --git a/apps/web/components/core/site-footer.tsx b/apps/web/components/core/site-footer.tsx
@@ -7,19 +7,19 @@ function SiteFooter() {
   return (
     <footer
       className={cn(
-        'transition-bg border-t border-border/30 bg-background-accent',
+        'transition-bg border-t border-border/30 text-foreground/60 contrast-more:text-foreground/85',
         'pb-[calc(8rem+env(safe-area-inset-bottom))] lg:pb-0'
       )}
     >
       <div className="mx-auto max-w-[120rem] px-6 py-4 md:flex md:items-center md:justify-between lg:px-8">
         <div className="flex justify-center space-x-6 md:order-2">
-          <Link className="text-xs text-foreground/50 underline" href="/how">
+          <Link className="text-xs underline" href="/how">
             How it works
           </Link>
 
           <a
             aria-label="Release Notes"
-            className="text-[0.7rem] text-foreground/50 hover:underline"
+            className="text-[0.7rem] hover:underline"
             href="https://github.com/fluid-design-io/fluid-design/releases"
             referrerPolicy="no-referrer"
             rel="noopener noreferrer"
@@ -30,7 +30,7 @@ function SiteFooter() {
           </a>
         </div>
         <div className="mt-8 md:order-1 md:mt-0">
-          <p className="text-center text-xs leading-5 text-gray-500">
+          <p className="text-center text-xs leading-5">
             Built by{' '}
             <a
               className="underline"

diff --git a/apps/web/components/palette/analogous-mono-palettes.tsx b/apps/web/components/palette/analogous-mono-palettes.tsx
@@ -47,14 +47,13 @@ const PillPalette = ({ color, type }: { color: string; type: 'analogous' | 'mono
       {colors.map((c, i) => {
         const isDark = tinycolor(color).isDark()
         const foregroundColor = isDark
-          ? 'text-white/30 hover:text-white/70 focus:text-white/70 contrast-more:text-white/80 contrast-more:hover:text-white contrast-more:font-medium'
-          : 'text-black/30 hover:text-black/70 focus:text-black/70 contrast-more:text-black/80 contrast-more:hover:text-black contrast-more:font-medium'
+          ? 'text-white/0 transition-colors group-hover/pill-btn:text-white/70 group-focus/pill-btn:text-white/70 contrast-more:text-white/80 contrast-more:hover:text-white contrast-more:font-medium'
+          : 'text-black/0 transition-colors group-hover/pill-btn:text-black/70 group-focus/pill-btn:text-black/70 contrast-more:text-black/80 contrast-more:hover:text-black contrast-more:font-medium'
         return (
           <button
             aria-label={`Copy ${c} to clipboard`}
             className={cn(
-              'group/pill-btn flex h-10 w-full items-center justify-between rounded-full border border-border px-2.5 text-xs transition-colors duration-500 focus:outline-none focus:ring focus:ring-accent focus:ring-opacity-50',
-              foregroundColor
+              'group/pill-btn flex h-10 w-full items-center justify-between rounded-full border border-border px-2.5 text-xs transition-colors duration-500 focus:outline-none focus:ring focus:ring-accent focus:ring-opacity-50'
             )}
             key={`${type}-${i}`}
             style={{
@@ -63,10 +62,15 @@ const PillPalette = ({ color, type }: { color: string; type: 'analogous' | 'mono
             }}
             type="button"
           >
-            <motion.code className="animate-text" key={`${type}-text-${i}`}>
+            <motion.code className={cn('animate-text', foregroundColor)} key={`${type}-text-${i}`}>
               {colorString(c)}
             </motion.code>
-            <Copy className="h-4 w-4 opacity-0 transition-opacity group-hover/pill-btn:opacity-100 group-focus/pill-btn:opacity-100" />
+            <Copy
+              className={cn(
+                'h-4 w-4 opacity-0 transition-opacity group-hover/pill-btn:opacity-100 group-focus/pill-btn:opacity-100',
+                foregroundColor
+              )}
+            />
           </button>
         )
       })}

diff --git a/apps/web/components/palette/six-thirty-ten-palette.tsx b/apps/web/components/palette/six-thirty-ten-palette.tsx
@@ -50,7 +50,7 @@ function SixtyThirtyTenPalettes({ className }: { className?: string }) {
             >
               <div
                 className={cn(
-                  'absolute start-0 top-0 p-4 font-sans text-lg font-extralight text-background/70 delay-300 duration-700',
+                  'absolute start-0 top-0 p-4 font-sans text-lg font-extralight text-background/80 delay-300 duration-700',
                   'contrast-more:font-medium contrast-more:text-foreground/80 contrast-more:hover:text-foreground',
                   'animate-text transition-all'
                 )}

diff --git a/apps/web/components/ui/dice-button.tsx b/apps/web/components/ui/dice-button.tsx
@@ -7,10 +7,8 @@ import { Button } from '@ui/components/ui/button'
 import { cn } from '@ui/lib/utils'
 import { AnimatePresence, motion } from 'framer-motion'
 import { Dice1, Dice2, Dice3, Dice4, Dice5, Dice6 } from 'lucide-react'
-import dynamic from 'next/dynamic'
 import { useState } from 'react'
-
-const MobilePrimaryMenu = dynamic(() => import('@/components/ui/mobile-primary-menu'), { ssr: false })
+import MobilePrimaryMenu from './mobile-primary-menu'
 
 export const DiceButton = () => {
   const [face, setFace] = useState(0)