fix: some effort into improving accessibility

xiduzo · Sep 28, 2024 · b3d4f7d · b3d4f7d
1 parent ab5fff9
commit b3d4f7d
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 24 deletions.
diff --git a/apps/nextjs/src/components/AppScreen.tsx b/apps/nextjs/src/components/AppScreen.tsx
@@ -9,7 +9,7 @@ export function AppScreen({
   ...props
 }: React.ComponentPropsWithoutRef<'div'>) {
   return (
-    <div className={clsx('flex flex-col', className)} {...props}>
+    <div className={clsx('flex flex-col', className)} {...props} aria-hidden="true">
       <div className="text-white flex justify-between px-4 pt-2">
         <h1 className='text-xl font-bold'>Fissa 1994</h1>
         <Settings />

diff --git a/apps/nextjs/src/components/AppStoreLink.tsx b/apps/nextjs/src/components/AppStoreLink.tsx
@@ -9,8 +9,9 @@ export function AppStoreLink() {
       className="flex items-center justify-center"
     >
       <Image
+        aria-hidden="true"
         width={192}
-        height={108}
+        height={75}
         src="https://apple-resources.s3.amazonaws.com/media-badges/download-on-the-app-store/black/en-us.svg"
         alt="Download on the App Store"
       />

diff --git a/apps/nextjs/src/components/Faqs.tsx b/apps/nextjs/src/components/Faqs.tsx
@@ -4,7 +4,7 @@ import { Container } from './Container'
 const faqs = [
   [
     {
-      question: 'Why shouldn\'t I host a Spotify jam istead?',
+      question: 'Why shouldn\'t I host a Spotify jam instead?',
       answer:
         'Fissa does not require you to be on the same network to jam. Besides, Fissa allows you to vote on the next song, allowing you to skip those bad songs on top of the queue.',
     },
@@ -50,7 +50,7 @@ const faqs = [
     {
       question: 'Fissa is awesome!',
       answer:
-        'Not realy a question, but thank you. You are awesome too!',
+        'Not realy a question, but thank you. You are awesome too ♥️!',
     },
   ],
 ]

diff --git a/apps/nextjs/src/components/Footer.tsx b/apps/nextjs/src/components/Footer.tsx
@@ -15,8 +15,8 @@ export function Footer() {
         <div className="flex flex-col items-start justify-between gap-y-12 pb-6 pt-16 lg:flex-row lg:items-center lg:py-16">
           <div className='flex-grow'>
             <div className="flex items-center">
-              <Logomark className="h-10 w-10 flex-none rounded-md" />
-              <div className="ml-4">
+              <Logomark className="h-10 w-10 flex-none rounded-md" aria-hidden="true" />
+              <div className="ml-4" aria-label='Fissa, everyone can be a DJ.'>
                 <p className="text-base font-semibold">Fissa</p>
                 <p className="mt-1 text-sm">Everyone can be a DJ.</p>
               </div>

diff --git a/apps/nextjs/src/components/PhoneFrame.tsx b/apps/nextjs/src/components/PhoneFrame.tsx
@@ -27,7 +27,7 @@ export function PhoneFrame({
   const { theme } = useTheme()
 
   return (
-    <div className={clsx('relative aspect-[366/729]', className)} {...props}>
+    <div className={clsx('relative aspect-[366/729]', className)} {...props} aria-hidden="true">
       <div className="absolute inset-y-[calc(1/729*100%)] left-[calc(7/729*100%)] right-[calc(5/729*100%)] rounded-[calc(58/366*100%)/calc(58/729*100%)] shadow-2xl" />
       <div className="absolute left-[calc(23/366*100%)] top-[calc(23/729*100%)] grid h-[calc(686/729*100%)] w-[calc(318/366*100%)] transform grid-cols-1 overflow-hidden pt-[calc(23/318*100%)]" style={{
         backgroundColor: theme['900']

diff --git a/apps/nextjs/src/components/PlayStoreLink.tsx b/apps/nextjs/src/components/PlayStoreLink.tsx
@@ -4,13 +4,14 @@ import Link from 'next/link';
 export function PlayStoreLink() {
   return (
     <Link
-      href="https://apps.apple.com/us/app/fissa-houseparty/id1632218985?itsct=apps_box_badge&itscg=30200"
-      aria-label="Download on the App Store"
+      href="https://play.google.com/store/apps/details?id=com.fissa&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"
+      aria-label="Get it on Google Play"
       className="flex items-center justify-center"
     >
       <Image
+        aria-hidden="true"
         width={192}
-        height={108}
+        height={75}
         src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png"
         alt="Get it on Google Play"
       />

diff --git a/apps/nextjs/src/components/PrimaryFeatures.tsx b/apps/nextjs/src/components/PrimaryFeatures.tsx
@@ -305,18 +305,21 @@ function FeaturesDesktop() {
                 style={{ backgroundColor: theme[900] }}
               />
             )}
-            <div className="relative z-10 p-8">
-              <feature.icon className="h-8 w-8  transition-all duration-150 delay-150" style={{ color: featureIndex === selectedIndex ? theme[100] : theme[900] }} />
-                <h3 className="mt-6 text-lg font-semibold transition-all duration-150 delay-150" style={{ color: featureIndex === selectedIndex ? theme[100] : theme[900] }}>
-                <Tab className="text-left ui-not-focus-visible:outline-none">
-                  <span className="absolute inset-0 rounded-2xl" />
-                  {feature.name}
-                </Tab>
-              </h3>
-              <p className="mt-2 text-sm transition-all duration-150 delay-150" style={{ color: featureIndex === selectedIndex ? theme[100] : theme[900] }}>
-                {feature.description}
-              </p>
-            </div>
+            <Tab className="text-left ui-not-focus-visible:outline-none w-full" onMouseOver={() => {
+              setSelectedIndex(featureIndex)
+            }}>
+              <div className="relative z-10 p-8">
+                <feature.icon className="h-8 w-8  transition-all duration-150 delay-150" style={{ color: featureIndex === selectedIndex ? theme[100] : theme[900] }} />
+                  <h3 className="mt-6 text-lg font-semibold transition-all duration-150 delay-150" style={{ color: featureIndex === selectedIndex ? theme[100] : theme[900] }}>
+
+                    <span className="absolute inset-0 rounded-2xl" />
+                    {feature.name}
+                </h3>
+                <p className="mt-2 text-sm transition-all duration-150 delay-150" style={{ color: featureIndex === selectedIndex ? theme[100] : theme[900] }}>
+                  {feature.description}
+                </p>
+              </div>
+            </Tab>
           </div>
         ))}
       </TabList>
@@ -451,7 +454,7 @@ export function PrimaryFeatures() {
   return (
     <section
       id="features"
-      aria-label="Features for investing all your money"
+      aria-label="Features of Fissa"
       className="py-20 sm:py-32"
       style={{ backgroundColor: theme['100'] }}
     >
@@ -461,7 +464,7 @@ export function PrimaryFeatures() {
             A collaborative and democratic playlist
           </h2>
           <p className="mt-2 text-lg" style={{ color: theme['900'] + '90'}}>
-            Powered by Spotify, controlled by you.<br/>Host a Fissa and let the crowd decide what to play next!
+            Powered by Spotify, controlled by you.<br aria-hidden="true"/>Host a Fissa and let the crowd decide what to play next!
           </p>
         </div>
       </Container>