We're currently doing an a11y review of our admin panel and various components. Related PR

I'm attaching the A11y report here so we can have a more evergreen place to capture feedback and ideas for how we can improve in this area. For now there's a report below, it's by no means comprehensive as there's likely more work we can do in our individual components to make them more keyboard and screen reader accessible.

After the issues in the report are solved we should do the following:

• Manual screen reader testing
• E2E keyboard only tests for using the admin panel to edit and manage content
• Explore options for some kind of automated screen reader testing

Report (Nov 2025)

General

(including a11y suite)

Breadcrumbs

• Logo lacks a label or descriptive text
• Link missing focus style
• Add aria-label='Breadcrumbs' to nav
• Add aria-current='page' to last item in breadcrumb

See example

Navigation menu

• Links missing clear focus styles
• to review: Close menu button has double aria labels with "Collapse" on the inner div
• Close/Open menu button should track state with aria-pressed

Locale Picker

• Locale picker doesn't pass colour contrast requirements
• It's not possible to exit out of the picker with esc key
• Expectation is that you can use arrow keys to go through the list, see pattern

Versions view

• Time ago timestamp doesnt pass colour contrast requirements
• "Currently viewing" timestamp also doesn't pass colour contrast requirements

• Dropdown button on this button doesn't have a label

• Locale picker text doesn't pass colour contrast requirements

API tab

• Blue text in API response doesn't pass colour contrast requirements
• The "API URL" text doesn't pass colour contrast requirements
• Copy to clipboard button doesn't have a label
• Copy to clipboard button size needs to be at least 24x24
• Docs tabs has the following error List element has direct children that are not allowed: a, div

List view

• The bulk checkbox doesn't have a label associated with it

Doc controls

• The kebab menu button doesn't have a valid label

Live preview

• The width x height inputs don't have a label

• Zoom level button does have a label but it's not descriptive of what it is (just says 100%)
• The iframe itself should have a descriptive title attribute

Field descriptions

• Current field descriptions fail to meet colour contrast requirements

Select component

• hasMany when disabled fails to meet colour contrast requirements

• the inner draggable items are using role=button elements while the remove button is nested inside, this is a nesting of interactive elements violation
• the remove (x) button needs to be at least 24x24 (currently 20x20)

• Dropdown button (seen in Select fields suite) is aria-hidden but selectable
• Dropdown button can receive focus even when the field is disabled
• The label does not match with an id for the input in any fields using react-select

Fields

Array

• The "more" or options menu button on the array field on the right is missing aria labels

• The add row button label fails to meet colour contrast requirements

Blocks

• The "more" or options menu button on the blocks field on the right is missing aria labels

• The add row button label fails to meet colour contrast requirements

Checkbox

• Has incorrect aria-labelledby - should be removed

Collapsible

• We should have a region describedBy the collapsible button itself

See pattern

Dates

• Label's for attribute isn't matched to the input element (e2e tests will need updating with a parent selector here)

• The "timezone" label doesn't pass colour contrast requirements

Group

• Group field description fails to meet colour contrast requirements

JSON & Code fields

• The ID from the label's for doesn't match to the textarea input
• Tabbing into the editor traps focus and doesn't allow you to exit it via esc key

Point

• The ID from each label's for doesn't match the ID on the input itself

Uploads

• The text inside the upload component doesn't meet contrast requirements

• The remove media item button doesn't have an aria label

• The copy to clipboard button doesn't have a valid aria label

Tabs

• Inactive tab labels don't meet contrast requirements
• Need to add aria roles to the tablist, tab button and tab content, see pattern

Lexical

• The insert paragraph at the end button doesn't show when focused, it also doesn't respond to enter or space bar keys like a normal button should as we use a div with roles
• Should be able to use arrow keys when focused on a toolbar, pressing tab could skip the entire toolbar
• There are visually hidden buttons that can be focused on: Drag to move, Add block, Edit link, Remove link. before reaching the insert paragraph button

See pattern

My recommendation is as follows:

• The toolbar should not capture tabs and instead use a list so you can use arrow keys, tabbing again should go to the next element
• The overall text editor should be focusable and if you press enter you go into edit mode, this doesn't mess up people tabbing through accidentally indenting content
• Same pattern as we use on top toolbar should apply to / command menu and floating toolbar

The above changes would have no change in behaviour or visual style for non keyboard users.

Plugin SEO

• Colour contrast requirements are not met by the red labels or any of the descriptions

• Best practices links don't have focus outlines

• The link and title in preview are actual anchor links which is probably incorrect

We might need to re-structure the preview box specifically to be a