fix(a11y): aria-controls and role fixes

Jacky Zhao

2025-08-04 53d6e18e815be96a50270c4998175e9c10032330

 quartz/components/OverflowList.tsx

@@ -5,18 +5,27 @@
  ...props
}: JSX.HTMLAttributes<HTMLUListElement> & { id: string }) => {
  return (
    <ul class="overflow" {...props}>
    <ul {...props} class={[props.class, "overflow"].filter(Boolean).join(" ")} id={props.id}>
      {children}
      <li class="overflow-end" />
    </ul>
  )
}

OverflowList.afterDOMLoaded = (id: string) => `
let numLists = 0
export default () => {
  const id = `list-${numLists++}`

  return {
    OverflowList: (props: JSX.HTMLAttributes<HTMLUListElement>) => (
      <OverflowList {...props} id={id} />
    ),
    overflowListAfterDOMLoaded: `
document.addEventListener("nav", (e) => {
  const observer = new IntersectionObserver((entries) => {
    for (const entry of entries) {
      const parentUl = entry.target.parentElement
      if (!parentUl) return
      if (entry.isIntersecting) {
        parentUl.classList.remove("gradient-active")
      } else {
@@ -34,6 +43,6 @@
  observer.observe(end)
  window.addCleanup(() => observer.disconnect())
})
`

export default OverflowList
`,
  }
}