Switch the language control to a native select

The menu was a <details> with a hand-built option list, and eighteen of its
lines re-implemented Escape-to-close and click-away-to-close. A <select> comes
with those, plus keyboard navigation, focus handling and the mobile picker.

code-blocks.js drops from 256 lines to 201, and the CSS loses the popup panel
along with it.

The trigger still matches the design. The list it opens is the browser's, so
that part no longer matches the Figma panel: worth Mandy's eye before this
merges.

The caret is a mask on a wrapper span, since a <select> renders no
pseudo-element of its own and a background image cannot follow the theme.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: enf0rc3

src/assets/icons/caret-down.svg

@@ -8,18 +8,6 @@ import { copyOnClick } from './copy-button.js';
 /** Taller than this and the block collapses until it is clicked. */
 const COLLAPSE_HEIGHT = 500;
 
-/**
- * @param {string} tag
- * @param {string} className
- * @param {string} [text]
- */
-function el(tag, className, text) {
-  const node = document.createElement(tag);
-  node.className = className;
-  if (text) node.textContent = text;
-  return node;
-}
-
 /**
  * @param {HTMLElement} button
  */
@@ -33,90 +21,47 @@ function visibleCode(button) {
   return code?.textContent ?? null;
 }
 
-/* Language menu ---------------------------------------------------------- */
+/* Language switcher ------------------------------------------------------ */
 
 /**
- * Swaps the static language text for a menu over the block's panels.
+ * A <select>, so the keyboard handling, the dismissal and the mobile picker are
+ * the browser's rather than ours.
  *
  * @param {HTMLElement} block
  * @param {{ name: string, label: string }[]} entries
  */
