Accessibility Issues with Off-Canvas dialog

I don't know if (1) and (4) are going to affect all possible content in the settings tray. Ideally I think we'd get a standard set of styles for the settings tray.

(5) I can't find #222222 anywhere. Which element is this about? #46a0f5-on-#222 has a fairly good contrast ratio of 5.8:1 (passes WCAG AA), but I don't know which element we're talking about.

The close button "X" has an inconsistent focus style.

In Webkit/Blink it has a solid blue border, with rounded corners. I can't see any CSS for it, so I assume it's the default browser style. It's a nice style, but we need to ensure the blue colour has sufficient contrast against #2d2d2d settings tray title background (.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar).
In Firefox, the close button has no discernible focus style. It's baffling, because I can't see any CSS which would override the default 1px dotted outline.
TODO: what does it look like in IE11 and Edge?

The button and link styles inside of the settings tray content are communicated by a slight colour change alone. If you avert your eyes from the screen, then look back again, it's not clear what has focus. This will likely be a failure of WCAG 2.1 SC 1.4.12 User Interface Component Contrast (Minimum).

Our blue-oval primary buttons in Seven get a halo when focused, which is clearer because it's a shape change. (The outlines which browsers provide by default also work this way.)

We need to review focus styles across the entire admin UI as part of #2864791: Implement new Success Criteria from WCAG 2.1. Tagging,

Note we also have #2863354: Add border to dialog [x] close button for hover and focus states for the other dialogs.

I created #2915759: :focus is is hard to see for links in the off-canvas dialog before not sure if we want to mark as a duplicate or keep it open.

Thanks @andrewmacpherson and @mgifford. The offcanvas library is marked stable because it doesn't expose anything to end users by itself, but Settings Tray will be the first module that exposes it to end users, so any serious accessibility issues need to be addressed before Settings Tray itself can be stable.

• From this list, I'd say the contrast ratio issue is the most serious if it's still present. It hurts my eyes, actually. I think it still needs an issue filed?
• I think the inconsistent styling for the focus highlighting for the [x] button is a bug, but core dialogs have a similar (worse?) issue in as reported in #2863354: Add border to dialog [x] close button for hover and focus states so that one doesn't need to be a stable blocker.
• I'm unsure about #2915759: :focus is is hard to see for links in the off-canvas dialog, but it definitely is a bug, and we probably need to take into account colors for it when fixing the contrast ratio anyway. The difficulty caused by that issue is probably compounded by the other tabbing issues (since it's difficult to predict where the focus will go and worse if you can't easily see where it's gone). As far as I understand from @tedbow the remaining tabbing issues are related to the Contextual module, but the fact that they're outstanding probably means the insufficient focus styling becomes serious enough to block stable.

Since we sort of have two metas, this and #2928409: [META] Accessibility issues for Settings Tray , my suggestion would be to mark this as a duplicate once a dedicated issue is filed for the contrast ratio.

Thanks everyone!

Created #2934178: Contrast issues with off-canvas dialog styling to address the contrast ratio issues.

Alright, I updated #2928409: [META] Accessibility issues for Settings Tray and I think that's enough to mark this as a duplicate. Thanks everyone!

Ah wait, I think we need to file one more issue for the close button to match the new designs for the dialog system. Once it's filed (doesn't need to be fixed) then we can mark this as a dupe.