#Drupal CMS a11y

Taking off the NeedsMoreInfo tag as I think I've dealt with that.

For folks not sure how to turn it on https://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-o...

For windows users, you can enable high contrast mode by following:
https://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-o...

I believe we're looking at:

.cms-installer .button:focus {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

Which is:
--color-focus: var(--gin-color-focus);

Which is:
--gin-color-focus: rgba(0, 125, 250, .6);

rgba(0, 125, 250, .6) converts to #007dfa99

Opacity is a problem for this. Many tools don't support it. For instance:

https://contrast-finder.tanaguru.com/result.html?foreground#007DFA&backg...

The report was for:
2.2:1 (#7EB2FD/#FFFFFF)

This should work:
--gin-color-focus: rgba(8, 113, 243, 1);

But someone could just provide something with opacity that is better.

Realised this was fixed in 🐛 Hidden fields accessible by keyboard navigation Active

Also discussed was an appropriate translation for: ein vorschlag zur güte

the_g_bomb → credited rkoller → .

Merged into 1.x and cherry-picked to 1.0.x. Thanks!

Looks perfect to me!

I'm seeing the same as you @pameeela. Four focusable elements when tabbing through:

1. Skip to content
2. Email field
3. Password field
4. Finish button

But... there is a visually hidden "Regional settings" between the password and button. This is on -dev. I don't know under what circumstances these are supposed to display and I know the language selection stuff has been removed. Again, I don't have context on that.

I'm using Chrome on Mac and that's not focusable for me, so perhaps a browser issue and we suspect rkoller was using Windows due to mention of High Contrast Mode is the parent ticket.

I raised this from somebody else's larger issue. Can anybody provide screenshots from Windows High Contrast Mode for this issue?

Sorry, I'm on a mac, so can't use Windows High Contrast Mode. Hopefully, some kind soul can provide some screenshots.

Code looks fine. Rebased and moving to RTBC assuming the tests will turn green.

Code looks fine, but would like front-ender sign off...

Thanks @dunx, I've gone through them and updated them variously. Several of them need more info (or for someone else who knows more about it to look at them!).

Looks like this applies specifically to the language drop down, which is no longer present.

Again not really sure how to fix this or honestly what it specifically refers to. Can anyone update with screenshots showing the issue and suggested fixes?

Not sure how to reproduce this. Not seeing any additional elements when tabbing, it goes straight from the password field to the finish button. If there is an additional focusable element that seems like a different bug, because I don't think there should be?

Not sure how to fix this one?

Updated to #8e929c for contrast of 3.11:1.

Thanks @dunx. Converting to a meta.

I've created 6 child issues with this as parent.

Point 1 https://www.drupal.org/project/drupal_cms/issues/3500930 🐛 Improve a11y of Drupal CMS installer - recipe checkbox contrats Active
Points 2 and 6 not raised as language selection no longer present.
Point 3 https://www.drupal.org/project/drupal_cms/issues/3500931 🐛 Improve a11y of Drupal CMS installer - focus clarity Active
Points 4 and 9 https://www.drupal.org/project/drupal_cms/issues/3500932 🐛 Improve a11y of Drupal CMS installer - missing focus Active
Point 5 https://www.drupal.org/project/drupal_cms/issues/3500935 🐛 Improve a11y of Drupal CMS installer - missing icons in high contrast Active
Point 7 https://www.drupal.org/project/drupal_cms/issues/3500933 🐛 Improve a11y of Drupal CMS installer - low contrast on buttons Active
Point 8 https://www.drupal.org/project/drupal_cms/issues/3500934 🐛 Improve a11y of Drupal CMS installer - buttons with poor focus Active

Hopefully I've included all the required info. I re-used the same images and alt text ;)