focus and a11y tweaks, fix tooltip on Firefox (#54)

Author: Simek

website/app/page.tsx

@@ -11,7 +11,7 @@ export default function Home() {
         Results of automated GitHub Actions workflows testing React Native
         ecosystem libraries against nightly builds:
       </h2>
-      <Link href="#android" className="w-fit inline-flex">
+      <Link href="#android" className="w-fit inline-flex rounded-lg pr-2">
         <h3
           id="android"
           className="text-lg font-semibold inline-flex items-center gap-3 transition-colors scroll-m-20 hover:text-secondary">
@@ -20,7 +20,7 @@ export default function Home() {
         </h3>
       </Link>
       <Table platform="android" />
-      <Link href="#ios" className="w-fit inline-flex">
+      <Link href="#ios" className="w-fit inline-flex rounded-lg pr-2">
         <h3
           id="ios"
           className="text-lg font-semibold inline-flex items-center gap-3 transition-colors scroll-m-20 hover:text-secondary">

website/components/EntryNotes.tsx

@@ -11,7 +11,9 @@ export function EntryNotes({ notes }: Props) {
 
   return (
     <Tooltip content={notes}>
-      <InfoIcon className="size-3.5 text-secondary" />
+      <button type="button" aria-label="Notes">
+        <InfoIcon className="size-3.5 text-secondary" />
+      </button>
     </Tooltip>
   );
 }

website/components/Tooltip.tsx

@@ -29,7 +29,7 @@ export default function Tooltip({
         <Trigger asChild>{children}</Trigger>
         <Portal>
           <Content
-            className="bg-black px-2.5 py-1 rounded-md text-xs text-white max-w-[220px] text-center"
+            className="bg-black px-2.5 py-1 rounded-md text-xs text-white max-w-[220px] text-center z-20"
             sideOffset={sideOffset}
             side={side}>
             {content}

website/styles/globals.css

@@ -70,5 +70,5 @@ body {
 }
 
 * {
-  @apply focus-visible:outline-brand/50 focus-visible:outline-offset-4;
+  @apply focus-visible:outline-brand/75 focus-visible:outline-offset-[3px];
 }