Repository: expo/expo
File: docs/ui/components/TableOfContents/TableOfContents.tsx (TypeScript)

Code before:
          }
          return false;
        })();

      return (
        <div
          key={heading.slug}
          className={mergeClasses(
            'flex items-center',
            currentH3 && heading.level > BASE_HEADING_LEVEL + 2 && 'ml-0',
            hasChildren && isVersioned ? '-ml-2' : ''
          )}>
          {hasChildren && isVersioned && (
            <ButtonBase
              onClick={event => {
                toggleH3(heading.slug, event);
              }}
              onKeyDown={event => {
                if (event.key === 'Enter' || event.key === ' ') {
                  event.preventDefault();
                  toggleH3(heading.slug, event);
                }
              }}
              aria-expanded={!collapsedH3s.has(heading.slug)}
              aria-controls={`toc-section-${heading.slug}`}
              className="-mr-2 flex h-full cursor-pointer items-center justify-center self-start pt-[3px] hover:opacity-70"
              aria-label={`${collapsedH3s.has(heading.slug) ? 'Expand' : 'Collapse'} section ${heading.title}`}>
              <ChevronDownIcon
                className={mergeClasses(
                  'icon-sm text-icon-secondary transition-transform',
                  collapsedH3s.has(heading.slug) ? '-rotate-90' : 'rotate-0'
                )}
              />
            </ButtonBase>
          )}
          <TableOfContentsLink
            heading={heading}
            onClick={event => {
              handleLinkClick(event, heading);
            }}
            isActive={isActive}
            ref={isActive ? activeItemRef : undefined}
            shortenCode
          />
        </div>
      );
    });
  };

  return (
    <nav className="w-[280px] px-6 pb-10 pt-[52px]" data-toc>

Review comment (suggestion):
```suggestion
              className="-mr-2 flex h-full cursor-pointer items-center justify-center self-start pt-0.5 hocus:opacity-75"
```

Styling nits + we have a custom `hocus` Tailwind scope which combines hover and focus interactions, and usually it should be used to ensure that given interaction effect also applies when navigating with keyboard:
* https://github.com/expo/styleguide/blob/main/packages/styleguide/tailwind.js#L553

Code after:
          }
          return false;
        })();

      return (
        <div
          key={heading.slug}
          className={mergeClasses(
            'flex items-center',
            currentH3 && heading.level > BASE_HEADING_LEVEL + 2 && 'ml-0',
            hasChildren && isVersioned && '-ml-2'
          )}>
          {hasChildren && isVersioned && (
            <ButtonBase
              onClick={event => {
                toggleH3(heading.slug, event);
              }}
              onKeyDown={event => {
                if (event.key === 'Enter' || event.key === ' ') {
                  event.preventDefault();
                  toggleH3(heading.slug, event);
                }
              }}
              aria-expanded={!collapsedH3s.has(heading.slug)}
              aria-controls={`toc-section-${heading.slug}`}
              className="-mr-2 flex h-full cursor-pointer items-center justify-center self-start pt-0.5 hocus:opacity-75"
              aria-label={`${collapsedH3s.has(heading.slug) ? 'Expand' : 'Collapse'} section ${heading.title}`}>
              <ChevronDownIcon
                className={mergeClasses(
                  'icon-sm text-icon-secondary transition-transform',
                  collapsedH3s.has(heading.slug) ? '-rotate-90' : 'rotate-0'
                )}
              />
            </ButtonBase>
          )}
          <TableOfContentsLink
            heading={heading}
            onClick={event => {
              handleLinkClick(event, heading);
            }}
            isActive={isActive}
            ref={isActive ? activeItemRef : undefined}
            shortenCode
          />
        </div>
      );
    });
  };

  return (
    <nav className="w-[280px] px-6 pb-10 pt-[52px]" data-toc>