SEO: a11y + open external links in new tabs (#1463)

* chore: improve SEO lighthouse * chore: open external link in new tab * chore: open external link in new tab #2
themesberg · Aug 6, 2024 · c47d3a8 · c47d3a8
1 parent d536caf
commit c47d3a8
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 29 deletions.
diff --git a/apps/web/app/docs/layout.tsx b/apps/web/app/docs/layout.tsx
@@ -70,15 +70,8 @@ function DocsNavbar({ isCollapsed, setCollapsed }: DocsLayoutState) {
             <HiX aria-label="Close sidebar" className="size-6 cursor-pointer text-gray-600 dark:text-gray-300" />
           </button>
         )}
-        <Link href="/" className="sr-only">
-          Flowbite React
-        </Link>
-        <Link
-          aria-hidden
-          href="/"
-          className="flex items-center gap-3 text-2xl font-semibold text-gray-900 dark:text-white"
-        >
-          <Image alt="" height={32} src="/favicon.svg" width={32} className="size-8" />
+        <Link href="/" className="flex items-center gap-3 text-2xl font-semibold text-gray-900 dark:text-white">
+          <Image alt="Flowbite React logo" src="/favicon.svg" height={32} width={32} className="size-8" />
           <span>Flowbite React</span>
         </Link>
         <div className="hidden lg:ml-[4.5rem] lg:flex">

diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -47,7 +47,6 @@ export const metadata: Metadata = {
 export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
-  maximumScale: 1,
   themeColor: [
     { media: "(prefers-color-scheme: light)", color: "#ffffff" },
     { media: "(prefers-color-scheme: dark)", color: "#1f2937" },

diff --git a/apps/web/components/code-demo.tsx b/apps/web/components/code-demo.tsx
@@ -272,7 +272,8 @@ function EditOnGithubButton({ githubSlug }: { githubSlug: string }) {
   return (
     <a
       href={href}
-      rel="noreferrer nofollow noopener"
+      target="_blank"
+      rel="nofollow noopener noreferrer"
       className="inline-flex w-fit items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-center text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-primary-700 focus:text-primary-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:text-white dark:focus:ring-gray-700"
     >
       <svg

diff --git a/apps/web/components/homepage/contributors-section.tsx b/apps/web/components/homepage/contributors-section.tsx
@@ -72,6 +72,8 @@ export async function ContributorsSection() {
                 <p>Become a member of a community of developers by supporting Flowbite</p>
               </div>
               <Link
+                rel="noopener"
+                target="_blank"
                 href="https://github.com/themesberg/flowbite-react"
                 className="flex items-center gap-2 whitespace-nowrap text-base font-medium text-cyan-700 hover:underline"
               >

diff --git a/apps/web/components/homepage/featured-section.tsx b/apps/web/components/homepage/featured-section.tsx
@@ -7,7 +7,12 @@ export function FeaturedSection() {
         <div className="flex flex-col items-center justify-center gap-2 lg:flex-row lg:gap-8">
           <div className="mx-auto mb-4 text-base tracking-tight lg:mx-0 lg:mb-0">Featured in:</div>
           <div className="flex flex-wrap items-center justify-center gap-8">
-            <Link href="https://www.reddit.com/r/flowbite/" rel="nofollow noreferrer noopener">
+            <Link
+              aria-label="Reddit - Flowbite"
+              href="https://www.reddit.com/r/flowbite/"
+              rel="nofollow noopener noreferrer"
+              target="_blank"
+            >
               <svg width="105" height="36" viewBox="0 0 105 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   d="M17.727 35.0829C27.2844 35.0829 35.0322 27.3351 35.0322 17.7778C35.0322 8.22043 27.2844 0.472656 17.727 0.472656C8.16966 0.472656 0.421875 8.22043 0.421875 17.7778C0.421875 27.3351 8.16966 35.0829 17.727 35.0829Z"
@@ -27,15 +32,25 @@ export function FeaturedSection() {
                 />
               </svg>
             </Link>
-            <Link href="https://dev.to/t/flowbite" rel="nofollow noreferrer noopener">
+            <Link
+              aria-label="DEV - Flowbite"
+              href="https://dev.to/t/flowbite"
+              rel="nofollow noopener noreferrer"
+              target="_blank"
+            >
               <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   d="M9.8811 14.0207C9.57556 13.7923 9.26923 13.6781 8.96369 13.6781H7.59032V21.905H8.96447C9.27002 21.905 9.57634 21.7908 9.88189 21.5624C10.1874 21.334 10.3402 20.9915 10.3402 20.534V15.0492C10.3394 14.5924 10.1859 14.2491 9.8811 14.0207ZM32.244 0.138184H3.87892C1.97321 0.138184 0.4266 1.68086 0.421875 3.58735V31.9682C0.4266 33.8747 1.97321 35.4174 3.87892 35.4174H32.244C34.1505 35.4174 35.6963 33.8747 35.701 31.9682V3.58735C35.6963 1.68086 34.1497 0.138184 32.244 0.138184ZM12.5648 20.5489C12.5648 22.0302 11.6506 24.2745 8.75658 24.2698H5.10266V11.2401H8.83375C11.6246 11.2401 12.5633 13.4813 12.564 14.9633L12.5648 20.5489ZM20.4932 13.5671H16.2975V16.5926H18.8623V18.9212H16.2975V21.9459H20.494V24.2745H15.5974C14.7186 24.2973 13.9878 23.6028 13.9658 22.7239V12.8718C13.9445 11.9937 14.6398 11.2645 15.5179 11.2425H20.494L20.4932 13.5671ZM28.6547 22.646C27.6152 25.0675 25.7528 24.5856 24.9188 22.646L21.8847 11.2433H24.4495L26.7891 20.1985L29.1177 11.2433H31.6833L28.6547 22.646Z"
                   fill="#6B7280"
                 />
               </svg>
             </Link>
-            <Link href="https://www.producthunt.com/products/flowbite" rel="nofollow noreferrer noopener">
+            <Link
+              aria-label="Product Hunt - Flowbite"
+              href="https://www.producthunt.com/products/flowbite"
+              rel="nofollow noopener noreferrer"
+              target="_blank"
+            >
               <svg width="153" height="36" viewBox="0 0 153 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   d="M36.257 17.7779C36.257 27.5959 28.2971 35.5558 18.4791 35.5558C8.65988 35.5558 0.701172 27.5959 0.701172 17.7779C0.701172 7.95871 8.66049 0 18.4791 0C28.2971 0 36.257 7.95932 36.257 17.7779Z"
@@ -51,7 +66,12 @@ export function FeaturedSection() {
                 />
               </svg>
             </Link>
-            <Link href="https://news.ycombinator.com/item?id=28561468" rel="nofollow noreferrer noopener">
+            <Link
+              aria-label="Y Combinator - Flowbite"
+              href="https://news.ycombinator.com/item?id=28561468"
+              rel="nofollow noopener noreferrer"
+              target="_blank"
+            >
               <svg width="161" height="34" viewBox="0 0 161 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M33.6816 0.226074H0.578125V33.3295H33.6816V0.226074Z" fill="#6B7280" />
                 <path
@@ -100,7 +120,12 @@ export function FeaturedSection() {
                 />
               </svg>
             </Link>
-            <Link href="https://www.youtube.com/channel/UC_Ms4V2kYDsh7F_CSsHyQ6A" rel="nofollow noreferrer noopener">
+            <Link
+              aria-label="YoutTube - Flowbite"
+              href="https://www.youtube.com/channel/UC_Ms4V2kYDsh7F_CSsHyQ6A"
+              rel="nofollow noopener noreferrer"
+              target="_blank"
+            >
               <svg width="113" height="24" viewBox="0 0 113 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   d="M33.6752 3.75529C33.2799 2.28706 32.1223 1.12941 30.6541 0.734118C27.9717 0 17.2423 0 17.2423 0C17.2423 0 6.51292 0 3.83057 0.705882C2.39057 1.10118 1.20469 2.28706 0.809397 3.75529C0.103516 6.43765 0.103516 12 0.103516 12C0.103516 12 0.103516 17.5906 0.809397 20.2447C1.20469 21.7129 2.36234 22.8706 3.83057 23.2659C6.54116 24 17.2423 24 17.2423 24C17.2423 24 27.9717 24 30.6541 23.2941C32.1223 22.8988 33.2799 21.7412 33.6752 20.2729C34.3811 17.5906 34.3811 12.0282 34.3811 12.0282C34.3811 12.0282 34.4094 6.43765 33.6752 3.75529Z"

diff --git a/apps/web/components/homepage/figma-section.tsx b/apps/web/components/homepage/figma-section.tsx
@@ -20,6 +20,8 @@ export function FigmaSection() {
               <p className="self-stretch">Check out the following resources to learn more about Flowbite Figma:</p>
               <div className="isolate flex flex-col items-start gap-4 self-stretch">
                 <a
+                  rel="nofollow noopener noreferrer"
+                  target="_blank"
                   href="https://www.figma.com/file/xYaJr6UvThCW2LM2RjLeJf/flowbite-pro-figma-2.6.0?type=design&node-id=18-0&t=jKFrn2Dz5D8jhk7d-0"
                   className="inline-flex max-w-lg items-center justify-start gap-5 self-stretch rounded-lg border border-gray-300 bg-white px-4 py-3.5 text-center text-base font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 sm:gap-7 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
                 >
@@ -65,6 +67,8 @@ export function FigmaSection() {
                   </div>
                 </a>
                 <a
+                  rel="noopener"
+                  target="_blank"
                   href="https://flowbite.com/figma/"
                   className="inline-flex max-w-lg items-center justify-start gap-4 self-stretch rounded-lg border border-gray-300 bg-white px-4 py-3.5 text-center text-base font-medium text-gray-900 placeholder:py-3.5 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 sm:gap-6 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
                 >

diff --git a/apps/web/components/homepage/home-navbar.tsx b/apps/web/components/homepage/home-navbar.tsx
@@ -17,15 +17,8 @@ export function HomeNavbar() {
       }}
     >
       <div className="flex items-center gap-3">
-        <Link href="/" className="sr-only">
-          Flowbite React
-        </Link>
-        <Link
-          aria-hidden
-          href="/"
-          className="flex items-center gap-3 text-2xl font-semibold text-gray-900 dark:text-white"
-        >
-          <Image alt="" aria-hidden height="32" src="/favicon.svg" width="32" />
+        <Link href="/" className="flex items-center gap-3 text-2xl font-semibold text-gray-900 dark:text-white">
+          <Image alt="Flowbite React logo" src="/favicon.svg" width="32" height="32" className="size-8" />
           <span>Flowbite React</span>
         </Link>
         <div className="ml-4 hidden lg:flex">

diff --git a/apps/web/components/homepage/react-section.tsx b/apps/web/components/homepage/react-section.tsx
@@ -39,9 +39,12 @@ export function ReactSection() {
                 React UI components
               </h2>
               <p className="text-lg text-gray-500 dark:text-gray-400">
-                <a href="" className="text-lg font-medium text-gray-900 underline hover:no-underline dark:text-white">
+                <Link
+                  href="/"
+                  className="text-lg font-medium text-gray-900 underline hover:no-underline dark:text-white"
+                >
                   Flowbite React
-                </a>{" "}
+                </Link>{" "}
                 is a free and open-source UI component library based on accessible React components and Tailwind CSS.
               </p>
               <p className="text-lg text-gray-500 dark:text-gray-400">
@@ -78,7 +81,13 @@ export function ReactSection() {
                 <Button as={Link} href="/docs/getting-started/quickstart">
                   Start building <HiOutlineArrowRight className="ml-2 size-5" />
                 </Button>
-                <Button as={Link} href="https://github.com/themesberg/flowbite-react" color="gray">
+                <Button
+                  as={Link}
+                  color="gray"
+                  href="https://github.com/themesberg/flowbite-react"
+                  rel="noopener"
+                  target="_blank"
+                >
                   View on GitHub
                 </Button>
               </div>

diff --git a/apps/web/components/homepage/social-proof-section.tsx b/apps/web/components/homepage/social-proof-section.tsx
@@ -90,6 +90,8 @@ export async function SocialProofSection() {
           <div className="flex w-full flex-col items-start gap-6 md:gap-3">
             <div className="flex flex-row items-start gap-2 self-stretch md:justify-between md:gap-2 md:pr-16 lg:justify-end lg:gap-2 lg:pr-0">
               <a
+                rel="noopener"
+                target="_blank"
                 href="https://github.com/themesberg/flowbite-react"
                 className="flex w-full max-w-[272px] flex-col items-start gap-4 rounded-lg px-4 py-2 text-gray-400 hover:bg-gray-50 lg:px-8 lg:py-6 dark:hover:bg-gray-800"
               >
@@ -114,6 +116,8 @@ export async function SocialProofSection() {
                 </div>
               </a>
               <a
+                rel="nofollow noopener noreferrer"
+                target="_blank"
                 href="https://www.npmjs.com/package/flowbite-react"
                 className="flex w-full max-w-[272px] flex-col items-start gap-4 rounded-lg px-4 py-2 text-gray-400 hover:bg-gray-50 lg:px-8 lg:py-6 dark:hover:bg-gray-800"
               >
@@ -131,6 +135,8 @@ export async function SocialProofSection() {
             </div>
             <div className="flex flex-row items-start gap-2 self-stretch md:justify-between md:gap-12 md:pr-16 lg:justify-end lg:gap-2 lg:pr-0">
               <a
+                rel="nofollow noopener noreferrer"
+                target="_blank"
                 href="https://www.figma.com/community/file/1179442320711977498"
                 className="flex w-full max-w-[272px] flex-col items-start gap-4 rounded-lg px-4 py-2 text-gray-400 hover:bg-gray-50 lg:px-8 lg:py-6 dark:hover:bg-gray-800"
               >
@@ -169,8 +175,9 @@ export async function SocialProofSection() {
                 </div>
               </a>
               <a
+                rel="nofollow noopener noreferrer"
+                target="_blank"
                 href="https://discord.gg/4eeurUVvTy"
-                rel="nofollow"
                 className="flex w-full max-w-[272px] flex-col items-start gap-4 rounded-lg px-4 py-2 text-gray-400 hover:bg-gray-50 lg:px-8 lg:py-6 dark:hover:bg-gray-800"
               >
                 <svg

diff --git a/apps/web/components/homepage/tailwind-section.tsx b/apps/web/components/homepage/tailwind-section.tsx
@@ -43,13 +43,17 @@ export function TailwindSection() {
               </p>
               <p className="text-lg text-gray-500 dark:text-gray-400">
                 <a
+                  rel="nofollow noopener noreferrer"
+                  target="_blank"
                   href="https://tailwindcss.com"
                   className="text-lg font-medium text-gray-900 underline hover:no-underline dark:text-white"
                 >
                   Tailwind CSS
                 </a>{" "}
                 is the most popular and open-source utility-first CSS framework on the market and the{" "}
                 <a
+                  rel="noopener"
+                  target="_blank"
                   href="https://flowbite.com"
                   className="text-lg font-medium text-gray-900 underline hover:no-underline dark:text-white"
                 >

diff --git a/apps/web/components/navbar.tsx b/apps/web/components/navbar.tsx
@@ -21,12 +21,16 @@ export function NavbarLinks() {
         Quickstart
       </a>
       <a
+        rel="noopener"
+        target="_blank"
         href="https://flowbite.com/figma/"
         className="rounded-lg p-2.5 text-sm font-medium text-gray-900 hover:text-cyan-700 dark:text-gray-300 dark:hover:text-cyan-500"
       >
         Figma
       </a>
       <a
+        rel="noopener"
+        target="_blank"
         href="https://flowbite.com"
         className="rounded-lg p-2.5 text-sm font-medium text-gray-900 hover:text-cyan-700 dark:text-gray-300 dark:hover:text-cyan-500"
       >
@@ -48,6 +52,7 @@ export function NavbarIcons() {
           rel="noopener"
           target="_blank"
           href="https://storybook.flowbite-react.com/"
+          aria-label="View Storybook"
           className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 lg:block dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
         >
           <SiStorybook aria-hidden className="size-5" />
@@ -58,6 +63,7 @@ export function NavbarIcons() {
           rel="nofollow noopener noreferrer"
           target="_blank"
           href="https://discord.gg/4eeurUVvTy"
+          aria-label="Join Discord Community"
           className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 lg:block dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
         >
           <SiDiscord aria-hidden className="size-5" />
@@ -68,6 +74,7 @@ export function NavbarIcons() {
           rel="noopener"
           target="_blank"
           href="https://github.com/themesberg/flowbite-react"
+          aria-label="View on GitHub"
           className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 lg:block dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
         >
           <BsGithub aria-hidden className="size-5" />
@@ -80,6 +87,7 @@ export function NavbarIcons() {
         rel="nofollow noopener noreferrer"
         target="_blank"
         href="https://npmjs.com/package/flowbite-react"
+        aria-label="Toggle dark mode"
         className="ml-2 hidden lg:block"
       >
         <Badge className="bg-primary-50 px-2 text-sm font-medium text-primary-700 hover:bg-primary-600 hover:text-white sm:block lg:block dark:bg-gray-700 dark:text-primary-500 dark:hover:bg-primary-800 dark:hover:text-white">