Docs accessibility fixes

[XhmikosR]

IMO we should backport these.

@patrickhlauke: there are probably more color and general accessibility issues, but I try to solve the issues in batches. There's one thing that bugs me:

This form does not contain a submit button, which creates issues for those who cannot submit the form using the keyboard. Submit buttons are INPUT elements with type attribute "submit" or "image", or BUTTON elements with type "submit" or omitted/invalid.

For the search form.

Preview: https://deploy-preview-29208--twbs-bootstrap.netlify.com/

[XhmikosR]

A few more syntax highlighting colors that fail right now:

1. #0a8 .nc
2. #099 .cp
3. #3aa .sr

Any suggestions welcome.

[MartijnCuppens]

Darkening the colors should be ok, I just did that in 200b0c0e80c70d7da4b686f08cc6d048608381ae

[XhmikosR]

@MartijnCuppens: not quite there yet :P The ratio seems to be 4.49 for .cp and .nc at least.

I personally use the https://squizlabs.github.io/HTML_CodeSniffer/ bookmarklet.

[MartijnCuppens]

I used Chrome's built-in colorpicker which can behave a little buggy it seems. Changed the values now

[XhmikosR]

I'll go through the pages tomorrow and see what else is left. I'm still not sure how to proceed with the search form.

[XhmikosR]

@patrickhlauke: friendly ping :)

[XhmikosR]

Alright, here's the list of the remaining syntax highlighting related issues:

• mf: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.79:1. Recommendation: change text colour to #3e1900. Was #ff6600, changed to #c24f19
• mh: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.79:1. Recommendation: change text colour to #3e1900. Was #ff6600, changed to #c24f19
• mi:This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.79:1. Recommendation: change text colour to #3e1900. Was #ff6600, changed to #c24f19
• nd: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.38:1. Recommendation: change text colour to #00003e. Was #9999ff, changed to #6b62de
• nf: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.98:1. Recommendation: change text colour to #32003e. Was #cc00ff, changed to #b715f4
• nn: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 1.8:1. Recommendation: change text colour to #00323e. Was #00ccff, changed to #007ca5

They seem a little tricky since they are dark already. Maybe the suggestions are wrong, so we need to be careful.

[XhmikosR]

I think this can be reviewed. We haven't heard from @patrickhlauke, so I guess we'll tackle the remaining stuff later.

@MartijnCuppens I changed the colors you changed, let me know if you agree with the new ones
@mdo @ysds please also have a look at the changes

[MartijnCuppens]

We better define the contrast color in theme-colors.yml instead of checking if the name is light or warning. Not sure if that should be tackled in this PR. If not, this LGTM

[XhmikosR]

How do you mean exactly? I think it would be better if we tackled it in a separate PR later, just don't forget about it.

For the time being, I just want another approval from @mdo or @ysds or @patrickhlauke

[XhmikosR]

Ping @mdo for review

[XhmikosR]

This looks good from my tests so far.

We need to double check these though:

.bd-callout-info { @include bs-callout-variant($bd-info); }
.bd-callout-warning { @include bs-callout-variant($bd-warning); }
.bd-callout-danger { @include bs-callout-variant($bd-danger); }

[patrickhlauke]

few more bits of low contrast i stumbled across while looking over https://deploy-preview-29208--twbs-bootstrap.netlify.com/ (some of these part of our core BS styles though, so not specifically documentation i guess)

[patrickhlauke]

the search form is probably tricky, as it's not really a form as such that you submit, but rather that you type in and get your results right away/supposed to select from the dropdown...bit of a quirky one.

i'd note though that there as well though, contrast starts to get quite low (around 4.3:1) for gray text on pink background. and the pink highlight color itself is barely distinguishable from the non-selected background

[XhmikosR]

Yeah this doesn't fix all of the issues. I'll try to tackle the rest in separate PRs.

…

On Mon, Sep 16, 2019, 22:27 Patrick H. Lauke ***@***.***> wrote: few more bits of low contrast i stumbled across while looking over https://deploy-preview-29208--twbs-bootstrap.netlify.com/ (some of these part of our core BS styles though, so not specifically documentation i guess) [image: non-text-content-low-contrast] <https://user-images.githubusercontent.com/895831/64986759-a596fe00-d8bf-11e9-9a66-5a486a2efbad.png> [image: 2to1] <https://user-images.githubusercontent.com/895831/64986760-a596fe00-d8bf-11e9-9edc-74676d483be3.png> [image: 3 4to1-4to1] <https://user-images.githubusercontent.com/895831/64986761-a62f9480-d8bf-11e9-9de3-c0a694adaefd.png> [image: 4 4to1] <https://user-images.githubusercontent.com/895831/64986762-a62f9480-d8bf-11e9-9bf1-bc7cf529584e.png> [image: 4 4to1-2] <https://user-images.githubusercontent.com/895831/64986763-a62f9480-d8bf-11e9-81ba-eb91fee4b364.png> [image: 4to1] <https://user-images.githubusercontent.com/895831/64986764-a62f9480-d8bf-11e9-8fc9-6db292b71434.png> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#29208?email_source=notifications&email_token=AACVLNKIQNJLI6ESWTD2RCLQJ7M3RA5CNFSM4IJLDGOKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD62HO6Q#issuecomment-531920762>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AACVLNPYHBQOJ6TEF2K2LF3QJ7M3RANCNFSM4IJLDGOA> .