Rich text editor format button hides the current format from screen readers

[rtibblesbot]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Overview

Screen-reader users cannot hear the current text format in the rich text editor toolbar. The format button's aria-label ("Text format options") replaces its visible text (e.g. "Normal"), and the open menu marks the selected format only with colour.

Complexity: Low
Target branch: unstable

Context

• Format button:

  studio/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue

  Lines 3 to 35 in 51bf1ea

  	<button
  	class="format-dropdown"
  	data-toolbar-item
  	:aria-label="textFormatOptions$()"
  	>
  	<span>{{ selectedFormat }}</span>
  	<img
  	:src="require('../../../assets/icon-chevron-down.svg')"
  	alt=""
  	class="dropdown-icon"
  	>
  	<KDropdownMenu
  	:options="formatOptions"
  	:constrainToScrollParent="false"
  	@select="applyFormat"
  	>
  	<template #option="{ option }">
  	<div
  	class="dropdown-item tiptap-format-option"
  	:class="{ 'is-selected': option.value === selectedValue }"
  	:style="
  	option.value === selectedValue
  	? { color: $themePalette.blue.v_600, backgroundColor: $themePalette.blue.v_100 }
  	: null
  	"
  	>
  	<component
  	:is="option.tag"
  	v-text="option.label"
  	/>
  	</div>
  	</template>
  	</KDropdownMenu>

• The accessible name not containing the visible text also fails WCAG 2.5.3 Label in Name.
• The gap predates Keep RTE toolbar dropdowns from being clipped #6280; the earlier menu put aria-selected on role="menuitem", which is not a valid attribute there.

How to Get There

1. Open any exercise question in the rich text editor.
2. Place the cursor in a paragraph and focus the format button in the toolbar.

Acceptance Criteria

Accessibility and i18n

• The format button's accessible name begins with the visible format text, e.g. "Normal, text format options".
• The accessible name updates as the cursor moves between formats.
• Screen readers announce which menu option is the current format.
• Any new string takes the format as an ICU argument, not concatenation.

Testing

• A unit test asserts the button's accessible name includes the current format after it changes.

AI usage

Claude Code drafted this issue from its review of #6280 (#6280 (comment)); rtibbles asked for it as a follow-up.