Merge pull request #216 from ethereum/fix-heading-anchor-focus

Fix focus state for auto-linked headings

Author: nhsz

src/components/MdComponents.tsx

@@ -43,40 +43,39 @@ import InfoBanner from "./InfoBanner"
 /**
  * Base HTML elements
  */
-const headingPropsForAnchor = (id?: string): HeadingProps =>
-  id
-    ? ({
-        scrollMarginTop: 28,
-        id,
-        "data-group": true,
-        position: "relative",
-      } as HeadingProps)
-    : {}
+const headingPropsForAnchor = (id?: string): HeadingProps => {
+  if (!id) return {}
+  return {
+    scrollMarginTop: 28,
+    id,
+    "data-group": true,
+    position: "relative",
+  } as HeadingProps
+}
 
 export const commonHeadingProps = (id?: string): HeadingProps => ({
   fontWeight: 700,
   lineHeight: 1.4,
   ...headingPropsForAnchor(id),
 })
 
-const IdAnchor: React.FC<{ id?: string }> = ({ id }) =>
-  id ? (
+const IdAnchor: React.FC<{ id?: string }> = ({ id }) => {
+  if (!id) return null
+  return (
     <Link
-      href={`#${id}`}
+      href={"#" + id}
       position="absolute"
       insetInlineEnd="100%"
       aria-label={id.replaceAll("-", " ") + " permalink"}
+      opacity={0}
+      _groupHover={{ opacity: 1 }}
+      _focus={{ opacity: 1 }}
+      transition="opacity 0.1s ease-in-out"
     >
-      <Icon
-        as={CiLink}
-        opacity={0}
-        _groupHover={{ opacity: 1 }}
-        transition="opacity 0.1s ease-in-out"
-        fontSize="xl"
-        me={1}
-      />
+      <Icon as={CiLink} fontSize="xl" me="1" />
     </Link>
-  ) : null
+  )
+}
 
 export const Heading1 = ({ children, ...rest }: HeadingProps) => (
   <OldHeading as="h1" {...commonHeadingProps()} fontSize="2.5rem" {...rest}>