-function addLanguageMenu(block, entries) {
+function addLanguageSelect(block, entries) {
   const panels = Array.from(qsa('.code-block__panel', block));
   const label = qs('.code-block__label', block);
 
-  const menu = document.createElement('details');
-  menu.className = 'code-block__languages';
-
-  const trigger = document.createElement('summary');
-  trigger.className = 'code-block__language-trigger btn btn--small';
-
-  const caret = el('i', 'fa-solid fa-caret-down btn__icon');
-  caret.setAttribute('aria-hidden', 'true');
-
-  const triggerLabel = el('span', 'btn__label', entries[0].name);
-  trigger.append(triggerLabel, caret);
+  const select = document.createElement('select');
+  select.className = 'code-block__language-select btn btn--small';
+  select.setAttribute('aria-label', 'Language');
 
-  // The visible text alone would name the control "PowerShell", which says
-  // nothing about it being a control.
-  const nameTrigger = (name) =>
-    trigger.setAttribute('aria-label', `Language: ${name}. Change language`);
+  entries.forEach((entry, index) => {
+    const option = document.createElement('option');
+    option.value = String(index);
+    option.textContent = entry.name;
+    select.appendChild(option);
+  });
 
-  const select = (index) => {
+  const show = () => {
+    const index = select.selectedIndex;
     panels.forEach((panel, i) => (panel.hidden = i !== index));
     label.textContent = entries[index].label;
     label.hidden = !entries[index].label;
     measure(block);
   };
 
-  const options = el('ul', 'code-block__language-options');
-  entries.forEach((entry, index) => {
-    const option = document.createElement('button');
-    option.type = 'button';
-    option.className = 'code-block__language-option';
-    option.textContent = entry.name;
-    option.setAttribute('aria-pressed', index === 0 ? 'true' : 'false');
+  select.addEventListener('change', show);
 
-    option.addEventListener('click', () => {
-      triggerLabel.textContent = entry.name;
-      nameTrigger(entry.name);
-      qsa('.code-block__language-option', options).forEach((other) =>
-        other.setAttribute('aria-pressed', String(other === option))
-      );
-      menu.open = false;
-      select(index);
-    });
-
-    const item = document.createElement('li');
-    item.appendChild(option);
-    options.appendChild(item);
-  });
-
-  menu.append(trigger, options);
-  addMenuListeners(menu, trigger);
-
-  nameTrigger(entries[0].name);
-  qs('.code-block__language', block).replaceWith(menu);
-  select(0);
-}
+  // Wrapped, because a <select> renders no pseudo-element to hang the caret on.
+  const switcher = document.createElement('span');
+  switcher.className = 'code-block__language-switcher';
+  switcher.appendChild(select);
 
-/**
- * @param {HTMLDetailsElement} menu
- * @param {HTMLElement} trigger
- */
-function addMenuListeners(menu, trigger) {
-  menu.addEventListener('keydown', (event) => {
-    if (!menu.open || event.key !== 'Escape') return;
-    event.preventDefault();
-    menu.open = false;
-    trigger.focus();
-  });
-
-  document.addEventListener('click', (event) => {
-    if (!menu.open) return;
-    if (event.target instanceof Node && menu.contains(event.target)) return;
-    menu.open = false;
-  });
+  qs('.code-block__language', block).replaceWith(switcher);
+  show();
 }
 
 /**
@@ -170,7 +115,7 @@ function enhanceGroups() {
     participants[0].replaceWith(host);
     participants.forEach((details) => details.remove());
 
-    addLanguageMenu(host, entries);
+    addLanguageSelect(host, entries);
   });
 }
 

src/scripts/modules/code-blocks.js

@@ -2783,63 +2783,35 @@ a[data-youtube] {
   white-space: nowrap;
 }
 
-/* The menu, when the block was written in several languages */
-.code-block__languages {
+/* The switcher, when the block was written in several languages. Styled as the
+   design's button; the option list it opens belongs to the browser. */
+.code-block__language-switcher {
   position: relative;
+  display: inline-flex;
+  align-items: center;
 }
 
-.code-block__language-trigger {
-  list-style: none;
+/* Qualified to outrank the `padding` shorthand `.btn` sets further down */
+.code-block .code-block__language-select {
+  padding-inline-end: calc(var(--space16) + var(--space8));
   cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
 }
 
-/* Qualified to outrank the global rule that styles every <summary> as a link */
-.code-block .code-block__language-trigger,
-.code-block .code-block__language-trigger > * {
-  color: var(--colorTextPrimary);
-  text-decoration: none;
-}
-
-.code-block__language-trigger::-webkit-details-marker {
-  display: none;
-}
-
-/* Qualified to outrank `.page-content ul`, which indents every list */
-.code-block .code-block__language-options {
+/* On the wrapper, because a <select> renders no pseudo-elements of its own.
+   A mask so the caret takes the icon color in both themes. */
+.code-block__language-switcher::after {
+  content: '';
   position: absolute;
-  inset-inline-end: 0;
-  inset-block-start: calc(100% + var(--space4));
-  z-index: 2;
-  min-width: 100%;
-  margin: 0;
-  padding: var(--space4);
-  border: var(--borderWidth1) solid var(--colorBorderPrimary);
-  border-radius: var(--borderRadiusSmall);
-  background: var(--colorBackgroundPrimaryDefault);
-  box-shadow: var(--octo-shadow-standard-box);
-  list-style: none;
-}
-
-.code-block__language-option {
-  display: block;
-  width: 100%;
-  padding: var(--space4) var(--space8);
-  border: 0;
-  border-radius: var(--borderRadiusSmall);
-  background: transparent;
-  color: var(--colorTextPrimary);
-  font: var(--textBodyRegularMedium);
-  text-align: start;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.code-block__language-option:is(:hover, :focus-visible) {
-  background: var(--colorBackgroundPrimaryHover);
-}
-
-.code-block__language-option[aria-pressed='true'] {
-  font: var(--textBodyBoldMedium);
+  inset-inline-end: var(--space6);
+  top: 50%;
+  translate: 0 -50%;
+  width: 1.25rem;
+  height: 1.25rem;
+  background-color: var(--colorIconPrimary);
+  mask: url('../assets/icons/caret-down.svg') center / contain no-repeat;
+  pointer-events: none;
 }
 
 /* --code-block-height is measured by code-blocks.js: max-height has to resolve

src/styles/main.css

@@ -40,9 +40,9 @@ test.describe('code block, no JavaScript', () => {
   }) => {
     await page.goto(GROUPED);
 
-    // No menu to switch with, so each language keeps its own block
+    // Nothing to switch with, so each language keeps its own block
     await expect(page.locator('.code-block')).toHaveCount(2);
-    await expect(page.locator('.code-block__languages')).toHaveCount(0);
+    await expect(page.locator('.code-block__language-select')).toHaveCount(0);
   });
 });
 
@@ -87,29 +87,43 @@ test.describe('code block', () => {
     });
   });
 
-  test('turns a code-only details group into one block with a language menu', async ({
+  test('turns a code-only details group into one block with a language select', async ({
     page,
   }) => {
     await page.goto(GROUPED);
 
     const block = page.locator('.code-block').first();
-    const trigger = block.locator('.code-block__language-trigger');
-    await expect(trigger).toHaveText('PowerShell');
+    const select = block.locator('.code-block__language-select');
+    await expect(select).toHaveValue('0');
+    expect(await select.locator('option').allTextContents()).toEqual([
+      'PowerShell',
+      'C#',
+    ]);
 
     // Only the selected language is on the page
     await expect(block.locator('.code-block__panel:visible')).toHaveCount(1);
     await expect(block).toContainText('$repository.Machines.Modify');
 
-    await trigger.click();
-    await block
-      .locator('.code-block__language-option', { hasText: 'C#' })
-      .click();
+    await select.selectOption({ label: 'C#' });
 
-    await expect(trigger).toHaveText('C#');
     await expect(block).toContainText('repository.Machines.Modify(machine)');
     await expect(block.locator('.code-block__panel:visible')).toHaveCount(1);
   });
 
+  test('the select is reachable and operable from the keyboard', async ({
+    page,
+  }) => {
+    await page.goto(GROUPED);
+
+    const select = page.locator('.code-block__language-select').first();
+    await select.focus();
+    await expect(select).toBeFocused();
+
+    // Free with <select>; the old menu hand-rolled all of this
+    await select.press('ArrowDown');
+    await expect(select).toHaveValue('1');
+  });
+
   test('leaves a group holding more than code as a tab list', async ({
     page,
   }) => {