fix: prevent focus on hidden elements

HRemonen · Jan 18, 2024 · f7b6232 · f7b6232
1 parent e4dc733
commit f7b6232
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 5 deletions.
diff --git a/src/components/common/Accordion.tsx b/src/components/common/Accordion.tsx
@@ -33,13 +33,25 @@ const Accordion = ({
           onClick={() => setExpandedBody(!expandedBody)}
         >
           <span className="flex items-center">
-            <IoInformationCircleOutline aria-hidden="true" size={24} />
+            <IoInformationCircleOutline
+              aria-hidden="true"
+              focusable="false"
+              size={24}
+            />
             <span className="ml-2">{title}</span>
           </span>
           {expandedBody ? (
-            <IoArrowUpCircleOutline aria-hidden="true" size={24} />
+            <IoArrowUpCircleOutline
+              aria-hidden="true"
+              focusable="false"
+              size={24}
+            />
           ) : (
-            <IoArrowDownCircleOutline aria-hidden="true" size={24} />
+            <IoArrowDownCircleOutline
+              aria-hidden="true"
+              focusable="false"
+              size={24}
+            />
           )}
         </button>
       </h2>

diff --git a/src/components/contrast/ColorContrast.tsx b/src/components/contrast/ColorContrast.tsx
@@ -40,7 +40,11 @@ const ColorContrast = () => {
                 className="flex items-center justify-center md:mt-6 lg:mt-3 w-10 h-10 rounded-md border-solid border-[1px] dark:border-0 border-gray-400 hover:border-2 dark:hover:border-2 hover:border-blue-600 dark:hover:border-blue-300 dark:bg-gray-50 dark:bg-opacity-15"
                 onClick={handleSwapColors}
               >
-                <IoSwapHorizontal aria-hidden="true" size={24} />
+                <IoSwapHorizontal
+                  aria-hidden="true"
+                  focusable="false"
+                  size={24}
+                />
                 <span className="sr-only">Swap color values</span>
               </button>
             </div>

diff --git a/src/components/contrast/ColorPicker.tsx b/src/components/contrast/ColorPicker.tsx
@@ -58,7 +58,7 @@ const ColorPicker = ({ id, label, color, onChange }: ColorPickerProps) => {
           className="mr-4 md:mr-3 hover:cursor-pointer hover:text-blue-600 dark:hover:text-blue-300"
           onClick={handleCopyToClipboard}
         >
-          <IoCopyOutline aria-hidden="true" size={24} />
+          <IoCopyOutline aria-hidden="true" focusable="false" size={24} />
           <span className="sr-only">Copy</span>
         </button>
       </div>

diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
@@ -21,12 +21,14 @@ const Footer = () => (
             aria-label="GitHub repository"
           >
             <svg
+              role="img"
               className="octicon octicon-mark-github"
               data-view-component="true"
               width="24"
               version="1.1"
               viewBox="0 0 16 16"
               aria-hidden="true"
+              focusable="false"
               height="24"
             >
               <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>