fix nav tabs keyboard navigation, correct layouts, small tweaks

common/styleguide.tsx

@@ -109,6 +109,8 @@ type AProps = PropsWithChildren<{
   hoverStyle?: StyleProp<Style>;
   containerStyle?: Style;
   role?: Role;
+  tabIndex?: number;
+  'aria-hidden'?: boolean;
   ref?: Ref<HTMLAnchorElement>;
 }>;
 

components/NavigationTab.tsx

@@ -9,15 +9,23 @@ type Props = {
   title: string;
   path?: string;
   counter?: number | string;
+  measurement?: boolean;
 };
 
-function NavigationTab({ title, counter, path = `/${title.toLowerCase()}` }: Props) {
+function NavigationTab({
+  title,
+  counter,
+  measurement = false,
+  path = `/${title.toLowerCase()}`,
+}: Props) {
   const router = useRouter();
   const isActive = decodeURIComponent(router.asPath.split('?')[0]) === decodeURIComponent(path);
 
   return (
     <A
       href={path}
+      tabIndex={measurement ? -1 : undefined}
+      aria-hidden={measurement}
       style={[
         tw`rounded no-underline`,
         {

components/Package/Navigation/NavigationTabs.tsx

@@ -45,31 +45,27 @@ export default function NavigationTabs({ tabs }: Props) {
   const isTriggerActive = activeIndex >= visible;
 
   return (
-    <View
-      ref={navigationRef}
-      style={tw`relative flex-1 overflow-hidden`}
-      onLayout={onNavigationLayout}>
+    <View ref={navigationRef} style={tw`relative flex-1`} onLayout={onNavigationLayout}>
       <View
         style={[
           tw`pointer-events-none absolute left-0 top-0 flex-row items-center opacity-0`,
-          { rowGap: TABS_GAP },
-        ]}
-        aria-hidden>
+          { columnGap: TABS_GAP },
+        ]}>
         {tabs.map((tab, index) => (
           <View key={tab.title} ref={tabRef(index)} onLayout={onTabLayout(index)}>
-            <NavigationTab {...tab} />
+            <NavigationTab {...tab} measurement />
           </View>
         ))}
         <View ref={triggerRef} onLayout={onTriggerLayout}>
-          <MoreTrigger active={false} open={false} />
+          <MoreTrigger active={false} open={false} hidden />
         </View>
       </View>
       <View
         style={[
           tw`flex-1 flex-row items-center`,
           measuring && tw`opacity-0`,
           measuring ? tw`pointer-events-none` : tw`pointer-events-auto`,
-          { rowGap: TABS_GAP },
+          { columnGap: TABS_GAP },
         ]}>
         {tabs.slice(0, visible).map(tab => (
           <NavigationTab key={tab.title} {...tab} />
@@ -91,10 +87,10 @@ export default function NavigationTabs({ tabs }: Props) {
                 <View
                   style={tw`min-w-40 overflow-hidden rounded-lg border-2 border-palette-gray2 bg-default py-0.5 shadow-lg dark:border-default dark:bg-default`}>
                   {hiddenTabs.map((tab, index) => (
-                    <SelectorItemHoverEffect key={tab.title} onPress={() => setOpen(false)}>
+                    <SelectorItemHoverEffect key={tab.title} focusable={false}>
                       <A
                         href={tab.path}
-                        style={tw`flex-row items-center justify-between gap-2 rounded-lg px-2.5 py-1.5 no-underline`}
+                        style={tw`flex flex-row items-center gap-2 rounded-lg px-2.5 py-1.5 no-underline`}
                         target="_self">
                         <P
                           style={[
@@ -105,7 +101,7 @@ export default function NavigationTabs({ tabs }: Props) {
                           {tab.title}
                         </P>
                         {!!tab.counter && (
-                          <EntityCounter count={tab.counter} style={tw`text-[inherit]`} />
+                          <EntityCounter count={tab.counter} style={tw`mt-0 text-[inherit]`} />
                         )}
                       </A>
                     </SelectorItemHoverEffect>
@@ -120,13 +116,18 @@ export default function NavigationTabs({ tabs }: Props) {
   );
 }
 
-function MoreTrigger({ active, open }: { active: boolean; open: boolean }) {
+type MoreTriggerProps = { active: boolean; open: boolean; hidden?: boolean };
+
+function MoreTrigger({ active, open, hidden }: MoreTriggerProps) {
   return (
-    <View style={tw`cursor-pointer flex-row items-center gap-1 px-4 pb-2 pt-1.5`}>
+    <View
+      style={tw`cursor-pointer flex-row items-center gap-1.5 px-4 pb-2 pt-1.5`}
+      aria-hidden={hidden}
+      tabIndex={hidden ? -1 : undefined}>
       <P style={[tw`text-white`, active && tw`text-primary`]}>More</P>
       <ArrowIcon
         style={[
-          tw`h-3 w-4 shrink-0`,
+          tw`mt-0.5 size-3 shrink-0`,
           active ? tw`text-primary` : tw`text-icon`,
           open ? tw`rotate-270` : tw`rotate-90`,
           { transition: 'all 0.2s' },

components/Package/VersionSizeIncreasedBanner.tsx

@@ -22,7 +22,7 @@ export function VersionSizeIncreasedBanner({ data }: Props) {
   return (
     <View
       style={tw`mt-2 flex flex-row items-center gap-1.5 rounded-lg border border-warning-opaque bg-warning-light p-3 dark:bg-warning-light`}>
-      <WarningIcon style={tw`size-4 text-warning-dark`} />
+      <WarningIcon style={tw`size-4 shrink-0 text-warning-dark`} />
       <Label style={tw`text-warning-dark dark:text-warning`}>
         Warning: package size increased by{' '}
         <strong>{analysis.flaggedRelease.increasePercent?.toFixed(1)}%</strong> in version{' '}

components/Selector/SelectorItemHoverEffect.tsx

@@ -8,15 +8,20 @@ type Props = PressableProps & {
   hoveredStyle?: Style;
 };
 
-export default function SelectorItemHoverEffect({ children, hoveredStyle, ...rest }: Props) {
+export default function SelectorItemHoverEffect({
+  children,
+  hoveredStyle,
+  focusable,
+  ...rest
+}: Props) {
   return (
     <HoverEffect
       style={[
         tw`mx-0.5 cursor-pointer rounded text-black dark:text-white`,
         { transition: 'background-color 0.2s' },
       ]}
       hoveredStyle={hoveredStyle ?? tw`bg-palette-gray2 dark:bg-palette-gray7`}
-      focusable
+      focusable={focusable}
       {...rest}>
       {children}
     </HoverEffect>