Issues reported by @albinazs as part of WCAG 2.2 accessibility audit – still to be confirmed.

Working on this

Those issues are unconfirmed – please only pick these up unless you’re comfortable with forced-colors mode / WHCM, and able to understand which area of Wagtail is mentioned. The first step will be to confirm the issues via comments here, then devise a fix.

Issues

Tooltips

• Broken design for data-w-tooltip human readable date (no border, solid square instead of an arrow): w-human-readable-date
• Broken design for tooltips for sidebar-slim menu items (no border, solid square instead of an arrow)
• Absent border for the Actions tooltip
• Absent border for the Status tooltip
• Absent border for the Actions, Status, Preview, Comments, History and Live tooltips on the editor's header
• Absent border for the Actions tooltip on the Image:

<button type="button" class="w-dropdown__toggle w-dropdown__toggle--icon" data-w-dropdown-target="toggle" aria-label="Actions" aria-describedby="id_image-title" aria-expanded="false">

Menus and menu items

• No circle around Wagtail brand logo: sidebar-wagtail-branding__icon-wrapper
• Button and links styled as buttons have different appearance on the main menu as well as menu footer which is confusing
• No visible state change on hover for menu and menu footer items
• Low contrast for submenu header icons: suitcase
• No visible right border for the submenu header & drawer, that separates visually menu from the page content
• Unnecessary 3px solid right and left borders on all the menu items
• No visual indication of the chosen parent menu item when submenu is opened (except Highlight color on the extra left & right borders that seems to work only for some of the items like Pages and Bread categories)

Code:

w-page-explorer

Side panels

• No visible state change on hover for the minimap items including Expand-right icon. Same goes for the most of every form-side panel's items: w-minimap__list
• Unnecessary 3px solid left border on the minimap items: w-minimap__list
• Broken design for the form resize grip for all form panels (square on the right instead of 2 thin central lines)

Light theme only

• invisible Admin arrow icon in both open and closed states

Dark theme only

• 'Warning' icon has very low contrast
• disappearing 'plus' sign on the comment icon on hover
• very low contrast for the Close button on the 'Change privacy' and 'Set schedule' dialogs on the History panel

Other

• No visible hover effect for almost all the items on the dashboard
• Absent border around the language label: w-status w-status--label
• Inconsistent focus appearance for the Actions dropdown items on the footer - thick ButtonText outline instead of the Highlight like for the rest of the components on the page
• No visible state change on hover for the date picker's days and light & left months navigation arrows
• Inconsistent focus appearance for the Draftail containers (ButtonText border instead of a Highlight one like on Text inputs
• Inconsistent appearance of the plus buttons on hover: Highlight border for the combobox and Green background for adding a block respectively: c-sf-add-button
• Weird hover appearance for the combobox option items (background change): <div class="w-combobox">...</div>