diff --git a/app/assets/stylesheets/lexxy-editor.css b/app/assets/stylesheets/lexxy-editor.css
index 6456ffd27..e7550dc8e 100644
--- a/app/assets/stylesheets/lexxy-editor.css
+++ b/app/assets/stylesheets/lexxy-editor.css
@@ -636,7 +636,7 @@
       padding: 1ch;
       position: relative;
 
-      &[aria-pressed="true"] {
+      &[aria-checked="true"] {
         background-color: var(--lexxy-color-selected);
 
         &:hover {
@@ -782,6 +782,10 @@
         grid-template-columns: repeat(auto-fill, minmax(var(--lexxy-toolbar-button-size), 1fr));
         max-inline-size: var(--max-inline-size);
 
+        .lexxy-highlight-colors__group {
+          display: contents;
+        }
+
         button {
           block-size: unset;
           inline-size: 100%;
@@ -796,7 +800,7 @@
             position: absolute;
           }
 
-          &[aria-pressed="true"] {
+          &[aria-checked="true"] {
             background-color: transparent;
             box-shadow: 0 0 0 2px currentColor inset;
 
@@ -830,8 +834,7 @@
   position: absolute;
   z-index: 2;
 
-  button,
-  summary {
+  button {
     align-items: center;
     background: transparent;
     block-size: var(--button-size);
@@ -849,7 +852,7 @@
 
     @media(any-hover: hover) {
       &:hover:not([aria-disabled="true"]),
-      [open] &:is(summary) {
+      &.lexxy-table-control__more-menu-trigger[aria-expanded="true"] {
         background: var(--lexxy-color-ink-medium);
 
         svg {
@@ -880,8 +883,10 @@
     }
   }
 
-  summary {
+  .lexxy-table-control__more-menu-trigger {
+    aspect-ratio: auto;
     box-shadow: 0 0 0 1px inset rgba(128, 128, 128, 0.3);
+    font-weight: normal;
     padding: 0 1.25ch;
   }
 
@@ -909,6 +914,7 @@
       white-space: nowrap;
 
       .lexxy-table-control__more-menu {
+        display: flex;
         gap: 0;
         position: relative;
 
@@ -924,6 +930,10 @@
           position: absolute;
           transform: translateX(-50%);
 
+          &[hidden] {
+            display: none;
+          }
+
           button {
             aspect-ratio: unset;
             flex-direction: row;
diff --git a/app/assets/stylesheets/lexxy-variables.css b/app/assets/stylesheets/lexxy-variables.css
index e9d93ced0..1bc6b629e 100644
--- a/app/assets/stylesheets/lexxy-variables.css
+++ b/app/assets/stylesheets/lexxy-variables.css
@@ -49,11 +49,11 @@
 
   --highlight-bg-1: rgba(229, 223, 6, 0.3);
   --highlight-bg-2: rgba(255, 185, 87, 0.3);
-  --highlight-bg-3: rgba(255, 118, 118, 0.3); 
+  --highlight-bg-3: rgba(255, 118, 118, 0.3);
   --highlight-bg-4: rgba(248, 137, 216, 0.3);
-  --highlight-bg-5: rgba(190, 165, 255, 0.3); 
+  --highlight-bg-5: rgba(190, 165, 255, 0.3);
   --highlight-bg-6: rgba(124, 192, 252, 0.3);
-  --highlight-bg-7: rgba(140, 255, 129, 0.3); 
+  --highlight-bg-7: rgba(140, 255, 129, 0.3);
   --highlight-bg-8: rgba(221, 170, 123, 0.3);
   --highlight-bg-9: rgba(200, 200, 200, 0.3);
 
@@ -84,4 +84,4 @@
   --lexxy-radius: 0.5ch;
   --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   --lexxy-z-popup: 1000;
-}
\ No newline at end of file
+}
diff --git a/src/config/lexxy.js b/src/config/lexxy.js
index 1056f3669..8d79be9ac 100644
--- a/src/config/lexxy.js
+++ b/src/config/lexxy.js
@@ -1,5 +1,4 @@
 import Configuration from "./configuration"
-import { range } from "../helpers/array_helper.js"
 
 const global = new Configuration({
   attachmentTagName: "action-text-attachment",
@@ -21,8 +20,28 @@ const presets = new Configuration({
     headings: [ "h2", "h3", "h4" ],
     highlight: {
       buttons: {
-        color: range(1, 9).map(n => `var(--highlight-${n})`),
-        "background-color": range(1, 9).map(n => `var(--highlight-bg-${n})`),
+        color: [
+          { value: "var(--highlight-1)", label: "Yellow" },
+          { value: "var(--highlight-2)", label: "Orange" },
+          { value: "var(--highlight-3)", label: "Red" },
+          { value: "var(--highlight-4)", label: "Magenta" },
+          { value: "var(--highlight-5)", label: "Purple" },
+          { value: "var(--highlight-6)", label: "Blue" },
+          { value: "var(--highlight-7)", label: "Green" },
+          { value: "var(--highlight-8)", label: "Sand" },
+          { value: "var(--highlight-9)", label: "Gray" },
+        ],
+        "background-color": [
+          { value: "var(--highlight-bg-1)", label: "Yellow" },
+          { value: "var(--highlight-bg-2)", label: "Orange" },
+          { value: "var(--highlight-bg-3)", label: "Red" },
+          { value: "var(--highlight-bg-4)", label: "Magenta" },
+          { value: "var(--highlight-bg-5)", label: "Purple" },
+          { value: "var(--highlight-bg-6)", label: "Blue" },
+          { value: "var(--highlight-bg-7)", label: "Green" },
+          { value: "var(--highlight-bg-8)", label: "Sand" },
+          { value: "var(--highlight-bg-9)", label: "Gray" },
+        ],
       },
       permit: {
         color: [],
diff --git a/src/elements/dropdown/heading.js b/src/elements/dropdown/heading.js
index ea4bfa37f..e84f153b2 100644
--- a/src/elements/dropdown/heading.js
+++ b/src/elements/dropdown/heading.js
@@ -64,8 +64,8 @@ export class HeadingDropdown extends HTMLElement {
   updateActiveHeading(tag) {
     this.#headingButtons.forEach(button => {
       const next = (button.dataset.heading === tag).toString()
-      if (button.getAttribute("aria-pressed") !== next) {
-        button.setAttribute("aria-pressed", next)
+      if (button.getAttribute("aria-checked") !== next) {
+        button.setAttribute("aria-checked", next)
       }
     })
   }
@@ -110,7 +110,7 @@ export class HeadingDropdown extends HTMLElement {
     button.classList.add("lexxy-heading-button")
     button.name = name
     button.title = label
-    button.setAttribute("role", "menuitem")
+    button.setAttribute("role", "menuitemradio")
     button.innerHTML = `${icon} <span>${label}</span>`
     return button
   }
diff --git a/src/elements/dropdown/highlight.js b/src/elements/dropdown/highlight.js
index 15e1026a1..7e7f0ca1a 100644
--- a/src/elements/dropdown/highlight.js
+++ b/src/elements/dropdown/highlight.js
@@ -3,6 +3,7 @@ import { $getSelectionStyleValueForProperty } from "@lexical/selection"
 import { ToolbarDropdown } from "../toolbar_dropdown"
 import { registerEventListener } from "../../helpers/listener_helper"
 import { createElement } from "../../helpers/html_helper"
+import { normalizeColorButtons } from "../../helpers/format_helper"
 
 const APPLY_HIGHLIGHT_SELECTOR = "button.lexxy-highlight-button"
 const REMOVE_HIGHLIGHT_SELECTOR = "[data-command='removeHighlight']"
@@ -35,27 +36,36 @@ export class HighlightDropdown extends ToolbarDropdown {
 
     const colorGroups = this.editorElement.config.get("highlight.buttons")
 
-    this.#populateButtonGroup("color", colorGroups.color)
-    this.#populateButtonGroup("background-color", colorGroups["background-color"])
+    this.#appendColorGroup("Text color", "color", colorGroups.color)
+    this.#appendColorGroup("Background color", "background-color", colorGroups["background-color"])
 
     const maxNumberOfColors = Math.max(colorGroups.color.length, colorGroups["background-color"].length)
     this.panel.style.setProperty("--max-colors", maxNumberOfColors)
   }
 
-  #populateButtonGroup(attribute, values) {
-    values.forEach((value, index) => {
-      this.#buttonContainer.appendChild(this.#createButton(attribute, value, index))
+  #appendColorGroup(label, attribute, buttons) {
+    const group = createElement("div", {
+      role: "group",
+      class: "lexxy-highlight-colors__group",
+      "aria-label": label
     })
+
+    normalizeColorButtons(buttons).forEach((button, index) => {
+      group.appendChild(this.#createButton(attribute, button, index))
+    })
+
+    this.#buttonContainer.append(group)
   }
 
-  #createButton(attribute, value, index) {
+  #createButton(attribute, button, index) {
     return createElement("button", {
       type: "button",
-      dataset: { value, style: attribute },
-      style: `${attribute}: ${value}`,
+      dataset: { value: button.value, style: attribute },
+      style: `${attribute}: ${button.value}`,
       class: "lexxy-editor__toolbar-button lexxy-highlight-button",
       name: `${attribute}-${index}`,
-      role: "menuitem"
+      role: "menuitemcheckbox",
+      "aria-label": button.label
     })
   }
 
@@ -79,11 +89,7 @@ export class HighlightDropdown extends ToolbarDropdown {
     const backgroundColor = $getSelectionStyleValueForProperty(selection, "background-color", NO_STYLE)
 
     this.#colorButtons.forEach(button => {
-      const matchesSelection = button.dataset.value === textColor || button.dataset.value === backgroundColor
-      const next = matchesSelection.toString()
-      if (button.getAttribute("aria-pressed") !== next) {
-        button.setAttribute("aria-pressed", next)
-      }
+      button.ariaChecked = button.dataset.value === textColor || button.dataset.value === backgroundColor
     })
 
     const hasHighlight = textColor !== NO_STYLE || backgroundColor !== NO_STYLE
diff --git a/src/elements/editor.js b/src/elements/editor.js
index 7a9564df2..91ad85347 100644
--- a/src/elements/editor.js
+++ b/src/elements/editor.js
@@ -29,7 +29,7 @@ import Contents from "../editor/contents"
 import Clipboard from "../editor/clipboard"
 import Extensions from "../editor/extensions"
 import { BrowserAdapter } from "../editor/adapters/browser_adapter"
-import { getHighlightStyles } from "../helpers/format_helper"
+import { getHighlightStyles, normalizeColorButtons } from "../helpers/format_helper"
 import { styleResolverRoot } from "../helpers/style_resolver_root"
 
 import { CustomActionTextAttachmentNode } from "../nodes/custom_action_text_attachment_node"
@@ -867,21 +867,22 @@ export class LexicalEditorElement extends HTMLElement {
   // — triggering at most one forced reflow. The previous implementation interleaved
   // setProperty/getComputedStyle/removeProperty on the same element, forcing a style
   // recalc on every iteration during editor initialization.
-  #resolveColors(property, cssValues) {
+  #resolveColors(property, buttons) {
     const container = document.createElement("span")
     container.style.display = "none"
 
-    const resolvers = cssValues.map(cssValue => {
+    const resolvers = normalizeColorButtons(buttons).map(({ value, label }) => {
       const element = document.createElement("span")
-      element.style.setProperty(property, cssValue)
+      element.style.setProperty(property, value)
       container.appendChild(element)
-      return { element, name: cssValue }
+      return { element, name: value, label }
     })
 
     styleResolverRoot().appendChild(container)
 
-    const resolved = resolvers.map(({ element, name }) => ({
+    const resolved = resolvers.map(({ element, name, label }) => ({
       name,
+      label,
       value: window.getComputedStyle(element).getPropertyValue(property)
     }))
 
diff --git a/src/elements/table/table_tools.js b/src/elements/table/table_tools.js
index 14f822c71..3fe2be7a1 100644
--- a/src/elements/table/table_tools.js
+++ b/src/elements/table/table_tools.js
@@ -13,7 +13,7 @@ export class TableTools extends HTMLElement {
   #listeners = new ListenerBin()
 
   connectedCallback() {
-    this.tableController = new TableController(this.#editorElement)
+    this.tableController = new TableController(this.editorElement)
     this.classList.add("lexxy-floating-controls")
     this.role = "toolbar"
 
@@ -34,16 +34,34 @@ export class TableTools extends HTMLElement {
     this.tableController = null
   }
 
-  get #editor() {
-    return this.#editorElement.editor
+  get editorElement() {
+    return this.closest("lexxy-editor")
   }
 
-  get #editorElement() {
-    return this.closest("lexxy-editor")
+  get editor() {
+    return this.editorElement.editor
+  }
+
+  getEditorElement() {
+    return this.editorElement
+  }
+
+  closeDropdowns({ except } = {}) {
+    this.#moreMenus.forEach(menu => {
+      if (menu !== except) menu.close({ focusEditor: false })
+    })
+  }
+
+  get #moreMenus() {
+    return this.querySelectorAll("lexxy-toolbar-dropdown")
+  }
+
+  get #hasOpenMoreMenu() {
+    return Array.from(this.#moreMenus).some(menu => menu.isOpen)
   }
 
   get #tableToolsButtons() {
-    return Array.from(this.querySelectorAll("button, details > summary"))
+    return Array.from(this.querySelectorAll("button")).filter(button => !button.closest("[data-dropdown-panel]"))
   }
 
   #setUpButtons() {
@@ -62,23 +80,37 @@ export class TableTools extends HTMLElement {
     const plusButton = this.#createButton(`Add ${childType}`, { action: "insert", childType, direction: "after" }, "+")
     const minusButton = this.#createButton(`Remove ${childType}`, { action: "delete", childType }, "−")
 
-    const dropdown = createElement("details", { className: "lexxy-table-control__more-menu" })
-    dropdown.setAttribute("name", "lexxy-dropdown")
-    dropdown.tabIndex = -1
-
-    const count = createElement("summary", {}, `_ ${childType}s`)
-    setCountProperty(count)
-    dropdown.appendChild(count)
-
-    dropdown.appendChild(moreMenu)
-
     container.appendChild(minusButton)
-    container.appendChild(dropdown)
+    container.appendChild(this.#createMoreMenu(childType, setCountProperty, moreMenu))
     container.appendChild(plusButton)
 
     return container
   }
 
+  #createMoreMenu(childType, setCountProperty, menu) {
+    const dropdown = createElement("lexxy-toolbar-dropdown", { className: "lexxy-table-control__more-menu" })
+
+    const trigger = createElement("button", {
+      type: "button",
+      className: "lexxy-table-control__more-menu-trigger",
+      dataset: { dropdownTrigger: "" },
+      "aria-haspopup": "menu",
+      "aria-expanded": "false"
+    }, `_ ${childType}s`)
+    trigger.tabIndex = -1
+    setCountProperty(trigger)
+
+    menu.dataset.dropdownPanel = ""
+    menu.role = "menu"
+    menu.setAttribute("aria-label", `${childType} options`)
+    menu.hidden = true
+
+    dropdown.appendChild(trigger)
+    dropdown.appendChild(menu)
+
+    return dropdown
+  }
+
   #createRowButtonsContainer() {
     return this.#createButtonsContainer(
       "row",
@@ -97,15 +129,18 @@ export class TableTools extends HTMLElement {
 
   #createMoreMenuSection(childType) {
     const section = createElement("div", { className: "lexxy-floating-controls__group lexxy-table-control__more-menu-details" })
-    const addBeforeButton = this.#createButton(`Add ${childType} before`, { action: "insert", childType, direction: "before" })
-    const addAfterButton = this.#createButton(`Add ${childType} after`, { action: "insert", childType, direction: "after" })
-    const toggleStyleButton = this.#createButton(`Toggle ${childType} style`, { action: "toggle", childType })
-    const deleteButton = this.#createButton(`Remove ${childType}`, { action: "delete", childType })
 
-    section.appendChild(addBeforeButton)
-    section.appendChild(addAfterButton)
-    section.appendChild(toggleStyleButton)
-    section.appendChild(deleteButton)
+    const items = [
+      this.#createButton(`Add ${childType} before`, { action: "insert", childType, direction: "before" }),
+      this.#createButton(`Add ${childType} after`, { action: "insert", childType, direction: "after" }),
+      this.#createButton(`Toggle ${childType} style`, { action: "toggle", childType }),
+      this.#createButton(`Remove ${childType}`, { action: "delete", childType })
+    ]
+
+    items.forEach(item => {
+      item.role = "menuitem"
+      section.appendChild(item)
+    })
 
     return section
   }
@@ -146,7 +181,7 @@ export class TableTools extends HTMLElement {
   }
 
   #registerKeyboardShortcuts() {
-    this.#listeners.track(this.#editor.registerCommand(KEY_DOWN_COMMAND, this.#focusToolbarOnAltF10, COMMAND_PRIORITY_HIGH))
+    this.#listeners.track(this.editor.registerCommand(KEY_DOWN_COMMAND, this.#focusToolbarOnAltF10, COMMAND_PRIORITY_HIGH))
   }
 
   #focusToolbarOnAltF10 = (event) => {
@@ -177,9 +212,9 @@ export class TableTools extends HTMLElement {
     const cell = this.tableController.currentCell
     if (!cell) return
 
-    this.#editor.update(() => {
+    this.editor.update(() => {
       cell.select()
-      this.#editor.focus()
+      this.editor.focus()
     })
 
     this.#update()
@@ -216,7 +251,7 @@ export class TableTools extends HTMLElement {
     if (!cellsToHighlight) return
 
     cellsToHighlight.forEach(cell => {
-      const cellElement = this.#editor.getElementByKey(cell.getKey())
+      const cellElement = this.editor.getElementByKey(cell.getKey())
       if (!cellElement) return
 
       cellElement.classList.toggle(theme.tableCellHighlight, true)
@@ -225,8 +260,8 @@ export class TableTools extends HTMLElement {
   }
 
   #monitorForTableSelection() {
-    this.#listeners.track(this.#editor.registerUpdateListener(() => {
-      const tableNode = this.#editor.getRootElement() && this.tableController.updateSelectedTable()
+    this.#listeners.track(this.editor.registerUpdateListener(() => {
+      const tableNode = this.editor.getRootElement() && this.tableController.updateSelectedTable()
 
       if (tableNode) {
         this.#show()
@@ -237,8 +272,12 @@ export class TableTools extends HTMLElement {
   }
 
   #executeTableCommand(command) {
+    const fromMoreMenu = this.#hasOpenMoreMenu
+
     this.tableController.executeTableCommand(command)
     this.#update()
+
+    if (fromMoreMenu) this.editor.focus()
   }
 
   #show() {
@@ -262,18 +301,18 @@ export class TableTools extends HTMLElement {
   }
 
   #closeMoreMenu() {
-    this.querySelector("details[open]")?.removeAttribute("open")
+    this.closeDropdowns()
   }
 
   #updateButtonsPosition() {
     const tableNode = this.tableController.currentTableNode
     if (!tableNode) return
 
-    const tableElement = this.#editor.getElementByKey(tableNode.getKey())
+    const tableElement = this.editor.getElementByKey(tableNode.getKey())
     if (!tableElement) return
 
     const tableRect = tableElement.getBoundingClientRect()
-    const editorRect = this.#editorElement.getBoundingClientRect()
+    const editorRect = this.editorElement.getBoundingClientRect()
 
     const relativeTop = tableRect.top - editorRect.top
     const relativeCenter = (tableRect.left + tableRect.right) / 2 - editorRect.left
@@ -285,7 +324,7 @@ export class TableTools extends HTMLElement {
     const tableNode = this.tableController.currentTableNode
     if (!tableNode) return
 
-    const tableElement = $getElementForTableNode(this.#editor, tableNode)
+    const tableElement = $getElementForTableNode(this.editor, tableNode)
     if (!tableElement) return
 
     const rowCount = tableElement.rows
@@ -299,18 +338,18 @@ export class TableTools extends HTMLElement {
     const cell = this.tableController.currentCell
     if (!cell) return
 
-    const cellElement = this.#editor.getElementByKey(cell.getKey())
+    const cellElement = this.editor.getElementByKey(cell.getKey())
     if (!cellElement) return
 
     cellElement.classList.add(theme.tableCellFocus)
   }
 
   #clearCellStyles() {
-    this.#editorElement.querySelectorAll(`.${theme.tableCellFocus}`)?.forEach(cell => {
+    this.editorElement.querySelectorAll(`.${theme.tableCellFocus}`)?.forEach(cell => {
       cell.classList.remove(theme.tableCellFocus)
     })
 
-    this.#editorElement.querySelectorAll(`.${theme.tableCellHighlight}`)?.forEach(cell => {
+    this.editorElement.querySelectorAll(`.${theme.tableCellHighlight}`)?.forEach(cell => {
       cell.classList.remove(theme.tableCellHighlight)
       cell.removeAttribute("data-action")
       cell.removeAttribute("data-child-type")
diff --git a/src/elements/toolbar.js b/src/elements/toolbar.js
index 8f3ca160b..959c869ea 100644
--- a/src/elements/toolbar.js
+++ b/src/elements/toolbar.js
@@ -8,7 +8,7 @@ import {
 } from "lexical"
 import { getNonce } from "../helpers/csp_helper"
 import { ListenerBin, registerEventListener } from "../helpers/listener_helper"
-import { handleRollingTabIndex } from "../helpers/accessibility_helper"
+import { handleRollingTabIndex, isKeyboardActivation } from "../helpers/accessibility_helper"
 import ToolbarIcons from "./toolbar_icons"
 import { generateDomId, isActiveAndVisible } from "../helpers/html_helper"
 
@@ -134,14 +134,21 @@ export class LexicalToolbarElement extends HTMLElement {
     }
   }
 
-  #dispatchButtonCommand(event, { dataset: { command, payload } }) {
-    const isKeyboard = event instanceof PointerEvent && event.pointerId === -1
+  #dispatchButtonCommand(event, button) {
+    if (button.ariaDisabled === "true") return
+
+    const { command, payload } = button.dataset
+    const shouldKeepToolbarFocus = isKeyboardActivation(event) && !this.#belongsToDropdown(button)
 
     this.editor.update(() => {
       this.editor.dispatchCommand(command, payload)
-    }, { tag: isKeyboard ? SKIP_DOM_SELECTION_TAG : undefined })
+    }, { tag: shouldKeepToolbarFocus ? SKIP_DOM_SELECTION_TAG : undefined })
+
+    if (!shouldKeepToolbarFocus) this.editor.focus()
+  }
 
-    if (!isKeyboard) this.editor.focus()
+  #belongsToDropdown(button) {
+    return button.closest("[data-dropdown-panel]") != null
   }
 
   #bindHotkeys() {
@@ -181,8 +188,8 @@ export class LexicalToolbarElement extends HTMLElement {
   }
 
   #handleEditorFocus = () => {
-    const firstVisible = this.#buttons.find(isActiveAndVisible)
-    if (firstVisible) firstVisible.tabIndex = 0
+    const firstVisibleButton = this.#toolbarButtons.find(isActiveAndVisible)
+    if (firstVisibleButton) firstVisibleButton.tabIndex = 0
   }
 
   #handleEditorBlur = () => {
@@ -190,11 +197,11 @@ export class LexicalToolbarElement extends HTMLElement {
   }
 
   #handleKeydown = (event) => {
-    handleRollingTabIndex(this.#buttons, event)
+    handleRollingTabIndex(this.#toolbarButtons, event)
   }
 
   #resetTabIndexValues() {
-    this.#buttons.forEach((button) => {
+    this.#toolbarButtons.forEach((button) => {
       button.tabIndex = -1
     })
   }
@@ -231,7 +238,7 @@ export class LexicalToolbarElement extends HTMLElement {
     this.#setButtonPressed("underline", isUnderline)
 
     this.#setButtonPressed("format", isInHeading)
-    this.#setButtonPressed("paragraph", !isInHeading)
+    this.#setButtonChecked("paragraph", !isInHeading)
 
     this.querySelector("lexxy-heading-dropdown")
       ?.updateActiveHeading(headingTag)
@@ -250,25 +257,17 @@ export class LexicalToolbarElement extends HTMLElement {
 
   #setButtonPressed(name, isPressed) {
     const button = this.querySelector(`[name="${name}"]`)
-    if (button) {
-      const next = isPressed.toString()
-      if (button.getAttribute("aria-pressed") !== next) {
-        button.setAttribute("aria-pressed", next)
-      }
-    }
+    if (button) button.ariaPressed = isPressed
+  }
+
+  #setButtonChecked(name, isChecked) {
+    const button = this.querySelector(`[name="${name}"]`)
+    if (button) button.ariaChecked = isChecked
   }
 
   #setButtonDisabled(name, isDisabled) {
     const button = this.querySelector(`[name="${name}"]`)
-    if (button) {
-      if (button.disabled !== isDisabled) {
-        button.disabled = isDisabled
-      }
-      const next = isDisabled.toString()
-      if (button.getAttribute("aria-disabled") !== next) {
-        button.setAttribute("aria-disabled", next)
-      }
-    }
+    if (button) button.ariaDisabled = isDisabled
   }
 
   #refreshOverflow() {
@@ -369,8 +368,10 @@ export class LexicalToolbarElement extends HTMLElement {
     return Array.from(this.querySelectorAll(":scope > button:not([data-prevent-overflow])"))
   }
 
-  get #buttons() {
-    return Array.from(this.querySelectorAll(":scope button"))
+  get #toolbarButtons() {
+    return Array.from(this.querySelectorAll(":scope button")).filter((button) => {
+      return !button.closest("[data-dropdown-panel]")
+    })
   }
 
   get #toolbarItems() {
@@ -409,8 +410,8 @@ export class LexicalToolbarElement extends HTMLElement {
         <button data-dropdown-trigger class="lexxy-editor__toolbar-button lexxy-editor__toolbar-button--chevron" type="button" name="format" title="Text formatting" aria-haspopup="menu" aria-expanded="false">
           ${ToolbarIcons.heading}
         </button>
-        <div data-dropdown-panel role="menu" class="lexxy-editor__toolbar-dropdown-list" hidden>
-          <button type="button" name="paragraph" data-command="setFormatParagraph" title="Paragraph" role="menuitem">
+        <div data-dropdown-panel role="menu" aria-label="Text formatting" class="lexxy-editor__toolbar-dropdown-list" hidden>
+          <button type="button" name="paragraph" data-command="setFormatParagraph" title="Paragraph" role="menuitemradio">
             ${ToolbarIcons.paragraph} <span>Normal</span>
           </button>
           <lexxy-heading-dropdown>
@@ -427,7 +428,7 @@ export class LexicalToolbarElement extends HTMLElement {
         <button data-dropdown-trigger class="lexxy-editor__toolbar-button lexxy-editor__toolbar-button--chevron" type="button" name="highlight" title="Color highlight" aria-haspopup="menu" aria-expanded="false">
           ${ToolbarIcons.highlight}
         </button>
-        <div data-dropdown-panel role="menu" hidden>
+        <div data-dropdown-panel role="menu" aria-label="Color highlight" hidden>
           <div class="lexxy-highlight-colors"></div>
           <button data-command="removeHighlight" type="button" class="lexxy-editor__toolbar-button lexxy-editor__toolbar-dropdown-reset" role="menuitem">Remove all coloring</button>
         </div>
@@ -469,19 +470,19 @@ export class LexicalToolbarElement extends HTMLElement {
         ${ToolbarIcons.hr}
       </button>
 
-      <button class="lexxy-editor__toolbar-button lexxy-editor__toolbar-button--push-right" type="button" name="undo" data-command="undo" title="Undo" disabled aria-disabled="true">
+      <button class="lexxy-editor__toolbar-button lexxy-editor__toolbar-button--push-right" type="button" name="undo" data-command="undo" title="Undo" aria-disabled="true">
         ${ToolbarIcons.undo}
       </button>
 
-      <button class="lexxy-editor__toolbar-button" type="button" name="redo" data-command="redo" title="Redo" disabled aria-disabled="true">
+      <button class="lexxy-editor__toolbar-button" type="button" name="redo" data-command="redo" title="Redo" aria-disabled="true">
         ${ToolbarIcons.redo}
       </button>
 
       <lexxy-toolbar-dropdown class="lexxy-editor__toolbar-dropdown lexxy-editor__toolbar-button--push-right lexxy-editor__toolbar-overflow">
-        <button data-dropdown-trigger class="lexxy-editor__toolbar-button" type="button" aria-haspopup="menu" aria-expanded="false" aria-label="Show more toolbar buttons">
+        <button data-dropdown-trigger class="lexxy-editor__toolbar-button" type="button" title="More options" aria-haspopup="menu" aria-expanded="false">
           ${ToolbarIcons.overflow}
         </button>
-        <div data-dropdown-panel role="menu" class="lexxy-editor__toolbar-overflow-menu" aria-label="More toolbar buttons" hidden></div>
+        <div data-dropdown-panel role="menu" class="lexxy-editor__toolbar-overflow-menu" aria-label="More options" hidden></div>
       </lexxy-toolbar-dropdown>
     `
   }
diff --git a/src/elements/toolbar_dropdown.js b/src/elements/toolbar_dropdown.js
index 0855b7ebf..88629264a 100644
--- a/src/elements/toolbar_dropdown.js
+++ b/src/elements/toolbar_dropdown.js
@@ -1,11 +1,13 @@
 import { nextFrame } from "../helpers/timing_helper"
 import { ListenerBin, registerEventListener } from "../helpers/listener_helper"
+import { handleRollingTabIndex, isKeyboardActivation } from "../helpers/accessibility_helper"
 
 export class ToolbarDropdown extends HTMLElement {
   #listeners = new ListenerBin()
+  #shouldReturnFocusToTrigger = false
 
   connectedCallback() {
-    this.#onToolbarEditor(() => {
+    this.#onHostEditor(() => {
       this.#registerListeners()
       this.editorReady()
     })
@@ -27,16 +29,16 @@ export class ToolbarDropdown extends HTMLElement {
     return this.querySelector(":scope > [data-dropdown-panel]")
   }
 
-  get toolbar() {
-    return this.closest("lexxy-toolbar")
+  get host() {
+    return this.closest("lexxy-toolbar, lexxy-table-tools")
   }
 
   get editorElement() {
-    return this.toolbar?.editorElement
+    return this.host?.editorElement
   }
 
   get editor() {
-    return this.toolbar?.editor
+    return this.host?.editor
   }
 
   get isOpen() {
@@ -53,7 +55,7 @@ export class ToolbarDropdown extends HTMLElement {
 
   open() {
     if (this.isOpen) return
-    this.trigger.setAttribute("aria-expanded", "true")
+    this.trigger.ariaExpanded = true
     this.panel.hidden = false
     this.onOpen()
     this.#focusFirstInteractive()
@@ -63,7 +65,7 @@ export class ToolbarDropdown extends HTMLElement {
     if (focusEditor) this.editor?.focus()
 
     if (this.isClosed) return
-    this.trigger.setAttribute("aria-expanded", "false")
+    this.trigger.ariaExpanded = false
     this.panel.hidden = true
     this.onClose()
   }
@@ -75,31 +77,46 @@ export class ToolbarDropdown extends HTMLElement {
     )
   }
 
-  #handleTriggerClick = () => {
+  #handleTriggerClick = (event) => {
     if (this.isOpen) {
       this.close({ focusEditor: false })
     } else {
-      this.toolbar?.closeDropdowns({ except: this })
+      this.#shouldReturnFocusToTrigger = this.#isOpenedFromHost(event)
+      this.host?.closeDropdowns({ except: this })
       this.open()
     }
   }
 
-  async #onToolbarEditor(callback) {
-    if (!this.toolbar) return
+  #isOpenedFromHost(event) {
+    return isKeyboardActivation(event) && this.host?.contains(document.activeElement)
+  }
+
+  async #onHostEditor(callback) {
+    if (!this.host) return
 
-    await this.toolbar.getEditorElement()
-    if (this.isConnected && this.toolbar) callback()
+    await this.host.getEditorElement()
+    if (this.isConnected && this.host) callback()
   }
 
   #handleKeyDown = (event) => {
     if (event.key === "Escape") {
       event.stopPropagation()
-      this.close()
+      this.close({ focusEditor: !this.#shouldReturnFocusToTrigger })
+      if (this.#shouldReturnFocusToTrigger) this.trigger?.focus()
+    } else if (this.#isNavigatingMenu(event)) {
+      event.stopPropagation()
+      handleRollingTabIndex(this.#buttons, event, { orientation: "both", wrap: true })
     }
   }
 
+  #isNavigatingMenu(event) {
+    return this.panel.role === "menu" && this.panel.contains(event.target)
+  }
+
   async #focusFirstInteractive() {
-    this.#interactiveElements[0]?.focus()
+    // Ask for the ring explicitly: opening the menu with the mouse otherwise leaves the
+    // first item focused without a focus ring, since focus() inherits the mouse modality.
+    this.#interactiveElements[0]?.focus({ focusVisible: true })
     await this.#resetTabIndexValues()
   }
 
diff --git a/src/elements/toolbar_icons.js b/src/elements/toolbar_icons.js
index bfcd7221f..6b7309cee 100644
--- a/src/elements/toolbar_icons.js
+++ b/src/elements/toolbar_icons.js
@@ -1,28 +1,28 @@
 export default {
   "bold":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M9.05273 1.88232C10.6866 1.88237 12.0033 2.20353 12.9529 2.89673L13.1272 3.0293C13.974 3.70864 14.4008 4.63245 14.4009 5.76562C14.4008 6.49354 14.2316 7.15281 13.8845 7.73145C13.6683 8.09188 13.3997 8.40162 13.0818 8.66016C13.5902 8.92606 14.0196 9.28599 14.3635 9.74121C14.8586 10.3834 15.0945 11.1743 15.0945 12.0879C15.0944 13.3698 14.5922 14.3931 13.5879 15.1106L13.5857 15.1128C12.5967 15.805 11.196 16.125 9.43799 16.125H3.10547V1.88232L9.05273 1.88232ZM6.36108 13.4084H9.28418C10.224 13.4084 10.8634 13.2491 11.2581 12.9851C11.6259 12.7389 11.8198 12.3768 11.8198 11.8367C11.8197 11.2968 11.6259 10.9351 11.2581 10.689C10.8634 10.425 10.2241 10.2649 9.28418 10.2649H6.36108V13.4084ZM6.36108 7.56812H8.78247C9.5163 7.56809 10.0547 7.45371 10.429 7.25757L10.5791 7.16895C10.9438 6.92178 11.1255 6.57934 11.1255 6.09302C11.1254 5.59017 10.9414 5.25227 10.5835 5.02002L10.5784 5.01636L10.5732 5.01343C10.1994 4.75387 9.61878 4.59818 8.78247 4.59814H6.36108V7.56812Z"/>
   </svg>`,
 
   "italic":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M14.1379 3.91187L14.1086 4.06421H11.4668L9.49805 13.9431H12.0981L11.7473 15.7852L11.7188 15.9375H4.16675L4.51758 14.0955L4.54614 13.9431H7.18799L9.17505 4.06421H6.55664L6.90747 2.22217L6.93677 2.06982H14.4888L14.1379 3.91187Z"/>
   </svg>`,
 
   "strikethrough":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M14.3723 11.8015C14.3771 11.8858 14.3811 11.9756 14.3811 12.0681C14.3811 12.811 14.1777 13.4959 13.7725 14.1174L13.7717 14.1189C13.3624 14.7329 12.7463 15.2162 11.9377 15.5742L11.9348 15.5757C11.1214 15.9223 10.1306 16.092 8.96997 16.092C7.9356 16.092 6.93308 15.9348 5.96338 15.6204L5.96045 15.6189C5.00593 15.292 4.24112 14.8699 3.67676 14.3459L3.57568 14.2522L3.63501 14.1277L4.45605 12.397L4.64282 12.5654C5.13492 13.0083 5.76733 13.3759 6.54492 13.6648C7.33475 13.9406 8.14322 14.0786 8.96997 14.0786C10.0731 14.0786 10.8638 13.8932 11.3708 13.5513C11.8757 13.1982 12.1172 12.7464 12.1172 12.1838C12.1172 12.0662 12.1049 11.9556 12.0828 11.8513L12.0344 11.625H14.3621L14.3723 11.8015Z"/>
     <path d="M9.2981 1.91602C10.111 1.91604 10.9109 2.02122 11.6975 2.23096C12.4855 2.44111 13.1683 2.74431 13.7417 3.14429L13.8655 3.23071L13.8083 3.36987L13.1726 4.91235L13.0869 5.1189L12.8987 4.99878C12.3487 4.64881 11.761 4.38633 11.1365 4.21143L11.1328 4.20996C10.585 4.04564 10.0484 3.95419 9.52295 3.93384L9.2981 3.92944C8.22329 3.92944 7.44693 4.12611 6.94043 4.49121C6.44619 4.85665 6.20874 5.31616 6.20874 5.88135L6.21533 6.03296C6.24495 6.37662 6.37751 6.65526 6.61011 6.87964L6.72144 6.97632C6.98746 7.19529 7.30625 7.37584 7.68018 7.51538L8.05151 7.63184C8.45325 7.75061 8.94669 7.87679 9.53247 8.01123L9.53467 8.01196C10.1213 8.15305 10.6426 8.29569 11.0991 8.4375H15C15.5178 8.4375 15.9375 8.85723 15.9375 9.375C15.9375 9.89277 15.5178 10.3125 15 10.3125H3C2.48223 10.3125 2.0625 9.89277 2.0625 9.375C2.0625 8.85723 2.48223 8.4375 3 8.4375H4.93726C4.83783 8.34526 4.74036 8.24896 4.64795 8.146L4.64502 8.14233C4.1721 7.58596 3.94482 6.85113 3.94482 5.95825C3.94483 5.20441 4.14059 4.51965 4.53369 3.90967L4.53516 3.90747C4.94397 3.29427 5.55262 2.81114 6.34863 2.45288C7.15081 2.0919 8.13683 1.91602 9.2981 1.91602Z"/>
   </svg>`,
 
   "underline":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M14 14C14.5523 14 15 14.4477 15 15C15 15.5523 14.5523 16 14 16H4C3.44772 16 3 15.5523 3 15C3 14.4477 3.44772 14 4 14H14Z"/>
     <path d="M12.625 1.59375C13.25 1.59375 13.625 1.97656 13.625 2.64062V9.02344C13.625 11.4844 11.8516 13.1875 8.99219 13.1875C6.14062 13.1875 4.35938 11.4844 4.35938 9.02344V2.64062C4.35938 1.97656 4.74219 1.59375 5.36719 1.59375C6 1.59375 6.375 1.97656 6.375 2.64062V8.84375C6.375 10.3828 7.32031 11.4297 8.99219 11.4297C10.6641 11.4297 11.6172 10.3828 11.6172 8.84375V2.64062C11.6172 1.97656 11.9922 1.59375 12.625 1.59375Z"/>
   </svg>`,
 
   "heading":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M11.5 2C12.0523 2 12.5 2.44772 12.5 3V3.5C12.5 4.05228 12.0523 4.5 11.5 4.5H8V15C8 15.5523 7.55228 16 7 16H6.5C5.94772 16 5.5 15.5523 5.5 15V4.5H2C1.44772 4.5 1 4.05228 1 3.5V3C1 2.44772 1.44772 2 2 2H11.5ZM16 7C16.5523 7 17 7.44772 17 8V8.5C17 9.05228 16.5523 9.5 16 9.5H15V15C15 15.5523 14.5523 16 14 16H13.5C12.9477 16 12.5 15.5523 12.5 15V9.5H11.5C10.9477 9.5 10.5 9.05228 10.5 8.5V8C10.5 7.44772 10.9477 7 11.5 7H16Z"/>
   </svg>`,
 
@@ -32,17 +32,17 @@ export default {
   </svg>`,
 
   "h2":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M8.12207 4.30078C8.84668 4.30078 9.25684 4.74512 9.25684 5.51758V12.5518C9.25677 13.3241 8.84662 13.7686 8.12207 13.7686C7.39752 13.7686 6.9942 13.3309 6.99414 12.5518V9.87207H3.56934V12.5518C3.56927 13.3241 3.15912 13.7686 2.43457 13.7686C1.71002 13.7686 1.3067 13.3309 1.30664 12.5518V5.51758C1.30664 4.73828 1.70996 4.30078 2.43457 4.30078C3.15918 4.30078 3.56934 4.74512 3.56934 5.51758V8.07422H6.99414V5.51758C6.99414 4.73828 7.39746 4.30078 8.12207 4.30078ZM13.6445 4.19824C15.5244 4.19824 16.8984 5.34668 16.8984 6.91211C16.8984 7.8759 16.4335 8.7237 15.292 9.84473L13.3438 11.8135V11.9092H16.1875C16.8232 11.9092 17.2197 12.251 17.2197 12.8115C17.2196 13.3651 16.83 13.7002 16.1875 13.7002H11.5117C10.8487 13.7002 10.4112 13.3241 10.4111 12.75C10.4111 12.3399 10.6368 11.9843 11.3203 11.3145L13.6855 8.88086C14.4169 8.13583 14.7245 7.64349 14.7246 7.12402C14.7246 6.4541 14.2393 6.00293 13.5215 6.00293C12.9404 6.00293 12.5166 6.29688 12.2158 6.90527C11.9151 7.37002 11.6552 7.54785 11.2588 7.54785C10.7188 7.54785 10.3429 7.17861 10.3428 6.65918C10.3428 5.3877 11.7783 4.19824 13.6445 4.19824Z"/>
   </svg>`,
 
   "h3":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M13.5967 4.19824C15.5928 4.19824 16.9873 5.23047 16.9873 6.7002C16.9872 7.705 16.2421 8.60059 15.2988 8.7168V8.86719C16.4199 8.94923 17.2607 9.89942 17.2607 11.0889C17.2606 12.7362 15.7362 13.9053 13.583 13.9053C11.6827 13.9053 10.1925 12.873 10.1924 11.7041C10.1924 11.1846 10.5547 10.8154 11.0537 10.8154C11.3818 10.8154 11.6553 10.9727 11.9629 11.3555C12.3799 11.9159 12.92 12.2031 13.583 12.2031C14.4853 12.2031 15.0731 11.7313 15.0732 11C15.0732 10.2754 14.4785 9.7832 13.5898 9.7832H13.0361C12.5645 9.7832 12.2159 9.4208 12.2158 8.92188C12.2158 8.44336 12.5576 8.07422 13.0361 8.07422H13.5693C14.3075 8.07422 14.8544 7.60928 14.8545 6.97363C14.8545 6.33789 14.3213 5.90039 13.5557 5.90039C12.9678 5.90039 12.5029 6.16016 12.0859 6.71387C11.8399 7.03508 11.5527 7.17871 11.1973 7.17871C10.671 7.17871 10.295 6.82314 10.2949 6.31738C10.2949 5.18945 11.751 4.19824 13.5967 4.19824ZM8.0332 4.30078C8.75781 4.30078 9.16797 4.74512 9.16797 5.51758V12.5518C9.1679 13.3241 8.75776 13.7686 8.0332 13.7686C7.30865 13.7686 6.90534 13.3309 6.90527 12.5518V9.87207H3.48047V12.5518C3.4804 13.3241 3.07026 13.7686 2.3457 13.7686C1.62115 13.7686 1.21784 13.3309 1.21777 12.5518V5.51758C1.21777 4.73828 1.62109 4.30078 2.3457 4.30078C3.07031 4.30078 3.48047 4.74512 3.48047 5.51758V8.07422H6.90527V5.51758C6.90527 4.73828 7.30859 4.30078 8.0332 4.30078Z"/>
   </svg>`,
 
   "h4":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M14.6357 4.22559C15.7432 4.22559 16.4336 4.80664 16.4336 5.73633V10.3164H16.7275C17.2881 10.3164 17.6436 10.6787 17.6436 11.2256C17.6435 11.7655 17.3017 12.1006 16.7275 12.1006H16.4336V12.6611C16.4335 13.3515 16.0234 13.7891 15.374 13.7891C14.7247 13.7891 14.3282 13.3583 14.3281 12.6611V12.1006H11.04C10.2335 12.1006 9.76863 11.6766 9.76855 10.918C9.76855 10.5762 9.85064 10.3026 10.1104 9.74219C10.7666 8.42289 11.5733 7.0146 12.5713 5.54492C13.2549 4.56738 13.7812 4.22559 14.6357 4.22559ZM7.88965 4.30078C8.61426 4.30078 9.02441 4.74512 9.02441 5.51758V12.5518C9.02435 13.3241 8.6142 13.7686 7.88965 13.7686C7.1651 13.7686 6.76178 13.3309 6.76172 12.5518V9.87207H3.33691V12.5518C3.33685 13.3241 2.9267 13.7686 2.20215 13.7686C1.4776 13.7686 1.07428 13.3309 1.07422 12.5518V5.51758C1.07422 4.73828 1.47754 4.30078 2.20215 4.30078C2.92676 4.30078 3.33691 4.74512 3.33691 5.51758V8.07422H6.76172V5.51758C6.76172 4.73828 7.16504 4.30078 7.88965 4.30078ZM14.2188 6.07812C13.6035 7.02841 12.2158 9.48929 11.7988 10.2686V10.3164H14.3281V6.07812H14.2188Z"/>
   </svg>`,
 
@@ -57,44 +57,44 @@ export default {
   </svg>`,
 
   "paragraph":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M9 12C9.55228 12 10 12.4477 10 13C10 13.5523 9.55228 14 9 14H3C2.44772 14 2 13.5523 2 13C2 12.4477 2.44772 12 3 12H9ZM15 8C15.5523 8 16 8.44772 16 9C16 9.55228 15.5523 10 15 10H3C2.44772 10 2 9.55228 2 9C2 8.44772 2.44772 8 3 8H15ZM15 4C15.5523 4 16 4.44772 16 5C16 5.55228 15.5523 6 15 6H3C2.44772 6 2 5.55228 2 5C2 4.44772 2.44772 4 3 4H15Z"/>
   </svg>`,
 
   "clearFormatting":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M10.0607 2.07533C10.8417 1.29432 12.1078 1.2943 12.8888 2.07533L16.424 5.61049C17.205 6.39154 17.205 7.65854 16.424 8.43959L9.44937 15.4142C9.07435 15.7891 8.5656 16.0001 8.03531 16.0001H5.0148C4.55074 16.0001 4.10309 15.8385 3.74722 15.547L3.60074 15.4142L1.57534 13.3888C0.79431 12.6078 0.794336 11.3417 1.57534 10.5607L10.0607 2.07533ZM2.98941 11.9747L5.0148 14.0001H8.03531L9.71792 12.3165L6.18179 8.78139L2.98941 11.9747Z"/>
   </svg>`,
 
   "highlight":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M16.4564 14.4272C17.1356 15.5592 16.3204 17.0002 15.0003 17.0004C13.68 17.0004 12.864 15.5593 13.5433 14.4272L15.0003 12.0004L16.4564 14.4272ZM5.1214 1.70746C5.51192 1.31693 6.14494 1.31693 6.53546 1.70746L9.7171 4.8891L13.2532 8.42426C14.2295 9.40056 14.2295 10.9841 13.2532 11.9604L9.7171 15.4955C8.74078 16.4718 7.15822 16.4718 6.18195 15.4955L2.64679 11.9604C1.67048 10.9841 1.67048 9.40057 2.64679 8.42426L6.18195 4.8891C6.30299 4.76805 6.43323 4.66177 6.57062 4.57074L5.1214 3.12152C4.73091 2.73104 4.73099 2.09799 5.1214 1.70746ZM8.30304 6.30316C8.10776 6.10815 7.79119 6.10799 7.59601 6.30316L4.06085 9.83929L3.9964 9.91742C3.88661 10.0838 3.88645 10.3019 3.9964 10.4682L4.02277 10.5004H11.8763C12.0312 10.3043 12.02 10.0205 11.8392 9.83929L8.30304 6.30316Z"/>
   </svg>`,
 
   "link":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M12.8885 7.23091L13.9479 6.17155C14.5337 5.58576 14.5337 4.63602 13.9479 4.05023C13.3621 3.46444 12.4124 3.46444 11.8266 4.05023L8.29235 7.58446C7.9263 7.95051 7.90312 8.52994 8.2233 8.92271L8.36141 9.07463C8.68158 9.4674 8.65841 10.0468 8.29235 10.4129C7.90183 10.8034 7.26866 10.8034 6.87814 10.4129C5.70657 9.24131 5.70657 7.34182 6.87814 6.17025L10.4124 2.63602C11.7792 1.26918 13.9953 1.26918 15.3621 2.63602C16.729 4.00285 16.729 6.21893 15.3621 7.58576L14.3028 8.64512C13.9122 9.03564 13.2791 9.03564 12.8885 8.64512C12.498 8.2546 12.498 7.62143 12.8885 7.23091Z"/>
     <path d="M5.11038 10.7664L4.04843 11.8284C3.46264 12.4142 3.46264 13.3639 4.04842 13.9497C4.63421 14.5355 5.58396 14.5355 6.16975 13.9497L9.70657 10.4129C10.0726 10.0468 10.0958 9.46741 9.77563 9.07464L9.63752 8.92272C9.31734 8.52995 9.34052 7.95052 9.70657 7.58446C10.0971 7.19394 10.7303 7.19394 11.1208 7.58446C12.2924 8.75604 12.2924 10.6555 11.1208 11.8271L7.58396 15.3639C6.21712 16.7308 4.00105 16.7308 2.63421 15.3639C1.26738 13.9971 1.26738 11.781 2.63421 10.4142L3.69617 9.35223C4.08669 8.96171 4.71986 8.96171 5.11038 9.35223C5.5009 9.74275 5.5009 10.3759 5.11038 10.7664Z"/>
   </svg>`,
 
   "quote":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M4.96387 4.23438C6.8769 4.23438 8.42767 5.78522 8.42773 7.69824C8.42773 8.32925 8.25769 8.92015 7.96289 9.42969L7.96387 9.43066L5.11816 14.3584C4.77659 14.95 4.02038 15.153 3.42871 14.8115C2.83701 14.4699 2.63397 13.7128 2.97559 13.1211L4.16113 11.0674C2.63532 10.7052 1.5 9.33485 1.5 7.69824C1.50006 5.78524 3.05086 4.2344 4.96387 4.23438ZM13.0361 4.23438C14.9491 4.23449 16.4999 5.7853 16.5 7.69824C16.5 8.32921 16.3299 8.92017 16.0352 9.42969L16.0361 9.43066L13.1904 14.3584C12.8488 14.9501 12.0917 15.1531 11.5 14.8115C10.9085 14.4698 10.7063 13.7127 11.0479 13.1211L12.2324 11.0674C10.7069 10.7049 9.57227 9.33461 9.57227 7.69824C9.57233 5.78522 11.1231 4.23438 13.0361 4.23438Z"/>
   </svg>`,
 
   "code":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M6.29289 3.79295C6.68342 3.40243 7.31643 3.40243 7.70696 3.79295C8.09748 4.18348 8.09748 4.81649 7.70696 5.20702L3.91399 8.99999L7.70696 12.793C8.09748 13.1835 8.09748 13.8165 7.70696 14.207C7.31643 14.5975 6.68342 14.5975 6.29289 14.207L1.79289 9.70702C1.40237 9.31649 1.40237 8.68348 1.79289 8.29295L6.29289 3.79295Z"/>
     <path d="M11.707 3.79295C11.3164 3.40243 10.6834 3.40243 10.2929 3.79295C9.90237 4.18348 9.90237 4.81649 10.2929 5.20702L14.0859 8.99999L10.2929 12.793C9.90237 13.1835 9.90237 13.8165 10.2929 14.207C10.6834 14.5975 11.3164 14.5975 11.707 14.207L16.207 9.70702C16.5975 9.31649 16.5975 8.68348 16.207 8.29295L11.707 3.79295Z"/>
   </svg>`,
 
   "ul":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M3 12.5C3.82843 12.5 4.5 13.1716 4.5 14C4.5 14.8284 3.82843 15.5 3 15.5C2.17157 15.5 1.5 14.8284 1.5 14C1.5 13.1716 2.17157 12.5 3 12.5ZM15.5 13C16.0523 13 16.5 13.4477 16.5 14C16.5 14.5523 16.0523 15 15.5 15H7C6.44772 15 6 14.5523 6 14C6 13.4477 6.44772 13 7 13H15.5ZM3 7.5C3.82843 7.5 4.5 8.17157 4.5 9C4.5 9.82843 3.82843 10.5 3 10.5C2.17157 10.5 1.5 9.82843 1.5 9C1.5 8.17157 2.17157 7.5 3 7.5ZM15.5 8C16.0523 8 16.5 8.44772 16.5 9C16.5 9.55228 16.0523 10 15.5 10H7C6.44772 10 6 9.55228 6 9C6 8.44772 6.44772 8 7 8H15.5ZM3 2.5C3.82843 2.5 4.5 3.17157 4.5 4C4.5 4.82843 3.82843 5.5 3 5.5C2.17157 5.5 1.5 4.82843 1.5 4C1.5 3.17157 2.17157 2.5 3 2.5ZM15.5 3C16.0523 3 16.5 3.44772 16.5 4C16.5 4.55228 16.0523 5 15.5 5H7C6.44772 5 6 4.55228 6 4C6 3.44772 6.44772 3 7 3H15.5Z"/>
   </svg>`,
 
   "ol":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M15.5 13C16.0523 13 16.5 13.4477 16.5 14C16.5 14.5523 16.0523 15 15.5 15H7C6.44772 15 6 14.5523 6 14C6 13.4477 6.44772 13 7 13H15.5ZM15.5 8C16.0523 8 16.5 8.44772 16.5 9C16.5 9.55228 16.0523 10 15.5 10H7C6.44772 10 6 9.55228 6 9C6 8.44772 6.44772 8 7 8H15.5ZM15.5 3C16.0523 3 16.5 3.44772 16.5 4C16.5 4.55228 16.0523 5 15.5 5H7C6.44772 5 6 4.55228 6 4C6 3.44772 6.44772 3 7 3H15.5Z"/>
     <path d="M2.98657 16.0967C2.68042 16.0967 2.41187 16.0465 2.18091 15.9463C1.95174 15.846 1.77002 15.7046 1.63574 15.522C1.50146 15.3376 1.42448 15.1227 1.40479 14.8774L1.4021 14.8452H2.34204L2.34741 14.8748C2.35815 14.9589 2.39038 15.035 2.44409 15.103C2.49959 15.1711 2.5721 15.2248 2.66162 15.2642C2.75293 15.3035 2.86035 15.3232 2.98389 15.3232C3.10563 15.3232 3.21037 15.3027 3.2981 15.2615C3.38761 15.2185 3.45654 15.1603 3.50488 15.0869C3.55322 15.0135 3.57739 14.9294 3.57739 14.8345V14.8291C3.57739 14.6715 3.51921 14.5516 3.40283 14.4692C3.28646 14.3869 3.12085 14.3457 2.90601 14.3457H2.48706V13.677H2.90063C3.02775 13.677 3.13607 13.6582 3.22559 13.6206C3.31689 13.583 3.38672 13.5302 3.43506 13.4622C3.48519 13.3941 3.51025 13.3153 3.51025 13.2258V13.2205C3.51025 13.1256 3.48877 13.0441 3.4458 12.9761C3.40462 12.9062 3.34375 12.8534 3.26318 12.8176C3.18441 12.78 3.08952 12.7612 2.97852 12.7612C2.86572 12.7612 2.76636 12.7809 2.68042 12.8203C2.59627 12.8579 2.52913 12.9125 2.479 12.9841C2.43066 13.054 2.40112 13.1363 2.39038 13.2312L2.3877 13.2581H1.49341L1.49609 13.2205C1.514 12.977 1.58561 12.7666 1.71094 12.5894C1.83805 12.4103 2.00903 12.2725 2.22388 12.1758C2.44051 12.0773 2.69206 12.0281 2.97852 12.0281C3.27393 12.0281 3.52995 12.0728 3.74658 12.1624C3.96322 12.2501 4.13062 12.3727 4.24878 12.5303C4.36694 12.6878 4.42603 12.8722 4.42603 13.0835V13.0889C4.42603 13.2518 4.38932 13.3941 4.31592 13.5159C4.2443 13.6358 4.14762 13.7343 4.02588 13.8113C3.90592 13.8883 3.77254 13.942 3.62573 13.9724V13.9912C3.91756 14.0199 4.14941 14.1121 4.32129 14.2678C4.49316 14.4236 4.5791 14.6295 4.5791 14.8855V14.8909C4.5791 15.1344 4.51375 15.3474 4.38306 15.53C4.25236 15.7109 4.06795 15.8505 3.82983 15.949C3.59172 16.0474 3.31063 16.0967 2.98657 16.0967Z"/>
     <path d="M1.54443 11V10.342L2.76099 9.20874C2.95076 9.03507 3.09757 8.89274 3.20142 8.78174C3.30705 8.66895 3.37956 8.57316 3.41895 8.49438C3.46012 8.41382 3.48071 8.33415 3.48071 8.25537V8.24463C3.48071 8.14795 3.46012 8.0638 3.41895 7.99219C3.37777 7.92057 3.31779 7.86507 3.23901 7.82568C3.16024 7.7863 3.06714 7.7666 2.95972 7.7666C2.84692 7.7666 2.74756 7.78988 2.66162 7.83643C2.57747 7.88298 2.51123 7.94743 2.46289 8.02979C2.41455 8.11035 2.39038 8.20345 2.39038 8.30908V8.33057L1.48804 8.32788V8.31177C1.48804 8.05396 1.5507 7.82837 1.67603 7.63501C1.80314 7.44165 1.97949 7.29126 2.20508 7.18384C2.43245 7.07463 2.69653 7.02002 2.99731 7.02002C3.28556 7.02002 3.53711 7.06836 3.75195 7.16504C3.96859 7.25993 4.13688 7.39331 4.25684 7.56519C4.37858 7.73706 4.43945 7.93758 4.43945 8.16675V8.18018C4.43945 8.3252 4.40902 8.46932 4.34814 8.61255C4.28727 8.75578 4.18701 8.90885 4.04736 9.07178C3.90771 9.23291 3.71883 9.41642 3.48071 9.62231L2.58374 10.4092L2.85498 9.98486V10.4092L2.58374 10.2319H4.49048V11H1.54443Z"/>
@@ -102,37 +102,37 @@ export default {
   </svg>`,
 
   "image":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M14 2C15.6569 2 17 3.34315 17 5V13C17 14.6569 15.6569 16 14 16H4C2.34315 16 1 14.6569 1 13V5C1 3.34315 2.34315 2 4 2H14ZM3.06348 13.3496C3.2053 13.7294 3.57078 14 4 14H13.5859L11 11.4141L9.70703 12.707C9.31651 13.0976 8.68349 13.0976 8.29297 12.707C7.90244 12.3165 7.90244 11.6835 8.29297 11.293L8.58594 11L7 9.41406L3.06348 13.3496ZM4 4C3.44772 4 3 4.44772 3 5V10.5859L6.29297 7.29297L6.36914 7.22461C6.76191 6.90427 7.34092 6.92686 7.70703 7.29297L10 9.58594L10.293 9.29297L10.3691 9.22461C10.7619 8.90427 11.3409 8.92686 11.707 9.29297L15 12.5859V5C15 4.44772 14.5523 4 14 4H4ZM12.5 5C13.3284 5 14 5.67157 14 6.5C14 7.32843 13.3284 8 12.5 8C11.6716 8 11 7.32843 11 6.5C11 5.67157 11.6716 5 12.5 5Z"/>
   </svg>`,
 
   "attachment":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M13 13.5V6C13 4.067 11.433 2.5 9.5 2.5C7.567 2.5 6 4.067 6 6V13.5C6 14.6046 6.89543 15.5 8 15.5H8.23047C9.20759 15.5 10 14.7076 10 13.7305V7C10 6.72386 9.77614 6.5 9.5 6.5C9.22386 6.5 9 6.72386 9 7V12.5C9 13.0523 8.55228 13.5 8 13.5C7.44772 13.5 7 13.0523 7 12.5V7C7 5.61929 8.11929 4.5 9.5 4.5C10.8807 4.5 12 5.61929 12 7V13.7305C12 15.8122 10.3122 17.5 8.23047 17.5H8C5.79086 17.5 4 15.7091 4 13.5V6C4 2.96243 6.46243 0.5 9.5 0.5C12.5376 0.5 15 2.96243 15 6V13.5C15 14.0523 14.5523 14.5 14 14.5C13.4477 14.5 13 14.0523 13 13.5Z"/>
   </svg>`,
 
   "table":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M15 1C16.1046 1 17 1.89543 17 3V15C17 16.1046 16.1046 17 15 17H3C1.89543 17 1 16.1046 1 15V3C1 1.89543 1.89543 1 3 1H15ZM3 15H8V10H3V15ZM10 10V15H15V10H10ZM10 8H15V3H10V8ZM3 8H8V3H3V8Z"/>
   </svg>`,
 
   "hr":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M12.75 12C13.1642 12 13.5 12.3358 13.5 12.75V14.25C13.5 14.6642 13.1642 15 12.75 15H5.25C4.83579 15 4.5 14.6642 4.5 14.25V12.75C4.5 12.3358 4.83579 12 5.25 12H12.75ZM15.4863 8C16.0461 8 16.5 8.44771 16.5 9C16.5 9.55229 16.0461 10 15.4863 10H2.51367C1.95392 10 1.5 9.55229 1.5 9C1.5 8.44771 1.95392 8 2.51367 8H15.4863ZM12.75 3C13.1642 3 13.5 3.33579 13.5 3.75V5.25C13.5 5.66421 13.1642 6 12.75 6H5.25C4.83579 6 4.5 5.66421 4.5 5.25V3.75C4.5 3.33579 4.83579 3 5.25 3H12.75Z"/>
   </svg>`,
 
   "undo":
-  `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M8.36612 5.36612C8.85427 4.87796 9.64554 4.87796 10.1337 5.36612C10.6218 5.85428 10.6218 6.64557 10.1337 7.13369L7.26748 9.9999H15.2499C18.1494 9.99996 20.4999 12.3504 20.4999 15.2499V19.2499C20.4999 19.9402 19.9402 20.4999 19.2499 20.4999C18.5596 20.4999 18 19.9402 17.9999 19.2499V15.2499C17.9999 13.7312 16.7686 12.5 15.2499 12.4999H7.26748L10.1337 15.3661C10.6218 15.8543 10.6218 16.6456 10.1337 17.1337C9.64557 17.6218 8.85428 17.6218 8.36612 17.1337L3.36612 12.1337C2.87796 11.6455 2.87796 10.8543 3.36612 10.3661L8.36612 5.36612Z"/>
   </svg>`,
 
   "redo":
-  `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M15.6338 5.1163C15.1456 4.62814 14.3543 4.62814 13.8662 5.1163C13.3781 5.60446 13.3781 6.39575 13.8662 6.88388L16.7324 9.75009H8.74997C5.85052 9.75014 3.49997 12.1006 3.49997 15.0001V19.0001C3.50002 19.6904 4.05969 20.25 4.74997 20.2501C5.4403 20.2501 5.99992 19.6904 5.99997 19.0001V15.0001C5.99997 13.4813 7.23123 12.2501 8.74997 12.2501H16.7324L13.8662 15.1163C13.3781 15.6045 13.3781 16.3958 13.8662 16.8839C14.3543 17.372 15.1456 17.3719 15.6338 16.8839L20.6338 11.8839C21.1219 11.3957 21.1219 10.6045 20.6338 10.1163L15.6338 5.1163Z" />
   </svg>`,
 
   "overflow":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M3 6.75C4.24264 6.75 5.25 7.75736 5.25 9C5.25 10.2426 4.24264 11.25 3 11.25C1.75736 11.25 0.75 10.2426 0.75 9C0.75 7.75736 1.75736 6.75 3 6.75ZM9 6.75C10.2426 6.75 11.25 7.75736 11.25 9C11.25 10.2426 10.2426 11.25 9 11.25C7.75736 11.25 6.75 10.2426 6.75 9C6.75 7.75736 7.75736 6.75 9 6.75ZM15 6.75C16.2426 6.75 17.25 7.75736 17.25 9C17.25 10.2426 16.2426 11.25 15 11.25C13.7574 11.25 12.75 10.2426 12.75 9C12.75 7.75736 13.7574 6.75 15 6.75Z"/>
   </svg>`
 }
diff --git a/src/extensions/highlight_extension.js b/src/extensions/highlight_extension.js
index f19812494..be9e65d0b 100644
--- a/src/extensions/highlight_extension.js
+++ b/src/extensions/highlight_extension.js
@@ -3,7 +3,7 @@ import { $getSelection, $isRangeSelection } from "lexical"
 import { $getSelectionStyleValueForProperty, $patchStyleText, getCSSFromStyleObject, getStyleObjectFromCSS } from "@lexical/selection"
 import { $createCodeHighlightNode, $createCodeNode, $isCodeHighlightNode, $isCodeNode, CodeHighlightNode, PrismTokenizer } from "@lexical/code"
 import { extendTextNodeConversion } from "../helpers/lexical_helper"
-import { StyleCanonicalizer, applyCanonicalizers, hasHighlightStyles } from "../helpers/format_helper"
+import { StyleCanonicalizer, applyCanonicalizers, hasHighlightStyles, normalizeColorButtons } from "../helpers/format_helper"
 import { RichTextExtension } from "@lexical/rich-text"
 import LexxyExtension from "./lexxy_extension"
 import { mergeRegister } from "@lexical/utils"
@@ -327,11 +327,15 @@ function $extractHighlightRangesFromCodeNode(codeNode) {
 
 function buildCanonicalizers(config) {
   return [
-    new StyleCanonicalizer("color", [ ...config.buttons.color, ...config.permit.color ]),
-    new StyleCanonicalizer("background-color", [ ...config.buttons["background-color"], ...config.permit["background-color"] ])
+    new StyleCanonicalizer("color", [ ...colorValues(config.buttons.color), ...config.permit.color ]),
+    new StyleCanonicalizer("background-color", [ ...colorValues(config.buttons["background-color"]), ...config.permit["background-color"] ])
   ]
 }
 
+function colorValues(buttons) {
+  return normalizeColorButtons(buttons).map((button) => button.value)
+}
+
 function $toggleSelectionStyles(editor, styles) {
   const selection = $getSelection()
   if (!$isRangeSelection(selection)) return
diff --git a/src/helpers/accessibility_helper.js b/src/helpers/accessibility_helper.js
index 1d5a9f29b..e352622bb 100644
--- a/src/helpers/accessibility_helper.js
+++ b/src/helpers/accessibility_helper.js
@@ -1,10 +1,15 @@
 import { isActiveAndVisible } from "./html_helper"
 
-export function handleRollingTabIndex(elements, event) {
+// Keyboard and programmatic clicks carry a synthetic pointer.
+export function isKeyboardActivation(event) {
+  return event instanceof PointerEvent && event.pointerId === -1
+}
+
+export function handleRollingTabIndex(elements, event, { orientation = "horizontal", wrap = false } = {}) {
   const previousActiveElement = document.activeElement
 
   if (elements.includes(previousActiveElement)) {
-    const finder = new NextElementFinder(elements, event.key)
+    const finder = new NextElementFinder(elements, event.key, { orientation, wrap })
 
     if (finder.selectNext(previousActiveElement)) {
       event.preventDefault()
@@ -13,9 +18,11 @@ export function handleRollingTabIndex(elements, event) {
 }
 
 class NextElementFinder {
-  constructor(elements, key) {
+  constructor(elements, key, { orientation, wrap }) {
     this.elements = elements
     this.key = key
+    this.orientation = orientation
+    this.wrap = wrap
   }
 
   selectNext(fromElement) {
@@ -32,23 +39,36 @@ class NextElementFinder {
   }
 
   #findNextElement(fromElement) {
-    switch (this.key) {
-      case "ArrowRight":
-      case "ArrowDown":
+    switch (this.#directionFor(this.key)) {
+      case "next":
         return this.#findNextSibling(fromElement)
 
-      case "ArrowLeft":
-      case "ArrowUp":
+      case "previous":
         return this.#findPreviousSibling(fromElement)
 
-      case "Home":
+      case "first":
         return this.#findFirst()
 
-      case "End":
+      case "last":
         return this.#findLast()
     }
   }
 
+  #directionFor(key) {
+    if (key === "Home") return "first"
+    if (key === "End") return "last"
+    if (this.#nextKeys.includes(key)) return "next"
+    if (this.#previousKeys.includes(key)) return "previous"
+  }
+
+  get #nextKeys() {
+    return this.orientation === "both" ? [ "ArrowRight", "ArrowDown" ] : [ "ArrowRight" ]
+  }
+
+  get #previousKeys() {
+    return this.orientation === "both" ? [ "ArrowLeft", "ArrowUp" ] : [ "ArrowLeft" ]
+  }
+
   #findFirst(elements = this.elements) {
     return elements.find(isActiveAndVisible)
   }
@@ -59,12 +79,20 @@ class NextElementFinder {
 
   #findNextSibling(element) {
     const afterElements = this.elements.slice(this.#indexOf(element) + 1)
-    return this.#findFirst(afterElements)
+    return this.#findFirst(afterElements) ?? this.#wrapToFirst()
   }
 
   #findPreviousSibling(element) {
     const beforeElements = this.elements.slice(0, this.#indexOf(element))
-    return this.#findLast(beforeElements)
+    return this.#findLast(beforeElements) ?? this.#wrapToLast()
+  }
+
+  #wrapToFirst() {
+    return this.wrap ? this.#findFirst() : undefined
+  }
+
+  #wrapToLast() {
+    return this.wrap ? this.#findLast() : undefined
   }
 
   #indexOf(element) {
diff --git a/src/helpers/format_helper.js b/src/helpers/format_helper.js
index 8322f2d7c..bf1cfc9dc 100644
--- a/src/helpers/format_helper.js
+++ b/src/helpers/format_helper.js
@@ -36,6 +36,10 @@ export function hasHighlightStyles(cssOrStyles) {
   return !!(styles.color || styles["background-color"])
 }
 
+export function normalizeColorButtons(buttons) {
+  return buttons.map((button) => (typeof button === "string" ? { value: button, label: button } : button))
+}
+
 export function applyCanonicalizers(styles, canonicalizers = []) {
   return canonicalizers.reduce((css, canonicalizer) => {
     return canonicalizer.applyCanonicalization(css)
diff --git a/test/browser/fixtures/highlight-string-buttons.html b/test/browser/fixtures/highlight-string-buttons.html
new file mode 100644
index 000000000..5e996446d
--- /dev/null
+++ b/test/browser/fixtures/highlight-string-buttons.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Lexxy Test</title>
+  <link rel="stylesheet" href="/styles.css">
+</head>
+<body>
+  <form>
+    <div class="body"></div>
+  </form>
+
+  <script type="module">
+    import { configure } from "lexxy"
+
+    configure({
+      default: {
+        highlight: {
+          buttons: {
+            color: [ "red" ],
+            "background-color": [ "yellow" ]
+          }
+        }
+      }
+    })
+
+    document.querySelector(".body").innerHTML = '<lexxy-editor class="lexxy-content"></lexxy-editor>'
+  </script>
+</body>
+</html>
diff --git a/test/browser/fixtures/toolbar-external.html b/test/browser/fixtures/toolbar-external.html
index 13ea2cd47..4b38ecc1f 100644
--- a/test/browser/fixtures/toolbar-external.html
+++ b/test/browser/fixtures/toolbar-external.html
@@ -17,8 +17,8 @@
         <button class="lexxy-editor__toolbar-button" type="button" name="bold" data-command="bold" title="Bold">bold</button>
         <lexxy-toolbar-dropdown class="lexxy-editor__toolbar-overflow">
           <button class="lexxy-editor__toolbar-button" type="button" data-dropdown-trigger
-                  aria-haspopup="menu" aria-expanded="false" aria-label="Show more toolbar buttons">&bull;&bull;&bull;</button>
-          <div data-dropdown-panel role="menu" class="lexxy-editor__toolbar-overflow-menu" aria-label="More toolbar buttons" hidden></div>
+                  aria-haspopup="menu" aria-expanded="false" aria-label="More options">&bull;&bull;&bull;</button>
+          <div data-dropdown-panel role="menu" class="lexxy-editor__toolbar-overflow-menu" aria-label="More options" hidden></div>
         </lexxy-toolbar-dropdown>
       </lexxy-toolbar>
 
diff --git a/test/browser/helpers/editor_handle.js b/test/browser/helpers/editor_handle.js
index 36569b02f..4e8b828a8 100644
--- a/test/browser/helpers/editor_handle.js
+++ b/test/browser/helpers/editor_handle.js
@@ -36,6 +36,10 @@ export class EditorHandle {
     await this.content.focus()
   }
 
+  async isFocused() {
+    return this.content.evaluate((element) => document.activeElement === element)
+  }
+
   async click() {
     await this.content.click()
   }
@@ -236,13 +240,13 @@ export class EditorHandle {
 
   async openTableRowMenu() {
     await this.locator
-      .locator("lexxy-table-tools .lexxy-table-control--row details")
+      .locator("lexxy-table-tools .lexxy-table-control--row [data-dropdown-trigger]")
       .click()
   }
 
   async openTableColumnMenu() {
     await this.locator
-      .locator("lexxy-table-tools .lexxy-table-control--column details")
+      .locator("lexxy-table-tools .lexxy-table-control--column [data-dropdown-trigger]")
       .click()
   }
 
diff --git a/test/browser/helpers/toolbar.js b/test/browser/helpers/toolbar.js
index 1a71cfde3..956633f5c 100644
--- a/test/browser/helpers/toolbar.js
+++ b/test/browser/helpers/toolbar.js
@@ -1,5 +1,9 @@
 export const HELLO_EVERYONE = "<p>Hello everyone</p>"
 
+export function focusedName(page) {
+  return page.evaluate(() => document.activeElement?.name)
+}
+
 export async function openFormatDropdown(page) {
   await openToolbarDropdown(page, "format")
 }
diff --git a/test/browser/tests/attachments/attachments.test.js b/test/browser/tests/attachments/attachments.test.js
index 70746c68c..48e1a010d 100644
--- a/test/browser/tests/attachments/attachments.test.js
+++ b/test/browser/tests/attachments/attachments.test.js
@@ -282,7 +282,7 @@ test.describe("Attachments", () => {
 
     // Undo until the undo button is disabled — no stale upload node should remain
     const undoButton = page.getByRole("button", { name: "Undo" })
-    while (await undoButton.evaluate((el) => !el.disabled)) {
+    while (await undoButton.evaluate((element) => element.ariaDisabled !== "true")) {
       await undoButton.click()
       await editor.flush()
     }
diff --git a/test/browser/tests/formatting/color_highlighter.test.js b/test/browser/tests/formatting/color_highlighter.test.js
index 0fc1c1f6c..c67feff35 100644
--- a/test/browser/tests/formatting/color_highlighter.test.js
+++ b/test/browser/tests/formatting/color_highlighter.test.js
@@ -24,6 +24,34 @@ test.describe("Color highlighter", () => {
     )
   })
 
+  test("an applied color is exposed as a checked menuitemcheckbox", async ({ page, editor }) => {
+    await editor.setValue("<p>Hello everyone</p>")
+    await editor.select("everyone")
+    await applyHighlightOption(page, "color", 1)
+    await editor.flush()
+
+    await editor.select("everyone")
+    await page.locator("[name='highlight']").click()
+
+    const textColors = page.locator("lexxy-highlight-dropdown [role='group'][aria-label='Text color']")
+    const colorButton = textColors.locator(".lexxy-highlight-button[data-style='color']").first()
+    await expect(colorButton).toHaveAttribute("role", "menuitemcheckbox")
+    await expect(colorButton).toHaveAttribute("aria-checked", "true")
+    await expect(colorButton).toHaveAttribute("aria-label", "Yellow")
+  })
+
+  test("string color options have accessible names", async ({ page }) => {
+    await page.goto("/highlight-string-buttons.html")
+    await page.waitForSelector("lexxy-editor[connected]")
+    await page.locator("[name='highlight']").click()
+
+    const textColor = page.locator("lexxy-highlight-dropdown [role='group'][aria-label='Text color'] button")
+    const backgroundColor = page.locator("lexxy-highlight-dropdown [role='group'][aria-label='Background color'] button")
+
+    await expect(textColor).toHaveAttribute("aria-label", "red")
+    await expect(backgroundColor).toHaveAttribute("aria-label", "yellow")
+  })
+
   test("color highlighting text in a plain-text code block", async ({ page, editor }) => {
     await editor.setValue('<pre data-language="plain"><code>some log output</code></pre>')
     await expect(page.locator("select[name=lexxy-code-language]")).toHaveValue("plain")
diff --git a/test/browser/tests/formatting/heading_format.test.js b/test/browser/tests/formatting/heading_format.test.js
index 163e698c7..4edd82d59 100644
--- a/test/browser/tests/formatting/heading_format.test.js
+++ b/test/browser/tests/formatting/heading_format.test.js
@@ -91,8 +91,8 @@ test.describe("Heading format", () => {
       parent.appendChild(fresh)
     })
 
-    await expect(page.locator("[name='heading-large']")).toHaveAttribute("aria-pressed", "true")
-    await expect(page.locator("[name='heading-medium']")).toHaveAttribute("aria-pressed", "false")
+    await expect(page.locator("[name='heading-large']")).toHaveAttribute("aria-checked", "true")
+    await expect(page.locator("[name='heading-medium']")).toHaveAttribute("aria-checked", "false")
   })
 
   test("dedicated commands apply the default headings when invoked by name", async ({ page, editor }) => {
@@ -151,7 +151,8 @@ test.describe("Heading format", () => {
     const headingLarge = page.locator("[name='heading-large']")
     const paragraph = page.locator("[name='paragraph']")
 
-    await expect(headingLarge).toHaveAttribute("aria-pressed", "true")
-    await expect(paragraph).toHaveAttribute("aria-pressed", "false")
+    await expect(headingLarge).toHaveAttribute("role", "menuitemradio")
+    await expect(headingLarge).toHaveAttribute("aria-checked", "true")
+    await expect(paragraph).toHaveAttribute("aria-checked", "false")
   })
 })
diff --git a/test/browser/tests/formatting/toolbar.test.js b/test/browser/tests/formatting/toolbar.test.js
index d0577f44d..fc736acfa 100644
--- a/test/browser/tests/formatting/toolbar.test.js
+++ b/test/browser/tests/formatting/toolbar.test.js
@@ -1,7 +1,7 @@
 import { test } from "../../test_helper.js"
 import { expect } from "@playwright/test"
 import { assertEditorHtml } from "../../helpers/assertions.js"
-import { HELLO_EVERYONE } from "../../helpers/toolbar.js"
+import { HELLO_EVERYONE, focusedName } from "../../helpers/toolbar.js"
 
 test.describe("Toolbar", () => {
   test.beforeEach(async ({ page }) => {
@@ -53,16 +53,13 @@ test.describe("Toolbar", () => {
     const boldButton = page.locator("lexxy-toolbar button[name='bold']")
     await boldButton.focus()
 
-    const focusedName = () =>
-      page.evaluate(() => document.activeElement?.getAttribute("name"))
-
-    await expect.poll(focusedName).toBe("bold")
+    await expect.poll(() => focusedName(page)).toBe("bold")
 
     await page.keyboard.press("ArrowRight")
-    await expect.poll(focusedName).toBe("italic")
+    await expect.poll(() => focusedName(page)).toBe("italic")
 
     await page.keyboard.press("ArrowLeft")
-    await expect.poll(focusedName).toBe("bold")
+    await expect.poll(() => focusedName(page)).toBe("bold")
   })
 
   test("undo and redo commands", async ({ page, editor }) => {
@@ -71,7 +68,7 @@ test.describe("Toolbar", () => {
 
     // Undo until the undo button is disabled (editor is back to initial state)
     const undoButton = page.getByRole("button", { name: "Undo" })
-    while (await undoButton.evaluate((el) => !el.disabled)) {
+    while (await undoButton.evaluate((element) => element.ariaDisabled !== "true")) {
       await undoButton.click()
       await editor.flush()
     }
@@ -79,7 +76,7 @@ test.describe("Toolbar", () => {
 
     // Redo until the redo button is disabled
     const redoButton = page.getByRole("button", { name: "Redo" })
-    while (await redoButton.evaluate((el) => !el.disabled)) {
+    while (await redoButton.evaluate((element) => element.ariaDisabled !== "true")) {
       await redoButton.click()
       await editor.flush()
     }
diff --git a/test/browser/tests/formatting/toolbar_keyboard_navigation.test.js b/test/browser/tests/formatting/toolbar_keyboard_navigation.test.js
new file mode 100644
index 000000000..9a1d74de1
--- /dev/null
+++ b/test/browser/tests/formatting/toolbar_keyboard_navigation.test.js
@@ -0,0 +1,174 @@
+import { test } from "../../test_helper.js"
+import { expect } from "@playwright/test"
+import { HELLO_EVERYONE, focusedName } from "../../helpers/toolbar.js"
+
+test.describe("Toolbar keyboard navigation", () => {
+  test.beforeEach(async ({ page, editor }) => {
+    await page.goto("/")
+    await page.waitForSelector("lexxy-editor[connected]")
+    await page.waitForSelector("lexxy-toolbar[connected]")
+    await editor.setValue(HELLO_EVERYONE)
+  })
+
+  test("the toolbar moves with left and right, not up and down", async ({ page }) => {
+    await page.locator("lexxy-toolbar button[name='bold']").focus()
+    await expect.poll(() => focusedName(page)).toBe("bold")
+
+    await page.keyboard.press("ArrowDown")
+    await expect.poll(() => focusedName(page)).toBe("bold")
+
+    await page.keyboard.press("ArrowRight")
+    await expect.poll(() => focusedName(page)).toBe("italic")
+
+    await page.keyboard.press("ArrowUp")
+    await expect.poll(() => focusedName(page)).toBe("italic")
+
+    await page.keyboard.press("ArrowLeft")
+    await expect.poll(() => focusedName(page)).toBe("bold")
+  })
+
+  test("arrow keys keep moving along the toolbar when focus is on a menu dropdown trigger", async ({ page }) => {
+    const formatTrigger = page.locator("lexxy-toolbar button[name='format']")
+    await formatTrigger.focus()
+    await expect.poll(() => focusedName(page)).toBe("format")
+
+    await page.keyboard.press("ArrowRight")
+    await expect.poll(() => focusedName(page)).toBe("highlight")
+
+    await page.keyboard.press("ArrowLeft")
+    await expect.poll(() => focusedName(page)).toBe("format")
+  })
+
+  test("an open menu traps arrow navigation and wraps around", async ({ page }) => {
+    await page.locator("lexxy-toolbar button[name='format']").click()
+    await expect.poll(() => focusedName(page)).toBe("paragraph")
+
+    // Wraps to the last item instead of leaking to the toolbar
+    await page.keyboard.press("ArrowUp")
+    await expect.poll(() => focusedName(page)).toBe("clear-formatting")
+
+    // And back to the first
+    await page.keyboard.press("ArrowDown")
+    await expect.poll(() => focusedName(page)).toBe("paragraph")
+
+    await page.keyboard.press("ArrowDown")
+    await expect.poll(() => focusedName(page)).toBe("heading-large")
+  })
+
+  test("the color grid moves with all four arrows", async ({ page }) => {
+    await page.locator("lexxy-toolbar button[name='highlight']").click()
+
+    const focusedColorIndex = () =>
+      page.evaluate(() => {
+        const buttons = [ ...document.querySelectorAll("lexxy-highlight-dropdown [data-dropdown-panel] button") ]
+        return buttons.indexOf(document.activeElement)
+      })
+
+    await expect.poll(focusedColorIndex).toBe(0)
+
+    await page.keyboard.press("ArrowRight")
+    await expect.poll(focusedColorIndex).toBe(1)
+
+    await page.keyboard.press("ArrowLeft")
+    await expect.poll(focusedColorIndex).toBe(0)
+
+    // Down also moves linearly, not by column
+    await page.keyboard.press("ArrowDown")
+    await expect.poll(focusedColorIndex).toBe(1)
+
+    await page.keyboard.press("ArrowUp")
+    await expect.poll(focusedColorIndex).toBe(0)
+  })
+
+  test("opening a menu with the mouse still shows a focus ring on the first item", async ({ page }) => {
+    await page.locator("lexxy-toolbar button[name='highlight']").click()
+
+    const firstColor = page.locator("lexxy-highlight-dropdown [data-dropdown-panel] button").first()
+    await expect(firstColor).toBeFocused()
+    await expect.poll(() => firstColor.evaluate(element => element.matches(":focus-visible"))).toBe(true)
+  })
+
+  test("Escape returns focus to the trigger when the menu was opened from the toolbar", async ({ page }) => {
+    const formatTrigger = page.locator("lexxy-toolbar button[name='format']")
+    await formatTrigger.focus()
+    await formatTrigger.press("Enter")
+    await expect.poll(() => focusedName(page)).toBe("paragraph")
+
+    await page.keyboard.press("Escape")
+    await expect.poll(() => focusedName(page)).toBe("format")
+  })
+
+  test("Escape returns focus to the editor when the dropdown was opened from the editor", async ({ page, editor }) => {
+    await editor.focus()
+    await page.keyboard.press("Control+k")
+    await expect(page.locator("lexxy-link-dropdown input[type='url']")).toBeFocused()
+
+    await page.keyboard.press("Escape")
+    await expect.poll(() => editor.isFocused()).toBe(true)
+  })
+
+  test("Escape returns focus to the editor when the menu was opened with the mouse", async ({ page, editor }) => {
+    await page.locator("lexxy-toolbar button[name='format']").click()
+    await expect.poll(() => focusedName(page)).toBe("paragraph")
+
+    await page.keyboard.press("Escape")
+    await expect.poll(() => editor.isFocused()).toBe(true)
+  })
+
+  test("applying a menu command with the keyboard returns focus to the editor", async ({ page, editor }) => {
+    await editor.send("Hello World")
+
+    const formatTrigger = page.locator("lexxy-toolbar button[name='format']")
+    await formatTrigger.focus()
+    await formatTrigger.press("Enter")
+    await expect.poll(() => focusedName(page)).toBe("paragraph")
+
+    await page.keyboard.press("Enter")
+    await expect.poll(() => editor.isFocused()).toBe(true)
+  })
+
+  test("applying a command from the overflow menu returns focus to the editor", async ({ page, editor }) => {
+    await page.setViewportSize({ width: 300, height: 600 })
+    await page.waitForSelector("lexxy-toolbar[overflowing]")
+    await editor.send("Hello World")
+
+    await page.locator("lexxy-toolbar .lexxy-editor__toolbar-overflow button[data-dropdown-trigger]").click()
+    const undo = page.locator(".lexxy-editor__toolbar-overflow-menu button[name='undo']")
+    await undo.focus()
+    await expect.poll(() => focusedName(page)).toBe("undo")
+
+    await page.keyboard.press("Enter")
+    await expect.poll(() => editor.isFocused()).toBe(true)
+  })
+
+  test("arrow navigation stops on disabled buttons so they can be announced", async ({ page, editor }) => {
+    await editor.send("Hello World")
+
+    const redo = page.locator("lexxy-toolbar button[name='redo']")
+    await expect(redo).toHaveAttribute("aria-disabled", "true")
+
+    await page.locator("lexxy-toolbar button[name='undo']").focus()
+    await expect.poll(() => focusedName(page)).toBe("undo")
+
+    await page.keyboard.press("ArrowRight")
+    await expect.poll(() => focusedName(page)).toBe("redo")
+  })
+
+  test("focus stays on the button when its own action disables it", async ({ page, editor }) => {
+    await editor.send("Hello World")
+
+    const undo = page.locator("lexxy-toolbar button[name='undo']")
+    await undo.focus()
+    await expect.poll(() => focusedName(page)).toBe("undo")
+
+    // Focus must stay on the button as it disables itself, not fall to the body
+    let guard = 0
+    while ((await undo.evaluate((element) => element.ariaDisabled)) !== "true" && guard++ < 20) {
+      await page.keyboard.press("Enter")
+      await editor.flush()
+    }
+
+    await expect(undo).toHaveAttribute("aria-disabled", "true")
+    await expect.poll(() => focusedName(page)).toBe("undo")
+  })
+})
diff --git a/test/browser/tests/tables/toolbar.test.js b/test/browser/tests/tables/toolbar.test.js
index 0a662fec7..e0ab841bb 100644
--- a/test/browser/tests/tables/toolbar.test.js
+++ b/test/browser/tests/tables/toolbar.test.js
@@ -31,7 +31,7 @@ test.describe("Tables — Toolbar accessibility", () => {
     await page.keyboard.press("ArrowRight")
 
     await expect(
-      editor.locator.locator("lexxy-table-tools .lexxy-table-control--row summary")
+      editor.locator.locator("lexxy-table-tools .lexxy-table-control--row [data-dropdown-trigger]")
     ).toBeFocused()
   })
 
@@ -41,4 +41,61 @@ test.describe("Tables — Toolbar accessibility", () => {
 
     await expect(editor.content).toBeFocused()
   })
+
+  test("the more menu exposes menu semantics", async ({ editor }) => {
+    const trigger = editor.locator.locator("lexxy-table-tools .lexxy-table-control--row [data-dropdown-trigger]")
+    await expect(trigger).toHaveAttribute("aria-haspopup", "menu")
+    await expect(trigger).toHaveAttribute("aria-expanded", "false")
+
+    await trigger.click()
+    await expect(trigger).toHaveAttribute("aria-expanded", "true")
+
+    const menu = editor.locator.locator("lexxy-table-tools .lexxy-table-control--row [data-dropdown-panel]")
+    await expect(menu).toHaveAttribute("role", "menu")
+    await expect(menu.locator("button[role='menuitem']")).toHaveCount(4)
+  })
+
+  test("arrow keys stay within the open more menu and wrap", async ({ page, editor }) => {
+    await editor.openTableRowMenu()
+
+    const items = editor.locator.locator("lexxy-table-tools .lexxy-table-control--row [data-dropdown-panel] button[role='menuitem']")
+    await expect(items.first()).toBeFocused()
+
+    await page.keyboard.press("ArrowUp")
+    await expect(items.last()).toBeFocused()
+
+    await page.keyboard.press("ArrowDown")
+    await expect(items.first()).toBeFocused()
+
+    await page.keyboard.press("ArrowDown")
+    await expect(items.nth(1)).toBeFocused()
+  })
+
+  test("Escape closes the more menu and returns focus to its trigger", async ({ page, editor }) => {
+    const trigger = editor.locator.locator("lexxy-table-tools .lexxy-table-control--row [data-dropdown-trigger]")
+    await trigger.focus()
+    await page.keyboard.press("Enter")
+
+    const menu = editor.locator.locator("lexxy-table-tools .lexxy-table-control--row [data-dropdown-panel]")
+    await expect(menu).toBeVisible()
+
+    await page.keyboard.press("Escape")
+    await expect(menu).toBeHidden()
+    await expect(trigger).toBeFocused()
+  })
+
+  test("opening the more menu with the mouse shows a focus ring on the first item", async ({ editor }) => {
+    await editor.openTableRowMenu()
+
+    const firstItem = editor.locator.locator("lexxy-table-tools .lexxy-table-control--row [data-dropdown-panel] button[role='menuitem']").first()
+    await expect(firstItem).toBeFocused()
+    await expect.poll(() => firstItem.evaluate(element => element.matches(":focus-visible"))).toBe(true)
+  })
+
+  test("activating a more menu action returns focus to the editor", async ({ page, editor }) => {
+    await editor.openTableRowMenu()
+    await page.keyboard.press("Enter")
+
+    await expect.poll(() => editor.isFocused()).toBe(true)
+  })
 })
diff --git a/test/dummy/app/views/posts/_form.html.erb b/test/dummy/app/views/posts/_form.html.erb
index 4a50c0e0a..79676847f 100644
--- a/test/dummy/app/views/posts/_form.html.erb
+++ b/test/dummy/app/views/posts/_form.html.erb
@@ -38,10 +38,10 @@
     <% if params[:toolbar_external] %>
       <lexxy-toolbar id="external_toolbar">
         <button class="lexxy-editor__toolbar-button" type="button" name="bold" data-command="bold" title="Bold">bold</button>
-        <details class="lexxy-editor__toolbar-overflow">
-          <summary class="lexxy-editor__toolbar-button" aria-label="Show more toolbar buttons">•••</summary>
-          <div class="lexxy-editor__toolbar-overflow-menu" aria-label="More toolbar buttons"></div>
-        </details>
+        <lexxy-toolbar-dropdown class="lexxy-editor__toolbar-overflow">
+          <button class="lexxy-editor__toolbar-button" type="button" data-dropdown-trigger aria-haspopup="menu" aria-expanded="false" aria-label="More options">•••</button>
+          <div data-dropdown-panel role="menu" class="lexxy-editor__toolbar-overflow-menu" aria-label="More options" hidden></div>
+        </lexxy-toolbar-dropdown>
       </lexxy-toolbar>
     <% end %>
 
diff --git a/test/javascript/native/editor_initialized.test.js b/test/javascript/native/editor_initialized.test.js
index f2ba8a39b..d28d6f129 100644
--- a/test/javascript/native/editor_initialized.test.js
+++ b/test/javascript/native/editor_initialized.test.js
@@ -20,22 +20,22 @@ describe("editor initialized event", () => {
     expect(event.detail.headingFormats).toBeInstanceOf(Array)
   })
 
-  test("each color entry has name and value properties", async () => {
+  test("each color entry has name, value, and label properties", async () => {
     editorElement = await createTestEditorWithNativeAdapter()
 
     const event = await captureEvent(editorElement, "lexxy:editor-initialized", () => {
       editorElement.dispatchEditorInitialized()
     })
 
-    for (const color of event.detail.highlightColors.colors) {
+    const { colors, backgroundColors } = event.detail.highlightColors
+    for (const color of [ ...colors, ...backgroundColors ]) {
       expect(color).toHaveProperty("name")
       expect(color).toHaveProperty("value")
+      expect(color).toHaveProperty("label")
     }
 
-    for (const color of event.detail.highlightColors.backgroundColors) {
-      expect(color).toHaveProperty("name")
-      expect(color).toHaveProperty("value")
-    }
+    expect(colors[0].label).toBe("Yellow")
+    expect(backgroundColors[0].label).toBe("Yellow")
   })
 
   test("color names correspond to CSS custom properties", async () => {