@brillout/docpress 0.16.42 → 0.16.43

package/code-blocks/components/ChoiceGroup.css

@@ -1,9 +1,15 @@
-.choice-group {
+.choice-group-container {
   position: relative;
 
   /* layout */
   --top-position: 10px;
-  --border-color: hsl(0, 0%, 75%) hsl(0, 0%, 72%) hsl(0, 0%, 72%) hsl(0, 0%, 75%);
+  --border-radius: 5px;
+  --transition-select-list-duration: 180ms;
+  --transition-select-option-duration: 120ms;
+  --transition-select-list: top var(--transition-select-list-duration) cubic-bezier(0.2, 0.9, 0.2, 1), clip-path
+    var(--transition-select-list-duration) ease-in-out;
+  --transition-select-option: background var(--transition-select-option-duration) ease;
+  --transition-select-icon: filter 500ms ease, opacity 500ms ease;
 
   .choice-group__selects {
     position: absolute;
@@ -14,39 +20,50 @@
     right: 42px;
   }
 
-  .choice-select {
-    background: #eee;
+  .choice-select__list {
+    position: relative;
     font-size: 13.3333px;
+    background: transparent;
+    height: calc(var(--choice-count) * var(--option-height));
+    top: 0;
 
     -webkit-user-select: none; /* Safari */
     -moz-user-select: none; /* Firefox */
     -ms-user-select: none; /* IE/Edge legacy */
     user-select: none; /* Standard */
 
-    border-radius: 5px;
-    border-style: solid;
-    border-color: var(--border-color);
+    border-radius: var(--border-radius);
+    width: 100%;
+    transition: var(--transition-select-list);
   }
 
-  .choice-select__list {
-    position: relative;
-    border-radius: 5px;
-    border-color: var(--border-color);
-    width: 100%;
-    overflow: hidden;
-    transition: top 180ms cubic-bezier(0.2, 0.9, 0.2, 1);
+  .choice-select__border {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: var(--option-height);
+
+    border-style: solid;
+    border-width: 1px 2px 2px 1px;
+    border-color: hsl(0, 0%, 75%) hsl(0, 0%, 72%) hsl(0, 0%, 72%) hsl(0, 0%, 75%);
+
+    border-radius: var(--border-radius);
+    pointer-events: none;
+
+    transition: top var(--transition-select-list-duration) ease-in-out, height var(--transition-select-list-duration)
+      ease-in-out;
   }
 
   .choice-select__option {
     display: flex;
+    height: var(--option-height);
     white-space: nowrap;
     align-items: center;
     flex-wrap: nowrap;
     background: #fff;
     padding: 0 6px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     cursor: pointer;
-    transition: background 120ms ease;
+    transition: var(--transition-select-option);
   }
 
   .choice-select__option-content {
@@ -61,54 +78,123 @@
 
     filter: grayscale(100%);
     opacity: 0.8;
-    --transition: 500ms ease;
-    transition: filter var(--transition), opacity var(--transition);
+    transition: var(--transition-select-icon);
   }
 
-  .choice-select:hover .choice-select__option img,
-  .choice-select[aria-expanded='true'] .choice-select__option img {
+  .choice-select__list:hover .choice-select__option img,
+  .choice-select__list[aria-expanded='true'] .choice-select__option img {
     filter: grayscale(0%);
     opacity: 1;
   }
 
-  .choice-select[aria-expanded='false'] {
-    overflow: hidden;
-    border-width: 1px 2px 2px 1px;
-  }
-
-  .choice-select[aria-expanded='true'] {
-    overflow: visible;
-    border-width: 0;
+  .choice-select__list[aria-expanded='true'] {
     z-index: 1;
+    clip-path: inset(0px round var(--border-radius)) !important;
+    .choice-select__border {
+      top: 0 !important;
+      height: calc(var(--choice-count) * var(--option-height));
+    }
+  }
 
-    .choice-select__list {
-      border-style: solid;
-      border-width: 1px 2px 2px 1px;
+  .choice-select__list:not(.hovered) {
+    transition: none;
+    .choice-select__border {
+      transition: none;
+    }
+    .choice-select__option {
+      transition: none;
     }
   }
 
-  .choice-select__option:last-child {
-    border-bottom: none;
+  .choice-select__option:not(:last-child) {
+    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
   }
 
   .choice-select__option:hover {
     background: #f5f5f5;
   }
 
-  .choice-select__option[aria-selected='true'] {
+  .choice-select__option:has(.choice-select__radio:checked) {
     background: #eee;
   }
 
-  .choice-select__option[aria-disabled='true'] {
-    color: #999;
-    cursor: not-allowed;
-    opacity: 0.8;
-  }
-
   .hidden {
     display: none !important;
   }
 
+  .choice-select__list:has(.choice-select__option:nth-of-type(1) .choice-select__radio:checked) {
+    top: 0;
+    clip-path: inset(
+      calc(0 * var(--option-height)) 0 calc((var(--choice-count) - 0 - 1) * var(--option-height)) 0 round
+        var(--border-radius)
+    );
+    .choice-select__border {
+      top: 0;
+    }
+  }
+  .choice-select__list:has(.choice-select__option:nth-of-type(2) .choice-select__radio:checked) {
+    top: calc(-1 * var(--option-height));
+    clip-path: inset(
+      calc(1 * var(--option-height)) 0 calc((var(--choice-count) - 1 - 1) * var(--option-height)) 0 round
+        var(--border-radius)
+    );
+    .choice-select__border {
+      top: var(--option-height);
+    }
+  }
+  .choice-select__list:has(.choice-select__option:nth-of-type(3) .choice-select__radio:checked) {
+    top: calc(-2 * var(--option-height));
+    clip-path: inset(
+      calc(2 * var(--option-height)) 0 calc((var(--choice-count) - 2 - 1) * var(--option-height)) 0 round
+        var(--border-radius)
+    );
+    .choice-select__border {
+      top: calc(2 * var(--option-height));
+    }
+  }
+  .choice-select__list:has(.choice-select__option:nth-of-type(4) .choice-select__radio:checked) {
+    top: calc(-3 * var(--option-height));
+    clip-path: inset(
+      calc(3 * var(--option-height)) 0 calc((var(--choice-count) - 3 - 1) * var(--option-height)) 0 round
+        var(--border-radius)
+    );
+    .choice-select__border {
+      top: calc(3 * var(--option-height));
+    }
+  }
+  .choice-select__list:has(.choice-select__option:nth-of-type(5) .choice-select__radio:checked) {
+    top: calc(-4 * var(--option-height));
+    clip-path: inset(
+      calc(4 * var(--option-height)) 0 calc((var(--choice-count) - 4 - 1) * var(--option-height)) 0 round
+        var(--border-radius)
+    );
+    .choice-select__border {
+      top: calc(4 * var(--option-height));
+    }
+  }
+  .choice-select__list:has(.choice-select__option:nth-of-type(6) .choice-select__radio:checked) {
+    top: calc(-5 * var(--option-height));
+    clip-path: inset(
+      calc(5 * var(--option-height)) 0 calc((var(--choice-count) - 5 - 1) * var(--option-height)) 0 round
+        var(--border-radius)
+    );
+    .choice-select__border {
+      top: calc(5 * var(--option-height));
+    }
+  }
+  .choice-select__list:has(.choice-select__option:nth-of-type(7) .choice-select__radio:checked) {
+    top: calc(-6 * var(--option-height));
+    clip-path: inset(
+      calc(6 * var(--option-height)) 0 calc((var(--choice-count) - 6 - 1) * var(--option-height)) 0 round
+        var(--border-radius)
+    );
+    .choice-select__border {
+      top: calc(6 * var(--option-height));
+    }
+  }
+}
+
+.choice-group {
   /* choice visibility logic */
   select:has(option:nth-of-type(1):not(:checked)) ~ .choice:nth-of-type(1),
   select:has(option:nth-of-type(2):not(:checked)) ~ .choice:nth-of-type(2),

package/code-blocks/components/ChoiceGroup.tsx

@@ -1,37 +1,40 @@
-export { ChoiceGroup, CustomSelectsContainer }
+export { ChoiceGroup, ChoiceGroupContainer }
 
 import type { ChoiceGroup as TChoiceGroup, ChoiceGroupWithParent } from '../types.js'
-import React, { createContext, useContext, useState } from 'react'
+import React, { useId, useState } from 'react'
 import { usePageContext } from '../../renderer/usePageContext.js'
 import { useCurrentSelection } from '../hooks/useCurrentSelection.js'
 import { useRestoreScroll } from '../hooks/useRestoreScroll.js'
 import { cls } from '../../utils/cls.js'
 import './ChoiceGroup.css'
 
-const CustomSelectsContainerContext = createContext<{ choiceGroupAll: ChoiceGroupWithParent[] } | undefined>(undefined)
-
-function useCustomSelectsContext() {
-  const ctx = useContext(CustomSelectsContainerContext)
-  if (!ctx) throw new Error('useCustomSelectsContext must be used inside provider')
-  return ctx
-}
-
-function CustomSelectsContainer({
+function ChoiceGroupContainer({
   children,
   choiceGroupAll,
 }: { children: React.ReactNode; choiceGroupAll: ChoiceGroupWithParent[] }) {
-  return <CustomSelectsContainerContext value={{ choiceGroupAll }}>{children}</CustomSelectsContainerContext>
+  const renderCustomSelect = choiceGroupAll.some((choiceGroup) => choiceGroup.lvl === 0 && !choiceGroup.hidden)
+  return (
+    <div className="choice-group-container">
+      {children}
+      {renderCustomSelect && (
+        <div className={`choice-group__selects`}>
+          {(choiceGroupAll ?? []).map((choiceGroup) => (
+            <CustomSelect key={choiceGroup.name} choiceGroup={choiceGroup} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
 }
 
 function ChoiceGroup({ children, choiceGroup }: { children: React.ReactNode; choiceGroup: TChoiceGroup }) {
-  const { name: groupName, choices, default: defaultChoice, lvl } = choiceGroup
+  const { name: groupName, choices, default: defaultChoice } = choiceGroup
   const [selectedChoice] = useCurrentSelection(groupName, defaultChoice)
-  const { choiceGroupAll } = useCustomSelectsContext()
 
   return (
-    <div data-choice-group={groupName} data-lvl={lvl} className="choice-group">
+    <div className="choice-group">
       {/* Hidden select used to control choice visibility via CSS */}
-      <select name={`choicesFor-${groupName}`} value={selectedChoice} hidden disabled>
+      <select data-choice-group={groupName} name={`choicesFor-${groupName}`} value={selectedChoice} hidden disabled>
         {choices.map(({ name: choice }) => (
           <option key={choice} value={choice}>
             {choice}
@@ -39,23 +42,18 @@ function ChoiceGroup({ children, choiceGroup }: { children: React.ReactNode; cho
         ))}
       </select>
       {children}
-      {lvl === 0 && !choiceGroup.hidden && (
-        <div className={`choice-group__selects`}>
-          {(choiceGroupAll ?? []).map((choiceGroup) => (
-            <CustomSelect key={choiceGroup.name} choiceGroup={choiceGroup} />
-          ))}
-        </div>
-      )}
     </div>
   )
 }
 
 const OPTION_HEIGHT = 25
 function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
+  const radioId = useId()
   const choicesAll = usePageContext().config.docpress.choices
   const { name: groupName, emptyChoices, default: defaultChoice, hidden, parentChoiceGroup, isBuiltIn } = choiceGroup
   const [selectedChoice, setSelectedChoice] = useCurrentSelection(groupName, defaultChoice)
   const [expanded, setExpanded] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
   const [parentSelectedChoice] = useCurrentSelection(parentChoiceGroup?.name || '', parentChoiceGroup?.default || '')
   const setPrevPosition = useRestoreScroll([selectedChoice])
 
@@ -64,44 +62,53 @@ function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
   const isEmptyChoice = (choice: string) => emptyChoices.includes(choice)
   const filteredChoices = choices.filter((choice) => !isEmptyChoice(choice.name))
   const selectedIndex = filteredChoices.findIndex((choice) => choice.name === selectedChoice)
-  const rectTop = -selectedIndex * OPTION_HEIGHT
 
   return (
     <div
       id={`choicesFor-${groupName}`}
-      aria-haspopup="listbox"
       aria-expanded={expanded}
-      className={cls(['choice-select', (isHidden || isEmptyChoice(selectedChoice)) && 'hidden'])}
-      style={{ height: OPTION_HEIGHT }}
-      onMouseEnter={() => setExpanded(true)}
+      role="radiogroup"
+      className={cls([
+        'choice-select__list',
+        (isHidden || isEmptyChoice(selectedChoice)) && 'hidden',
+        isHovered && 'hovered',
+      ])}
+      style={{ '--option-height': `${OPTION_HEIGHT}px`, '--choice-count': filteredChoices.length }}
+      onMouseEnter={() => {
+        setExpanded(true)
+        setIsHovered(true)
+      }}
       onMouseLeave={() => setExpanded(false)}
+      onTransitionEnd={() => {
+        if (!expanded) setIsHovered(false)
+      }}
       onClick={() => {
         if (!expanded) next()
       }}
+      data-choice-group={groupName}
     >
-      <div
-        aria-activedescendant={`choice-${selectedChoice}`}
-        role="listbox"
-        className="choice-select__list"
-        style={{ top: rectTop, height: filteredChoices.length * OPTION_HEIGHT }}
-      >
-        {filteredChoices.map(({ name: choice, icon, iconStyle }, i) => (
-          <div
-            id={`choice-${choice}`}
-            key={choice}
-            aria-selected={i === selectedIndex}
-            role="option"
-            className="choice-select__option"
-            style={{ height: OPTION_HEIGHT }}
-            onClick={(e) => handleOnClick(e, choice)}
-          >
-            <span className="choice-select__option-content">
-              <img src={icon} alt="" aria-hidden="true" style={iconStyle} />
-              {choice}
-            </span>
-          </div>
-        ))}
-      </div>
+      <div className="choice-select__border" />
+      {filteredChoices.map(({ name: choice, icon, iconStyle }) => (
+        <label
+          id={`choice-${choice}`}
+          key={choice}
+          className={`choice-select__option`}
+          onClick={(e) => handleOnClick(e, choice)}
+        >
+          <input
+            type="radio"
+            className="choice-select__radio sr-only"
+            name={`radio-${radioId}`}
+            value={choice}
+            checked={selectedChoice === choice}
+            readOnly
+          />
+          <span className="choice-select__option-content">
+            <img src={icon} alt="" aria-hidden="true" style={iconStyle} />
+            {choice}
+          </span>
+        </label>
+      ))}
     </div>
   )
 
@@ -109,11 +116,12 @@ function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
     const nextIndex = (selectedIndex + 1) % filteredChoices.length
     setSelectedChoice(filteredChoices[nextIndex]!.name)
   }
-  function handleOnClick(e: React.MouseEvent<HTMLDivElement, MouseEvent>, choice: string) {
-    e.stopPropagation()
+  function handleOnClick(e: React.MouseEvent<HTMLLabelElement, MouseEvent>, choice: string) {
+    e.preventDefault()
     const el = e.currentTarget
     setPrevPosition(el)
-    if (el.getAttribute('aria-selected') === 'true') {
+    const isSame = selectedChoice === choice
+    if (isSame) {
       next()
     } else {
       setSelectedChoice(choice)

package/code-blocks/components/Tabs.css

@@ -2,16 +2,9 @@
   -webkit-tap-highlight-color: transparent;
 
   /* tablist style logic */
-  select:has(option:nth-of-type(1):checked) ~ ul[role='tablist'] li:nth-of-type(1),
-  select:has(option:nth-of-type(2):checked) ~ ul[role='tablist'] li:nth-of-type(2),
-  select:has(option:nth-of-type(3):checked) ~ ul[role='tablist'] li:nth-of-type(3),
-  select:has(option:nth-of-type(4):checked) ~ ul[role='tablist'] li:nth-of-type(4),
-  select:has(option:nth-of-type(5):checked) ~ ul[role='tablist'] li:nth-of-type(5),
-  select:has(option:nth-of-type(6):checked) ~ ul[role='tablist'] li:nth-of-type(6),
-  select:has(option:nth-of-type(7):checked) ~ ul[role='tablist'] li:nth-of-type(7) {
+  .choice-tabs__tab:has(.choice-tabs__radio:checked) {
     border-bottom: 2px solid #aaa;
     color: var(--color-text);
-    font-weight: 600;
   }
 }
 
@@ -36,7 +29,7 @@
 .choice-tabs__tab-content {
   display: inline-flex;
   align-items: center;
-  gap: 2px;
+  gap: 6px;
 }
 
 .choice-tabs__tab img {

package/code-blocks/components/Tabs.tsx

@@ -1,6 +1,6 @@
 export { Tabs }
 
-import React from 'react'
+import React, { useId } from 'react'
 import { useCurrentSelection } from '../hooks/useCurrentSelection.js'
 import { useRestoreScroll } from '../hooks/useRestoreScroll.js'
 import { usePageContext } from '../../renderer/usePageContext.js'
@@ -8,89 +8,44 @@ import { assertUsage } from '../../utils/assert.js'
 import './Tabs.css'
 
 function Tabs({ choice, hide = [] }: { choice: string; hide: string[] }) {
+  const radioId = useId()
   const groupName = choice
   const pageContext = usePageContext()
   const choicesAll = pageContext.config.docpress.choices
   assertUsage(choicesAll && choicesAll[groupName], `${groupName} is unknown`)
-
   const { choices, default: defaultChoice } = choicesAll[groupName]
   const [selectedChoice, setSelectedChoice] = useCurrentSelection(groupName, defaultChoice)
   const setPrevPosition = useRestoreScroll([selectedChoice])
   const isHidden = (choice: string) => hide.includes(choice)
-  const filteredChoices = choices.filter((choice) => !isHidden(choice.name))
-  const selectedIndex = filteredChoices.findIndex((choice) => choice.name === selectedChoice)
 
   return (
-    <div className="choice-tabs" data-choice-group={groupName}>
-      {/* Hidden select used to control tablist styling via CSS. */}
-      <select name={`choicesFor-${groupName}`} value={selectedChoice} hidden disabled>
-        {choices.map(({ name: choice }) => (
-          <option key={choice} value={choice}>
-            {choice}
-          </option>
-        ))}
-      </select>
-      <ul id={`choicesFor-${groupName}`} className="choice-tabs__tab-list" role="tablist">
-        {choices.map(({ name: choice, icon, iconStyle }, i) => (
-          <li
-            key={choice}
-            id={`tab-${choice}`}
-            style={{ display: isHidden(choice) ? 'none' : undefined }}
-            className="choice-tabs__tab"
-            role="tab"
-            aria-selected={i === selectedIndex}
-            tabIndex={i === selectedIndex ? 0 : -1}
-            onClick={(e) => handleOnClick(e, choice)}
-            onKeyDown={handleOnKeyDown}
-          >
+    <div className="choice-tabs">
+      <div
+        id={`choicesFor-${groupName}`}
+        className="choice-tabs__tab-list"
+        role="radiogroup"
+        data-choice-group={groupName}
+      >
+        {choices.map(({ name: choice, icon, iconStyle }) => (
+          <label key={choice} className="choice-tabs__tab" style={{ display: isHidden(choice) ? 'none' : undefined }}>
+            <input
+              className="choice-tabs__radio sr-only"
+              type="radio"
+              name={`radio-${radioId}`}
+              value={choice}
+              checked={selectedChoice === choice}
+              onChange={(e) => {
+                setPrevPosition(e.currentTarget)
+                setSelectedChoice(choice)
+              }}
+            />
             <span className="choice-tabs__tab-content">
               <img src={icon} alt="" aria-hidden="true" style={iconStyle} />
               {choice}
             </span>
-          </li>
+          </label>
         ))}
-      </ul>
+      </div>
     </div>
   )
-
-  function handleOnClick(e: React.MouseEvent<HTMLLIElement, MouseEvent>, choice: string) {
-    setPrevPosition(e.currentTarget)
-    setSelectedChoice(choice)
-  }
-
-  function handleOnKeyDown(e: React.KeyboardEvent<HTMLLIElement>) {
-    const el = e.currentTarget
-    let nextIndex = selectedIndex
-
-    switch (e.key) {
-      case 'ArrowRight':
-        nextIndex = (selectedIndex + 1) % filteredChoices.length
-        break
-      case 'ArrowLeft':
-        nextIndex = (selectedIndex - 1 + filteredChoices.length) % filteredChoices.length
-        break
-      case 'Home':
-        nextIndex = 0
-        break
-      case 'End':
-        nextIndex = filteredChoices.length - 1
-        break
-      default:
-        return
-    }
-
-    e.preventDefault()
-    setPrevPosition(el)
-    const nextChoice = filteredChoices[nextIndex]!
-    setSelectedChoice(nextChoice.name)
-    const tabEl = el.parentElement?.parentElement as HTMLDivElement
-
-    if (!isInViewport(tabEl)) tabEl.scrollIntoView({ block: 'start', behavior: 'smooth' })
-    el.focus()
-  }
-}
-
-function isInViewport(el: Element) {
-  const rect = el.getBoundingClientRect()
-  return rect.top >= 0 && rect.left >= 0 && rect.bottom <= window.innerHeight && rect.right <= window.innerWidth
 }

package/code-blocks/hooks/useCurrentSelection.ts

@@ -19,19 +19,28 @@ function useCurrentSelection(choiceGroupName: string, defaultValue: string) {
 // WARNING: We cannot use `keyPrefix` here: closures don't work because we serialize the function.
 const initializeChoiceGroup_SSR = `initializeChoiceGroup();${initializeChoiceGroup.toString()};`
 function initializeChoiceGroup() {
-  const groupsElements = document.querySelectorAll<HTMLDivElement>('[data-choice-group]')
+  const groupsElements = [
+    ...document.querySelectorAll('select[data-choice-group]'),
+    ...document.querySelectorAll('div[data-choice-group]'),
+  ]
   for (const groupEl of groupsElements) {
-    const choiceGroupName = groupEl.getAttribute('data-choice-group')!
+    const choiceGroupName = groupEl.getAttribute('data-choice-group')
+    if (!choiceGroupName) continue
     const storageKey = `docpress:choice:${choiceGroupName}`
     const selectedChoice = localStorage.getItem(storageKey)
-    if (selectedChoice) {
-      const selectEl = groupEl.querySelector<HTMLSelectElement>(`select[name="choicesFor-${choiceGroupName}"]`)!
-      const selectedIndex = [...selectEl.options].findIndex((option) => option.value === selectedChoice)
-      if (selectedIndex === -1) {
-        localStorage.removeItem(storageKey)
-      } else {
-        selectEl.value = selectedChoice
-      }
+    if (!selectedChoice) continue
+    switch (groupEl.tagName) {
+      case 'SELECT':
+        const selectEl = groupEl as HTMLSelectElement
+        const optionExists = [...selectEl.options].some((opt) => opt.value === selectedChoice)
+        if (!optionExists) localStorage.removeItem(storageKey)
+        else selectEl.value = selectedChoice
+        break
+      case 'DIV':
+        const radioEl = groupEl.querySelector<HTMLInputElement>(`input[type="radio"][value="${selectedChoice}"]`)
+        if (radioEl) radioEl.checked = true
+      default:
+        break
     }
   }
 }

package/code-blocks/hooks/useMDXComponents.tsx

@@ -3,12 +3,12 @@ export { useMDXComponents }
 import React from 'react'
 import type { UseMdxComponents } from '@mdx-js/mdx'
 import { Pre } from '../components/Pre.js'
-import { ChoiceGroup, CustomSelectsContainer } from '../components/ChoiceGroup.js'
+import { ChoiceGroup, ChoiceGroupContainer } from '../components/ChoiceGroup.js'
 
 const useMDXComponents: UseMdxComponents = () => {
   return {
     ChoiceGroup,
-    CustomSelectsContainer,
+    ChoiceGroupContainer,
     pre: (props) => <Pre {...props} />,
   }
 }

package/code-blocks/remarkChoiceGroup.ts

@@ -86,7 +86,7 @@ const remarkChoiceGroup: Plugin<[], Root> = (): Transformer<Root> => {
       // Descend into non-container nodes so that a `CustomSelectsContainer` nested inside another JSX
       // element (e.g. react-tabs `<Tabs>`/`<TabPanel>`, or a `<div>`) still gets visited and its
       // `choiceGroupAll` attribute injected. (Returning 'skip' here would stop the descent.)
-      if (node.name !== 'CustomSelectsContainer') return
+      if (node.name !== 'ChoiceGroupContainer') return
 
       const choiceGroupAll: ChoiceGroupWithParent[] = []
 

package/code-blocks/utils/generateChoiceGroupCode.ts

@@ -130,7 +130,7 @@ function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent: Parent, hide
   if (lvl === 0) {
     return {
       type: 'mdxJsxFlowElement',
-      name: 'CustomSelectsContainer',
+      name: 'ChoiceGroupContainer',
       attributes: [],
       children: [choiceGroupNode],
     }

package/css/index.css

@@ -8,3 +8,4 @@
 @import './table.css';
 @import './tooltip.css';
 @import '@docsearch/css/dist/style.css';
+@import './sr-only.css';

package/css/sr-only.css

@@ -0,0 +1,11 @@
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/code-blocks/components/Tabs.js

@@ -1,11 +1,12 @@
 export { Tabs };
-import React from 'react';
+import React, { useId } from 'react';
 import { useCurrentSelection } from '../hooks/useCurrentSelection.js';
 import { useRestoreScroll } from '../hooks/useRestoreScroll.js';
 import { usePageContext } from '../../renderer/usePageContext.js';
 import { assertUsage } from '../../utils/assert.js';
 import './Tabs.css';
 function Tabs({ choice, hide = [] }) {
+    const radioId = useId();
     const groupName = choice;
     const pageContext = usePageContext();
     const choicesAll = pageContext.config.docpress.choices;
@@ -14,48 +15,13 @@ function Tabs({ choice, hide = [] }) {
     const [selectedChoice, setSelectedChoice] = useCurrentSelection(groupName, defaultChoice);
     const setPrevPosition = useRestoreScroll([selectedChoice]);
     const isHidden = (choice) => hide.includes(choice);
-    const filteredChoices = choices.filter((choice) => !isHidden(choice.name));
-    const selectedIndex = filteredChoices.findIndex((choice) => choice.name === selectedChoice);
-    return (React.createElement("div", { className: "choice-tabs", "data-choice-group": groupName },
-        React.createElement("select", { name: `choicesFor-${groupName}`, value: selectedChoice, hidden: true, disabled: true }, choices.map(({ name: choice }) => (React.createElement("option", { key: choice, value: choice }, choice)))),
-        React.createElement("ul", { id: `choicesFor-${groupName}`, className: "choice-tabs__tab-list", role: "tablist" }, choices.map(({ name: choice, icon, iconStyle }, i) => (React.createElement("li", { key: choice, id: `tab-${choice}`, style: { display: isHidden(choice) ? 'none' : undefined }, className: "choice-tabs__tab", role: "tab", "aria-selected": i === selectedIndex, tabIndex: i === selectedIndex ? 0 : -1, onClick: (e) => handleOnClick(e, choice), onKeyDown: handleOnKeyDown },
+    return (React.createElement("div", { className: "choice-tabs" },
+        React.createElement("div", { id: `choicesFor-${groupName}`, className: "choice-tabs__tab-list", role: "radiogroup", "data-choice-group": groupName }, choices.map(({ name: choice, icon, iconStyle }) => (React.createElement("label", { key: choice, className: "choice-tabs__tab", style: { display: isHidden(choice) ? 'none' : undefined } },
+            React.createElement("input", { className: "choice-tabs__radio sr-only", type: "radio", name: `radio-${radioId}`, value: choice, checked: selectedChoice === choice, onChange: (e) => {
+                    setPrevPosition(e.currentTarget);
+                    setSelectedChoice(choice);
+                } }),
             React.createElement("span", { className: "choice-tabs__tab-content" },
                 React.createElement("img", { src: icon, alt: "", "aria-hidden": "true", style: iconStyle }),
                 choice)))))));
-    function handleOnClick(e, choice) {
-        setPrevPosition(e.currentTarget);
-        setSelectedChoice(choice);
-    }
-    function handleOnKeyDown(e) {
-        const el = e.currentTarget;
-        let nextIndex = selectedIndex;
-        switch (e.key) {
-            case 'ArrowRight':
-                nextIndex = (selectedIndex + 1) % filteredChoices.length;
-                break;
-            case 'ArrowLeft':
-                nextIndex = (selectedIndex - 1 + filteredChoices.length) % filteredChoices.length;
-                break;
-            case 'Home':
-                nextIndex = 0;
-                break;
-            case 'End':
-                nextIndex = filteredChoices.length - 1;
-                break;
-            default:
-                return;
-        }
-        e.preventDefault();
-        setPrevPosition(el);
-        const nextChoice = filteredChoices[nextIndex];
-        setSelectedChoice(nextChoice.name);
-        const tabEl = el.parentElement?.parentElement;
-        if (!isInViewport(tabEl))
-            tabEl.scrollIntoView({ block: 'start', behavior: 'smooth' });
-        el.focus();
-    }
-}
-function isInViewport(el) {
-    const rect = el.getBoundingClientRect();
-    return rect.top >= 0 && rect.left >= 0 && rect.bottom <= window.innerHeight && rect.right <= window.innerWidth;
 }

package/dist/code-blocks/hooks/useCurrentSelection.js

@@ -15,20 +15,33 @@ function useCurrentSelection(choiceGroupName, defaultValue) {
 // WARNING: We cannot use `keyPrefix` here: closures don't work because we serialize the function.
 const initializeChoiceGroup_SSR = `initializeChoiceGroup();${initializeChoiceGroup.toString()};`;
 function initializeChoiceGroup() {
-    const groupsElements = document.querySelectorAll('[data-choice-group]');
+    const groupsElements = [
+        ...document.querySelectorAll('select[data-choice-group]'),
+        ...document.querySelectorAll('div[data-choice-group]'),
+    ];
     for (const groupEl of groupsElements) {
         const choiceGroupName = groupEl.getAttribute('data-choice-group');
+        if (!choiceGroupName)
+            continue;
         const storageKey = `docpress:choice:${choiceGroupName}`;
         const selectedChoice = localStorage.getItem(storageKey);
-        if (selectedChoice) {
-            const selectEl = groupEl.querySelector(`select[name="choicesFor-${choiceGroupName}"]`);
-            const selectedIndex = [...selectEl.options].findIndex((option) => option.value === selectedChoice);
-            if (selectedIndex === -1) {
-                localStorage.removeItem(storageKey);
-            }
-            else {
-                selectEl.value = selectedChoice;
-            }
+        if (!selectedChoice)
+            continue;
+        switch (groupEl.tagName) {
+            case 'SELECT':
+                const selectEl = groupEl;
+                const optionExists = [...selectEl.options].some((opt) => opt.value === selectedChoice);
+                if (!optionExists)
+                    localStorage.removeItem(storageKey);
+                else
+                    selectEl.value = selectedChoice;
+                break;
+            case 'DIV':
+                const radioEl = groupEl.querySelector(`input[type="radio"][value="${selectedChoice}"]`);
+                if (radioEl)
+                    radioEl.checked = true;
+            default:
+                break;
         }
     }
 }

package/dist/code-blocks/remarkChoiceGroup.js

@@ -70,7 +70,7 @@ const remarkChoiceGroup = () => {
             // Descend into non-container nodes so that a `CustomSelectsContainer` nested inside another JSX
             // element (e.g. react-tabs `<Tabs>`/`<TabPanel>`, or a `<div>`) still gets visited and its
             // `choiceGroupAll` attribute injected. (Returning 'skip' here would stop the descent.)
-            if (node.name !== 'CustomSelectsContainer')
+            if (node.name !== 'ChoiceGroupContainer')
                 return;
             const choiceGroupAll = [];
             visit(node, 'mdxJsxFlowElement', (child) => {

package/dist/code-blocks/utils/generateChoiceGroupCode.js

@@ -107,7 +107,7 @@ function generateChoiceGroupCode(choiceNodes, parent, hide = false) {
     if (lvl === 0) {
         return {
             type: 'mdxJsxFlowElement',
-            name: 'CustomSelectsContainer',
+            name: 'ChoiceGroupContainer',
             attributes: [],
             children: [choiceGroupNode],
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.16.42",
+  "version": "0.16.43",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",