fix: improve docs pages accessibility (#1464)

Co-authored-by: Lukasz Gornicki <[email protected]>
asyncapi · Apr 25, 2023 · 79c581a · 79c581a
1 parent 3b1e8d3
commit 79c581a
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 5 deletions.
diff --git a/components/Feedback.js b/components/Feedback.js
@@ -84,7 +84,7 @@ export default function Feedback(className = '') {
     return (
         <div className={`flex flex-col rounded-md shadow-md border border-gray-200 p-4 ${className}`}>
             <div className='flex flex-row'>
-                <img src="/img/illustrations/icons/icon.svg" className='w-28 md:w-14' />
+                <img src="/img/illustrations/icons/icon.svg" className='w-28 md:w-14' alt="" aria-hidden="true" />
                 <div className='flex flex-col ml-4'>
                     <div className='text-xl'>
                         Was this helpful?

diff --git a/components/Footer.js b/components/Footer.js
@@ -17,7 +17,7 @@ export default function Footer() {
           <div className="mr-14 w-full md:w-auto">
             <div className="">
               <Link href="/">
-                <a className="cursor-pointer">
+                <a className="cursor-pointer" aria-label="AsyncAPI">
                   <AsyncAPILogoLight className="h-10 w-auto mt-3" />
                 </a>
               </Link>

diff --git a/components/buttons/GitHubIssue.js b/components/buttons/GitHubIssue.js
@@ -3,7 +3,7 @@ import React from 'react'
 export default function GitHubIssue({className=''}) {
     return (
         <a className={`bg-black text-white flex flex-row lg:w-6/12 shadow-md hover:shadow-lg transition-all duration-500 ease-in-out py-2 rounded justify-center ${className}`} href='https://github.com/asyncapi/website/issues/new?assignees=alequetzalli+-&labels=%F0%9F%93%91+docs&template=docs.yml&title=%5B%F0%9F%93%91+Docs%5D%3A+' target='_blank' rel='noopener noreferrer'>
-            <img src='/img/logos/github-fill.svg' className='mr-2' />
+            <img src='/img/logos/github-fill.svg' className='mr-2' alt="Github:AsyncAPI" />
             Create Issue on GitHub
         </a>
     )

diff --git a/components/navigation/MobileNavMenu.js b/components/navigation/MobileNavMenu.js
@@ -20,7 +20,10 @@ export default function MobileNavMenu({ onClickClose = () => {} }) {
                 </a>
               </Link>
               <div className="flex flex-row items-center justify-content -mr-2">
-                <SearchButton className="flex items-center text-left space-x-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
+                <SearchButton
+                  className="flex items-center text-left space-x-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
+                  aria-label="Open Search"
+                >
                   <svg
                     width="24"
                     height="24"

diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
@@ -58,7 +58,7 @@ export default function NavBar({
           <div className="lg:w-auto lg:flex-1">
             <div className="flex">
               <Link href="/">
-                <a className="cursor-pointer">
+                <a className="cursor-pointer" aria-label="AsyncAPI">
                   <AsyncAPILogo className="h-8 w-auto sm:h-8" />
                 </a>
               </Link>
@@ -69,6 +69,7 @@ export default function NavBar({
         <div className="flex flex-row items-center justify-center -mr-2 -my-2 lg:hidden">
           <SearchButton
             className="flex items-center text-left space-x-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
+            aria-label="Open Search"
           >
             <IconLoupe />
           </SearchButton>
@@ -121,6 +122,7 @@ export default function NavBar({
           <div className="flex flex-row items-center justify-content">
             <SearchButton
               className="flex items-center text-left space-x-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
+              aria-label="Open Search"
             >
               <IconLoupe />
             </SearchButton>