Accessibility: Inconsistent focus outlines across the CMS

[GuySartorelli]

WCAG 2.2 AA F78 2.4.7

Focus outlines (:focus-visible) across the CMS are inconsistent and in some cases violate accessible contrast standards.

Elements with insufficient contrast or inconsistent focus outlines

This is not an exhaustive list - check everything you can think of

• Locales dropdown selector in left menu for tractorcow/silverstripe-fluent
• "Add new page" button in /admin/pages (and by implied extension, probably all buttons)
• The batch action button and related elements in /admin/pages
• Create, Cancel, save, publish (etc) buttons
• Gridfield header buttons (export, import, print, search/filter)
• Gridfield action buttons (edit, view, delete, ..., etc in rows)
• "Upload", "add folder", "Search", and "list view" buttons in asset admin
• Sort dropdown in asset admin (completely missing focus outline)
• Individual links in linkfield
• draggable element for files and folders in asset admin
• buttons vs field input vs links focus outlines differ
• Left menu - most items only have a top-border visible for focus, not a full outline
• Sort headers in gridfield - only has bottom-border visible for focus, not a full outline (which is also what's used to denote the current sort)
• Sort headers in asset admin table view - no visible focus state at all - just aren't in the tab index which isn't part of this card.
• Breadcrumbs in a modeladmin and pages admin - link outlines are hard to see in full
• Archive/delete button in linkfield focus state was noted as "not correct"
• Various elements in the history tab, especially when comparing two versions
• Dropdown for field type in CMS for user forms form fields
• Dropdowns for field name and comparison type when adding custom display rules in userforms
• Highlighted options in "select upload field" dropdown for file upload editable field in userforms. that item isn't focused - in a dropdown it's the actual select element that's focused not the individual options.
• Buttons in login form (login-forms module) and MFA form (check the whole flow incl reset password)
• input fields in login form (login-forms module)

Notes

• Seek designer input on what the consistent outline should be - and if some elements should have different outlines.
• Some elements may need a different outline if their background or border colour would not have enough contrast against the focus outline. Seek designer feedback for these elements especially

Acceptance criteria

• Focus outlines are consistent across the CMS
• Focus outlines are displayed for all interactive elements when they have focus
• Focus outlines meet accessibility contrast standards
• The changelog clearly calls out that developers may want to check their custom CSS matches the new focus states

PRs

• ENH Update focus states to be consistent silverstripe-admin#2089
• ENH Update focus states to be consistent silverstripe-versioned-admin#449
• ENH Update focus states to be consistent silverstripe-advancedworkflow#616
• ENH Update focus states to be consistent silverstripe-elemental#1397
• ENH Update focus states to be consistent silverstripe-campaign-admin#386
• ENH Update focus states to be consistent silverstripe-mfa#628
• ENH Update focus states to be consistent silverstripe-login-forms#232
• ENH Update focus states to be consistent silverstripe-tagfield#340
• DOC Note changes to focus states developer-docs#862

[cassiezoest]

I think for most elements, having the same focus state will be okay. I'd suggest going with a full outline in a dark blue colour.

Whatever default colour we're currently using seems to have good/sufficient contrast with light backgrounds. For dark backgrounds such as the top of the lefthand sidebar which shows the site name/username/logout button, we should use a white outline.

For coloured buttons such as Save/Publish, we will need a bit of an offset so that the outline doesn't touch the button itself. For grey/white buttons an offset probably isn't needed.