a11y tweaks and fixes (#2099)

Author: Simek

components/Button.tsx

@@ -11,6 +11,7 @@ type Props = PropsWithChildren & {
   openInNewTab?: boolean;
   style?: StyleProp<TextStyle>;
   containerStyle?: StyleProp<ViewStyle>;
+  tabIndex?: number;
 };
 
 export function Button({
@@ -20,6 +21,7 @@ export function Button({
   style,
   containerStyle,
   openInNewTab,
+  tabIndex,
   ...rest
 }: Props) {
   const isLink = !!href;
@@ -36,14 +38,15 @@ export function Button({
         <A
           href={href}
           style={tw`rounded font-sans`}
+          tabIndex={tabIndex}
           {...(openInNewTab ? { target: '_blank' } : {})}
           {...rest}>
           <Pressable focusable={false} style={buttonStyle} accessible={false}>
             {content}
           </Pressable>
         </A>
       ) : (
-        <Pressable onPress={onPress} style={buttonStyle} {...rest}>
+        <Pressable onPress={onPress} style={buttonStyle} role="button" {...rest}>
           {content}
         </Pressable>
       )}

components/CompatibilityTags.tsx

@@ -54,7 +54,10 @@ export default function CompatibilityTags({ library }: Props) {
         <Tooltip
           side="bottom"
           trigger={
-            <View style={tw`items-center justify-center cursor-pointer`}>
+            <View
+              style={tw`items-center justify-center cursor-pointer rounded-full`}
+              role="button"
+              aria-label="Additional information">
               <Info style={tw`text-icon`} />
             </View>
           }>

components/Library/index.tsx

@@ -77,7 +77,7 @@ export default function Library({ library, skipMetadata, showTrendingMark }: Pro
               {libName}
             </A>
             <HoverEffect>
-              <A href={library.githubUrl} style={tw`size-5`}>
+              <A href={library.githubUrl} style={tw`size-5`} aria-label="GitHub repository">
                 <GitHub
                   width={20}
                   height={20}

components/Package/PackageHeader.tsx

@@ -52,7 +52,7 @@ export default function PackageHeader({ library, registryData, rightSlot }: Prop
             </View>
           )}
           <HoverEffect>
-            <A href={library.githubUrl} style={tw`size-5`}>
+            <A href={library.githubUrl} style={tw`size-5`} aria-label="GitHub repository">
               <GitHub
                 width={20}
                 height={20}

components/Package/ReadmeCodeBlock.tsx

@@ -31,7 +31,8 @@ export default function ReadmeCodeBlock({ code, lang }: Props) {
             if (navigator.clipboard && navigator.clipboard.writeText) {
               await navigator.clipboard.writeText(code);
             }
-          }}>
+          }}
+          aria-label="Copy to clipboard">
           <Copy width={20} height={20} style={tw`text-palette-gray4 dark:text-pewter`} />
         </Button>
       }>

components/TopBar.tsx

@@ -64,7 +64,8 @@ export default function TopBar() {
                 <Button
                   aria-label="Tools"
                   href="/tools"
-                  style={tw`size-8.5 px-1 bg-transparent rounded-full`}>
+                  style={tw`size-8.5 px-1 bg-transparent rounded-full`}
+                  tabIndex={-1}>
                   <Tools style={tw`text-white`} />
                 </Button>
               </View>
@@ -78,7 +79,8 @@ export default function TopBar() {
                   openInNewTab
                   aria-label="GitHub repository"
                   href="https://github.com/react-native-community/directory"
-                  style={tw`size-8.5 px-1 bg-transparent rounded-full`}>
+                  style={tw`size-8.5 px-1 bg-transparent rounded-full`}
+                  tabIndex={-1}>
                   <GitHub style={tw`text-white`} />
                 </Button>
               </View>

pages/_app.tsx

@@ -5,7 +5,6 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import Footer from '~/components/Footer';
 import CustomAppearanceProvider from '~/context/CustomAppearanceProvider';
-import tw from '~/util/tailwind';
 
 import '~/styles/styles.css';
 
@@ -23,14 +22,16 @@ Sentry.init({
 function App({ pageProps, Component }: AppProps) {
   return (
     <CustomAppearanceProvider>
-      <SafeAreaProvider style={tw`flex-1`}>
+      <SafeAreaProvider>
         <Head>
           <meta
             name="viewport"
             content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,viewport-fit=cover"
           />
         </Head>
-        <Component {...pageProps} />
+        <main>
+          <Component {...pageProps} />
+        </main>
         <Footer />
       </SafeAreaProvider>
     </CustomAppearanceProvider>

styles/styles.css

@@ -6,6 +6,7 @@
   format("woff2");
   font-weight: 300;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
@@ -14,6 +15,7 @@
   format("woff2");
   font-weight: 500;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
@@ -22,6 +24,7 @@
   format("woff2");
   font-weight: 700;
   font-style: normal;
+  font-display: swap;
 }
 
 /* TODO: refactor colors and naming */
@@ -396,6 +399,12 @@ select {
   p {
     margin-bottom: 0;
 
+    &[align="center"] {
+      picture {
+        display: block
+      }
+    }
+
     & a {
       font-size: inherit;
     }
@@ -444,7 +453,7 @@ select {
   }
 
   picture {
-    display: block;
+    display: contents;
   }
 
   img {
@@ -518,14 +527,14 @@ select {
     margin-bottom: 0;
 
     ul, ol {
-      padding-top: 8px;
+      padding-block: 4px;
       margin-inline-start: 0;
     }
   }
 
   li {
-    &:last-child {
-      margin-bottom: 12px;
+    div:last-child {
+      margin-bottom: 8px;
     }
 
     pre {
@@ -534,6 +543,7 @@ select {
   }
 
   details {
+    background-color: var(--table-alt-row);
     padding-inline-start: 1rem;
 
     summary {
@@ -560,6 +570,10 @@ select {
       text-align: inherit;
     }
 
+    p {
+      margin-top: 8px;
+    }
+
     sub, sup {
       text-align: inherit;
     }