UX/A11y tweaks, Next bump (#2510)

Author: Simek

bun.lock

@@ -133,6 +133,8 @@ export function A({
     );
   }
 
+  const targetWithFallback = target ?? '_blank';
+
   return (
     <span
       onPointerEnter={() => setIsHovered(true)}
@@ -143,8 +145,8 @@ export function A({
         ref={ref as any}
         href={href}
         numberOfLines={containerStyle ? 1 : undefined}
-        target={target ?? '_blank'}
-        hrefAttrs={{ target: target ?? '_blank' }}
+        target={targetWithFallback}
+        rel={targetWithFallback === '_blank' ? 'noopener noreferrer' : undefined}
         style={[linkStyles, isHovered && linkHoverStyles, style, isHovered && hoverStyle]}>
         {children}
       </HtmlElements.A>

common/styleguide.tsx

@@ -17,7 +17,7 @@ export default function AddLibrarySelector() {
     <Popover.Root open={open} onOpenChange={state => setOpen(state)}>
       <HoverEffect>
         <Popover.Trigger asChild>
-          <View>
+          <View role="dialog">
             <View
               role="button"
               style={[

components/AddLibrarySelector.tsx

@@ -4,13 +4,15 @@ import { GitHubIcon } from '~/components/Icons';
 import tw from '~/util/tailwind';
 
 type Props = {
+  name: string;
   href: string;
 };
 
-export default function GitHubButton({ href }: Props) {
+export default function GitHubButton({ href, name }: Props) {
   return (
     <Button
       openInNewTab
+      aria-label={`${name} GitHub`}
       href={href}
       style={tw`min-h-8 flex-row gap-1.5 bg-primary-dark px-3 text-sm`}>
       <GitHubIcon style={tw`text-black`} />

components/Tools/GitHubButton.tsx

@@ -24,7 +24,7 @@ export default function ToolEntry({ name, description, githubUrl, buttons }: Pro
       <H3 style={tw`mb-1 text-xl`}>{name}</H3>
       <P style={tw`mb-3 font-light leading-[23px]`}>{description}</P>
       <View style={tw`flex-row flex-wrap gap-3`}>
-        <GitHubButton href={githubUrl} />
+        <GitHubButton href={githubUrl} name={name} />
         {buttons.map(({ label, href }) => (
           <Button
             key={label}

components/Tools/ToolEntry.tsx

@@ -38,7 +38,7 @@
     "es-toolkit": "^1.47.0",
     "expo": "57.0.0-canary-20260526-13e89ca",
     "expo-font": "57.0.0-canary-20260526-13e89ca",
-    "next": "^16.2.7",
+    "next": "^16.2.9",
     "node-emoji": "^2.2.0",
     "postcss": "^8.5.15",
     "react": "19.2.7",
@@ -53,15 +53,15 @@
     "rehype-raw": "^7.0.0",
     "remark-emoji": "^5.0.2",
     "remark-gfm": "^4.0.1",
-    "semver": "^7.8.3",
+    "semver": "^7.8.4",
     "swr": "^2.4.1",
     "tailwindcss": "^3.4.19",
     "twrnc": "^4.16.0",
     "use-debounce": "^10.1.1"
   },
   "devDependencies": {
     "@expo/next-adapter": "^6.0.0",
-    "@next/bundle-analyzer": "^16.2.7",
+    "@next/bundle-analyzer": "^16.2.9",
     "@types/bun": "^1.3.14",
     "@types/crypto-js": "^4.2.2",
     "@types/react": "^19.2.17",