Improve typography accessibility (#81)

Co-authored-by: Ayush Gupta <[email protected]>
scriptified · Dec 10, 2021 · 2e9c342 · 2e9c342
1 parent 5a79c8e
commit 2e9c342
Show file tree

Hide file tree

Showing 25 changed files with 85 additions and 73 deletions.
diff --git a/components/ArticleItem.tsx b/components/ArticleItem.tsx
@@ -12,11 +12,11 @@ const ArticleItem = ({ article }: { article: Article }): JSX.Element => {
   return (
     <div className="mt-0 mx-0 py-4" key={url}>
       <a href={url} target="_blank" rel="noreferrer">
-        <Text type="h2" color={`text-${theme}-600`} inline additionalStyles="hover:underline">
+        <Text size="2xl" as="h4" color={`text-${theme}-600`} additionalStyles="hover:underline">
           {title}
         </Text>
       </a>
-      <Text type="base" additionalStyles="py-2">
+      <Text size="md" as="div" additionalStyles="py-2">
         <Markdown>{desc}</Markdown>
       </Text>
       <Authors authors={authors} />

diff --git a/components/Authors.tsx b/components/Authors.tsx
@@ -4,15 +4,15 @@ import Text from './common/Text';
 function Authors({ authors }: { authors: Author[] }): JSX.Element {
   return (
     <div className="pb-2">
-      <Text inline type="small" color="text-gray-600" additionalStyles="py-2 pr-1">
+      <Text as="span" size="sm" color="text-gray-600" additionalStyles="py-2 pr-1">
         by
       </Text>
       {authors.length
         ? authors?.map((author, index) => {
             const isLastElement = index === authors.length - 1;
             return (
               <a href={author.website} target="_blank" rel="noreferrer" key={author.id}>
-                <Text inline additionalStyles="uppercase hover:underline" type="small" color="text-gray-600">
+                <Text as="span" additionalStyles="uppercase hover:underline" size="sm" color="text-gray-600">
                   {isLastElement ? author.name : `${author.name}, `}
                 </Text>
               </a>

diff --git a/components/Curators.tsx b/components/Curators.tsx
@@ -61,11 +61,12 @@ function Curators(): JSX.Element {
         <Text
           additionalStyles="pt-2 text-3xl leading-8 font-extrabold tracking-wide sm:text-4xl md:text-5xl sm:leading-10"
           color={`text-${theme}-900`}
-          type="h1"
+          size="4xl"
+          as="h2"
         >
           Curators
         </Text>
-        <Text additionalStyles="pt-4 max-w-2xl text-xl leading-7 lg:mx-auto" color={`text-${theme}-700`} type="base">
+        <Text additionalStyles="pt-4 max-w-2xl text-xl leading-7 lg:mx-auto" color={`text-${theme}-700`} size="md">
           The two nerdy devs who curate this newsletter for you
         </Text>
       </div>
@@ -103,15 +104,15 @@ function Curators(): JSX.Element {
                     className={`text-${theme}-800 hover:underline`}
                   >
                     <Text
-                      type="h1"
+                      size="4xl"
                       color="text-transparent"
                       additionalStyles={`bg-gradient-to-b from-${theme}-600 to-${theme}-800 bg-clip-text`}
-                      inline
+                      as="h3"
                     >
                       {curator.name}
                     </Text>
                   </a>
-                  <Text type="base" color={`text-${theme}-700`} inline additionalStyles="py-4 max-w-3xl">
+                  <Text size="md" color={`text-${theme}-700`} as="div" additionalStyles="py-4 max-w-3xl">
                     <Markdown>{curator.desc}</Markdown>
                   </Text>
                   <SocialLinks links={curator.links} additionalStyles="space-x-3" />

diff --git a/components/DevOfTheWeekItem.tsx b/components/DevOfTheWeekItem.tsx
@@ -35,11 +35,11 @@ const DevOfTheWeekItem = ({
         </div>
       </div>
       <a href={profileLink.website} target="_blank" rel="noreferrer">
-        <Text type="h2" color={`text-${theme}-600`} inline additionalStyles="hover:underline">
+        <Text size="2xl" color={`text-${theme}-600`} as="h4" additionalStyles="hover:underline">
           {name}
         </Text>
       </a>
-      <Text type="base" additionalStyles="pt-2 pb-4">
+      <Text size="md" as="div" additionalStyles="pt-2 pb-4">
         <Markdown>{bio}</Markdown>
       </Text>
       <div className="flex">

diff --git a/components/FeatureSection.tsx b/components/FeatureSection.tsx
@@ -59,15 +59,16 @@ const FeatureSection = (): JSX.Element => {
           <Text
             additionalStyles="pt-2 text-3xl leading-8 font-extrabold tracking-wide sm:text-4xl md:text-5xl sm:leading-10 text-shadow"
             color="text-white"
-            type="h1"
+            size="4xl"
+            as="h2"
           >
             Sections
           </Text>
 
           <Text
             additionalStyles="pt-4 max-w-2xl text-xl leading-7 lg:mx-auto text-shadow"
             color={`text-${theme}-100`}
-            type="base"
+            size="md"
           >
             A look at what&apos;s inside our newsletter
           </Text>
@@ -85,7 +86,12 @@ const FeatureSection = (): JSX.Element => {
                       {feature.icon}
                     </div>
                     <div className="pl-4">
-                      <Text type="h2" color="text-white" additionalStyles="text-lg leading-6 font-semibold text-shadow">
+                      <Text
+                        size="2xl"
+                        as="h3"
+                        color="text-white"
+                        additionalStyles="text-lg leading-6 font-semibold text-shadow"
+                      >
                         {feature.name}
                       </Text>
                       <Text

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -34,7 +34,7 @@ const Footer = (): JSX.Element => {
               </span>
             </a>
           </Link>
-          <Text inline color={`text-${theme}-900`} additionalStyles="text-sm font-semibold pb-3 lg:pb-0 text-pom">
+          <Text as="span" color={`text-${theme}-900`} additionalStyles="text-sm font-semibold pb-3 lg:pb-0 text-pom">
             &#169; {new Date().getFullYear()}. All rights reserved.
           </Text>
         </div>
@@ -44,7 +44,7 @@ const Footer = (): JSX.Element => {
             <li className="p-0">
               <Link href="/">
                 <a className="hover:underline text-pom p-2 inline-flex items-center">
-                  <Text inline additionalStyles={`text-${theme}-900`}>
+                  <Text as="span" additionalStyles={`text-${theme}-900`}>
                     Subscribe
                   </Text>
                 </a>
@@ -53,7 +53,7 @@ const Footer = (): JSX.Element => {
             <li className="p-0">
               <Link href="/issues">
                 <a className="hover:underline text-pom p-2 inline-flex items-center">
-                  <Text inline additionalStyles={`text-${theme}-900`}>
+                  <Text as="span" additionalStyles={`text-${theme}-900`}>
                     View Issues
                   </Text>
                 </a>

diff --git a/components/GIFItem.tsx b/components/GIFItem.tsx
@@ -58,7 +58,7 @@ const GIFItem = ({ gif }: { gif: Gif }): JSX.Element => {
   return (
     <div className="flex flex-col items-center">
       <div className="mt-4">{renderMedia({ format, source: gifURL, caption })}</div>
-      <Text type="small" color="text-gray-700" additionalStyles="mt-3 text-center">
+      <Text size="sm" as="div" color="text-gray-700" additionalStyles="mt-3 text-center">
         <Markdown>{caption}</Markdown>
       </Text>
     </div>

diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
@@ -22,19 +22,17 @@ const HeroSection = (): JSX.Element => {
         <div className="flex justify-center h-24 w-24 md:h-32 md:w-32 mt-4 sm:mt-6 lg:mt-12">
           <ScriptifiedLogo color={`text-${theme}-100`} additionalStyles="h-24 w-24 md:h-32 md:w-32" />
         </div>
-        <Text type="h1" color={`text-${theme}-100`}>
-          <h1 className="text-shadow text-6xl">{siteConfig.name}</h1>
+        <Text as="h1" size="6xl" color={`text-${theme}-100`} additionalStyles="text-shadow">
+          {siteConfig.name}
         </Text>
       </div>
       <Text
-        // type="h1"
+        as="h2"
+        size="3xl"
         color={`text-${theme}-100`}
-        additionalStyles="text-3xl mb-10 sm:mb-12 lg:mb-16 max-w-3xl text-center px-4"
+        additionalStyles="mb-10 sm:mb-12 lg:mb-16 max-w-3xl text-center px-4 text-shadow"
       >
-        <h2 className="text-shadow text-3xl">
-          {`${descPart1} `}
-          <span className="whitespace-nowrap">{descPart2}</span>
-        </h2>
+        {descPart1} <span className="whitespace-nowrap">{descPart2}</span>
       </Text>
       <div className="w-5/6 sm:mx-8 lg:w-2/4 mb-2 relative z-10">
         <SubscribeCard homePage />

diff --git a/components/IssueItem.tsx b/components/IssueItem.tsx
@@ -18,7 +18,8 @@ const IssueItem = ({
     <div id={id} className="my-20">
       <div className="flex flex-row items-center">
         <Text
-          type="h1"
+          size="4xl"
+          as="h3"
           color="text-transparent"
           additionalStyles={`sm:text-4xl md:text-5xl bg-gradient-to-b from-${theme}-600 to-${theme}-900 bg-clip-text`}
         >

diff --git a/components/LatestIssues.tsx b/components/LatestIssues.tsx
@@ -12,7 +12,7 @@ const LatestIssues = ({ allIssuesData }: { allIssuesData: Meta[] }): JSX.Element
 
   return (
     <Fragment>
-      <Text color={`text-${theme}-900`} additionalStyles="text-5xl leading-snug py-8 mx-0" type="h1">
+      <Text color={`text-${theme}-900`} additionalStyles="leading-snug py-8 mx-0" size="4xl" as="h2">
         Latest Issues
       </Text>
       <ul className="m-0 p-0 list-none">

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -10,6 +10,7 @@ import { useLoadingState } from './LoadingContext';
 import { ScriptifiedLogo } from './icons/icons';
 import { useRouter } from 'next/router';
 import FloatingShareButton from './common/FloatingShareButton';
+import Text from './common/Text';
 
 export const siteConfig = {
   name: 'Scriptified',
@@ -128,13 +129,13 @@ export default function Layout({
                       <ScriptifiedLogo color={`text-${theme}-900`} additionalStyles="w-24 h-24" />
                     </a>
                   </Link>
-                  <h2 className="text-6xl leading-snug my-4 mx-0">
+                  <Text as="h1" size="6xl" additionalStyles="leading-snug my-4 mx-0">
                     <Link href="/">
                       <a className={`no-underline hover:underline text-${theme}-900 font-bold font-sniglet`}>
                         {siteConfig.name}
                       </a>
                     </Link>
-                  </h2>
+                  </Text>
                 </>
               )}
             </header>

diff --git a/components/Quiz.tsx b/components/Quiz.tsx
@@ -33,7 +33,7 @@ const QuizComponent = ({ quiz }: { quiz: Quiz }): JSX.Element => {
 
   return (
     <div>
-      <Text type="h2" color={`text-${theme}-600`} additionalStyles="pt-4">
+      <Text as="h4" size="2xl" color={`text-${theme}-600`} additionalStyles="pt-4">
         {quiz.question}
       </Text>
       {quiz.snippet && <CodeSnippet snippet={quiz.snippet} />}
@@ -49,7 +49,7 @@ const QuizComponent = ({ quiz }: { quiz: Quiz }): JSX.Element => {
         />
       ))}
       <div className="flex justify-center w-full">
-        <Button type="primary" size="lg" onClick={handleSubmit}>
+        <Button type="primary" size="xl" onClick={handleSubmit}>
           Submit
         </Button>
       </div>
@@ -124,11 +124,11 @@ const Option = ({
           )}
         </>
       )}
-      <Text type="base" color={`text-${theme}-900`} additionalStyles="pl-2">
+      <Text size="md" as="div" color={`text-${theme}-900`} additionalStyles="pl-2">
         <Markdown>{option.text}</Markdown>
       </Text>
       {isShowingDetailView && (
-        <Text type="small" color={`text-${theme}-800`} additionalStyles="mt-2 pl-2">
+        <Text size="sm" as="div" color={`text-${theme}-800`} additionalStyles="mt-2 pl-2">
           <Markdown>{option.description}</Markdown>
         </Text>
       )}

diff --git a/components/TechTalk.tsx b/components/TechTalk.tsx
@@ -16,7 +16,7 @@ const TechTalk = ({ techTalk }: { techTalk: Talk }): JSX.Element => {
 
   return (
     <div className="py-8">
-      <Text type="h2" additionalStyles="pb-4" color={`text-${theme}-600`}>
+      <Text size="2xl" as="h4" additionalStyles="pb-4" color={`text-${theme}-600`}>
         {title}
       </Text>
       <div className="player-wrapper py-3">
@@ -30,7 +30,7 @@ const TechTalk = ({ techTalk }: { techTalk: Talk }): JSX.Element => {
           light
         />
       </div>
-      <Text additionalStyles="my-4">
+      <Text additionalStyles="my-4" as="div">
         <Markdown>{desc}</Markdown>
       </Text>
       <Authors authors={authors} />

diff --git a/components/TipOfTheWeekItem.tsx b/components/TipOfTheWeekItem.tsx
@@ -9,7 +9,7 @@ const TipOfTheWeekItem = ({ tipOfTheWeek }: { tipOfTheWeek: TipOfTheWeek }): JSX
 
   return (
     <div className="mt-0 mx-0 py-4">
-      <Text type="base" additionalStyles="py-4 relative z-10">
+      <Text size="md" as="div" additionalStyles="py-4 relative z-10">
         <Markdown>{desc}</Markdown>
       </Text>
       {snippet ? <CodeSnippet snippet={snippet} /> : null}

diff --git a/components/common/IssueListItem.tsx b/components/common/IssueListItem.tsx
@@ -26,7 +26,8 @@ const IssueListItem = ({ issueData }: { issueData: Meta }): JSX.Element => {
           <Link href="/issues/[number]" as={`/issues/${number}`}>
             <a className={`text-${theme}-600 font-sans font-semibold text-2xl no-underline hover:underline`}>
               <Text
-                type="h1"
+                size="4xl"
+                as="h3"
                 color="text-transparent"
                 additionalStyles={`bg-gradient-to-r from-${theme}-700 to-${theme}-900 bg-clip-text font-bold`}
               >
@@ -37,7 +38,7 @@ const IssueListItem = ({ issueData }: { issueData: Meta }): JSX.Element => {
           <Text color={`text-${theme}-600`} additionalStyles="order-2 tracking-wider py-3 uppercase">
             {convertDate(dateOfPublishing)}
           </Text>
-          <Text type="h3" color={`text-${theme}-800`} additionalStyles="font-roboto font-normal leading-relaxed pb-5">
+          <Text size="xl" color={`text-${theme}-800`} additionalStyles="font-roboto font-normal leading-relaxed pb-5">
             {desc}
           </Text>
         </div>

diff --git a/components/common/SubscribeCard.tsx b/components/common/SubscribeCard.tsx
@@ -84,7 +84,7 @@ const SubscribeCard = ({ homePage = false }: { homePage?: boolean }): JSX.Elemen
     >
       {!homePage && !showThankYou ? (
         <div className="mb-8">
-          <Text type="h2" color="text-white" additionalStyles="pb-2">
+          <Text as="h2" size="2xl" color="text-white" additionalStyles="pb-2">
             {`Get ${siteConfig.name} Issues In Your Inbox`}
           </Text>
           <Text color={`text-${theme}-200`}>No spam ever, pinky promise();</Text>
@@ -128,7 +128,7 @@ const SubscribeCard = ({ homePage = false }: { homePage?: boolean }): JSX.Elemen
           {showErrorMsg && (
             <div className="flex items-center justify-start border bg-red-200 border-red-700 text-red-800 px-4 py-1 min-w-1/2 self-center rounded-md">
               <XCircleIcon />
-              <Text type="small" color={`text-${theme}-900`} additionalStyles="pl-4">
+              <Text size="sm" color={`text-${theme}-900`} additionalStyles="pl-4">
                 {errorMsg}
               </Text>
             </div>
@@ -145,7 +145,7 @@ const SubscribeCard = ({ homePage = false }: { homePage?: boolean }): JSX.Elemen
         </form>
       ) : (
         <div className="flex justify-center items-center flex-col text-center space-y-4">
-          <Text type="h2" color={homePage ? `text-${theme}-800` : `text-${theme}-100`}>
+          <Text as="h2" size="2xl" color={homePage ? `text-${theme}-800` : `text-${theme}-100`}>
             {`Hey ${firstName}, thank you for subscribing to ${siteConfig.name}!`}
           </Text>
           <Text color={homePage ? `text-${theme}-600` : `text-${theme}-300`}>{getThankYouMessage()}</Text>

diff --git a/components/common/Tags.tsx b/components/common/Tags.tsx
@@ -8,9 +8,9 @@ function Tags({ tags = [] }: { tags?: Array<string> }): JSX.Element {
     <div className="flex space-x-2 flex-wrap">
       {tags?.map((tag, index) => (
         <Text
-          type="small"
+          size="sm"
           color={`text-${theme}-600`}
-          inline
+          as="span"
           key={index}
           additionalStyles={`py-1/2 px-1 border-${theme}-200 border rounded uppercase`}
         >

diff --git a/components/common/Text.tsx b/components/common/Text.tsx
@@ -2,22 +2,22 @@ import { TextType } from '../../theme/theme';
 
 // Example usage - <Text type="base" color="text-green-500"> Hello World </Text>
 const Text = ({
-  type = 'base',
+  size = 'md',
+  as = 'p',
   color = 'text-black',
   additionalStyles = '',
-  inline = false,
   children,
 }: {
-  type?: string;
+  size?: keyof typeof TextType;
+  as?: keyof JSX.IntrinsicElements;
   color?: string;
   children: React.ReactNode;
   additionalStyles?: string;
-  inline?: boolean;
 }): JSX.Element => {
-  const textType = TextType[type];
+  const textType = TextType[size];
   const styles = `${textType} ${color} ${additionalStyles}`;
-
-  return inline ? <span className={styles}>{children}</span> : <div className={styles}>{children}</div>;
+  const Tag = as;
+  return <Tag className={styles}>{children}</Tag>;
 };
 
 export default Text;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scriptified",
-  "version": "2.1.7",
+  "version": "2.2.0",
   "private": true,
   "license": "(MIT OR Apache-2.0)",
   "scripts": {

diff --git a/pages/404.tsx b/pages/404.tsx
@@ -17,17 +17,17 @@ export default function Custom404({ allIssuesData }: { allIssuesData: Meta[] }):
       <Head>
         <title>{`${siteConfig.name} - Page Not Found`}</title>
       </Head>
-      <section className={`h-80 py-12 flex flex-col justify-center items-center text-lg`}>
-        <Text color={`text-${theme}-100`} additionalStyles="text-6xl" type="h1">
+      <section className={`h-96 py-12 flex flex-col justify-center items-center text-lg`}>
+        <Text color={`text-${theme}-100`} as="h1" size="6xl">
           404
         </Text>
-        <Text color={`text-${theme}-200`} additionalStyles="text-4xl" type="h3">
+        <Text color={`text-${theme}-200`} as="h2" size="4xl">
           Page Not Found
         </Text>
-        <Text color={`text-${theme}-100`} additionalStyles="py-4 text-2xl">
+        <Text color={`text-${theme}-100`} additionalStyles="py-4" size="2xl">
           Read our latest issues while you are here.
         </Text>
-        <Text color={`text-${theme}-100`} additionalStyles="text-2xl pb-4">
+        <Text color={`text-${theme}-100`} additionalStyles="pb-4" size="2xl">
           or
         </Text>
         <Link href="/">