[pa11y-ci] Add 'hideElements' rules to hide all pa11y errors #35242
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
julien-deramond
changed the title
Member
|
@julien-deramond thanks for the PR! I'm going to rebase the base branch later so you will need to rebase this too. I'd say it'd be better if you proceeded with the fixes so that we get an idea of what needs to be fixed. Perhaps the footer contrast fixes could land separately on main, though. |
XhmikosR
force-pushed
the
main-xmr-pa11y-ci
branch
2 times, most recently
from
0270b71 to
1884e36
Compare
julien-deramond
force-pushed
the
main-xmr-pa11y-ci-jd-add-hideElements
branch
from
f2147dc to
3d67ffe
Compare
Member
Author
|
@XhmikosR Yes, I was thinking this PR as a tracker:
When all errors have been studied (fixed or hidden) this PR would be safe to merge (apart from the technical issues mentioned in your original PR and copied in this one's description). |
Member
|
I pushed another patch which attempts to make use of the new reporter option. It doesn't seem to work, though. |
This comment has been minimized.
This comment has been minimized.
Member
Author
|
Note to myself: modify this PR after the merge of #35894 which should fix some a11y errors found by pa11y. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Context
Tried it first in this PR in my forked version of Bootstrap among other things — All check have passed.
There are still several TODO topics to tackle in #29315.
The target of this PR would be
main-xmr-pa11y-ci.I chose here to focus on having a green pa11y-ci job by hiding all elements reported as issues; it would help us to track the new issues that will be merged into
mainwhile trying to fix the current ones.Indeed,
pa11y-ciis a bit unstable at the moment and it becomes easier to check regression if you know that the job can be green (everything is OK) instead of having to analyze the red one that can be a regression or a crash...I was thinking of the following process:
Fix existing issues
hideElementsrule, analyze it, define if it is a real issue and fill the table below with the analysis in the last column.hideElementsrule.Handle new issues
After each rebase of the
main-xmr-pa11y-ci, the pa11y-ci job would be executed by GitHub CI. If we observe new issues in the artifact: we should write a newhideElementsrule and add a new line in the table below.Pa11y issues tracker
Total without any
hideElements: 568 errorsLegend
hideElementsrulehideElementsruleMissing submit button in Algolia search form
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<form class="bd-search position-relative me-auto"> <span class="algolia-aut...</form>hideElementsrule.bd-searchtype="submit"HTML element associated to the form so we probably cannot do anything about it and must keep this rule.Insufficient contrast for text muted in the footer
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 4.45:1. Recommendation: change background to #fafbfc.<li class="mb-2">Designed and built with all the...</li>hideElementsrulefooter > div > div > div:nth-child(1) > ul > liInsufficient contrast for "Bootstrap" in the footer
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 4.27:1. Recommendation: change background to #fff.<a href="https://getbootstrap.com/">Bootstrap</a>hideElementsrulefooter > p > aInsufficient contrast for green text with gray background
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 4.3:1. Recommendation: change background to #feffff.<strong class="text-success">Correct</strong>hideElementsrulediv:nth-child(4) > main > div:nth-child(3) > div:nth-child(9) > div > strongInsufficient contrast for warning outline buttons on white background
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.63:1. Recommendation: change text colour to #967100.<button type="button" class="btn btn-outline-warning">Warning</button>hideElementsrulebutton.btn.btn-outline-warning, button.btn.btn-outline-info, button.btn.btn-outline-lightSome of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.Insufficient contrast for outline search button in Examples > Carousel
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.4:1. Recommendation: change background to#10509.<button class="btn btn-outline-success" type="submit">Search</button>hideElementsrulenav.navbar-dark.bg-dark button.btn.btn-outline-successInsufficient contrast for gray text with light gray background in Examples > Cheatsheet
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 4.45:1. Recommendation: change background to #fafbfc.<h2 class="h6 pt-4 pb-3 mb-4 border-bottom">On this page</h2>hideElementsruleaside > h2Missing legend element in fieldset in Examples > Cheatsheet
Fieldset does not contain a legend element. All fieldsets should contain a legend element that describes a description of the field group.<fieldset disabled="" aria-label="Disabled fieldset example"> <div class="mb-3">...</fieldset>hideElementsrulefieldset *:not(legend)doesn't seem to work so#disabled-forms > div:nth-child(2) > div > form > fieldsetMissing submit button in Example > Cheatsheet > Floating labels
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.<form> <div class="form-flo...</form>hideElementsruleform:not(:has(> [type=submit]))doesn't work so#floating-labels > div:nth-child(2) > div > formInsufficient contrast for nav pills used in Examples > Cheatsheet > Scrollspy
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 4.27:1. Recommendation: change background to #fff.<a class="nav-link" href="#scrollspyHeading2">Second</a>hideElementsrule.navbar.navbar-light > .nav.nav-pills > li > a.nav-linkInsufficient contrast for green texts in Examples > Checkout
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 4.3:1. Recommendation: change background to #feffff.<h6 class="my-0">Promo code</h6>hideElementsrule.bg-light > .text-successInsufficient contrast for disabled dropdown item in Components > Dropdowns
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.07:1. Recommendation: change text colour to #6f777f.<a class="dropdown-item disabled">Disabled link</a>hideElementsruleul.dropdown-menu > li > a.dropdown-item.disabledInsufficient color contrast for light links with light background in Helpers > Colored Links
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.63:1. Recommendation: change text colour to #967100<a href="#" class="link-warning">Warning link</a>(same thing forlink-infoandlink-light) (see outline buttons)hideElementsrulea.link-warning, a.link-info, a.link-lightSome of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.Insufficient contrast for search button with green outline in Components > Navbar
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 4.3:1. Recommendation: change background to #feffff.<button class="btn btn-outline-success" type="submit">Search</button>(same forbtn-outline-secondaryandbtn-outline-primary)hideElementsrulenav.navbar.navbar-light.bg-light .btn.btn-outline-success, nav.navbar.navbar-light.bg-light .btn.btn-outline-secondary, nav.navbar.navbar-light .btn.btn-outline-primaryDuplicate "constructor" id in Components / List Group
Duplicate id attribute value "constructor" found on the web page.<h4 id="constructor">constructor<a class="anchorjs-l...</h4>(I chose one to hide)hideElementsruleh4#constructor<h4 id="constructor">via#### constructor. Changing the id removes the error but we don't want to change the title just for that.Insufficient contrast for text muted with light background in Examples > List Groups
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 4.45:1. Recommendation: change background to #fafbfc.<small class="d-block text-muted"> <svg class="bi me-1" w...</small>hideElementsrulelabel.bg-light .text-mutedInsufficient contrast for nav pills used in Components > Scrollspy
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 4.27:1. Recommendation: change background to #fff.<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>hideElementsrulenav.navbar-light.bg-light nav.nav.nav-pills > a.nav-linkInsufficient contrast for text muted with light background in Examples > Dashboard
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 4.45:1. Recommendation: change background to #fafbfc.<span>Saved reports</span>hideElementsrule.sidebar.bg-light .text-mutedMissing submit button in Forms > Floating Labels
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.<form class="form-floating"> <input type="email" class="f...</form>hideElementsruleform.form-floatingTODO: Add a title
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 4.45:1. Recommendation: change background to #fafbfc.<button class="btn btn-outline-secondary" type="button">Example button</button>hideElementsrule.bg-light .btn.btn-outline-secondaryTODO: Add a title
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.<form> <input class="form-c...</form>hideElementsrulediv[id^=navbarsExample] > formTODO: Add a title
Anchor element found with a valid href attribute, but no link content has been supplied.<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none"> <svg class="bi me-2" w...</a>hideElementsrulemain > header > div > div > a, main > div > header > a, main header > div > div > div > aTODO: Add a title
This textinput element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined. /// This form field should be labelled in some way. Use the label element (either with a "for" attribute or wrapped around the form field), or "title", "aria-label" or "aria-labelledby" attributes as appropriate.<input type="text" class="form-control" placeholder="Promo code">hideElementsruleinput.form-control[placeholder='Promo code'], input.form-control[placeholder='رمز ترويجي']TODO: Add a title
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 4.45:1. Recommendation: change background to #fafbfc.<span class="text-muted">(Optional)</span>hideElementsrule.bg-light form small.text-muted, .bg-light form span.text-mutedTODO: Add a title
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 4.45:1. Recommendation: change background to #fafbfc.<p class="mb-1">© 2017–2021 Company Name</p>hideElementsrule.bg-light footer.text-muted > pTODO: Add a title
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 4.27:1. Recommendation: change background to #fff.<a href="#">Privacy</a>hideElementsrule.bg-light footer > ul > li > aTODO: Add a title
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.<form class="p-2 mb-2 bg-light border-bottom"> <input type="search" cla...</form>hideElementsrule#dropdownFilter > div > formTODO: Add a title
This button element does not have a name available to an accessibility API. Valid names are: title undefined, element content, aria-label undefined, aria-labelledby undefined.<button class="btn cal-btn" type="button"> <svg class="bi" widt...</button>and other elements of#dropdownCalendarhideElementsrule#dropdownCalendar > div > div > div > select, #dropdownCalendar > div > div > div > buttonTODO: Add a title
Anchor element found with a valid href attribute, but no link content has been supplied.<a>in footers<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"> <svg class="bi me-2" wid...</a>hideElementsrulefooter > p + a[href='/'], footer > div > a[href='/'], footer ul > li > a[href='#']TODO: Add a title
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.<form> <h5>Subscribe to our...</form>hideElementsrulediv:nth-child(10) > footer > div:nth-child(1) > div:nth-child(4) > formTODO: Add a title
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.63:1. Recommendation: change text colour to #967100.<p class="text-warning"> No grid classes are nece...</p>hideElementsrulep.text-warningTODO: Add a title
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.29:1. Recommendation: change text colour to #fff.<a href="#" class="nav-link px-2 text-secondary">Home</a>hideElementsruleheader div.bg-dark a.text-secondary, header.bg-dark a.text-secondaryTODO: Add a title
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.<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3"> <input type="search"...</form>hideElementsruleheader:nth-child(8) > div > div form, header:nth-child(10) > div > div form, header:nth-child(12) > div > div form, header:nth-child(16) > div form, header:nth-child(18) > div > div formTODO: Add a title
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 4.45:1. Recommendation: change background to #fafbfc.<small class="text-muted">By clicking Sign up, you agree ...</small>hideElementsruleform.bg-light small.text-mutedTODO: Add a title
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.29:1. Recommendation: change text colour to #fff.<p class="fs-5 mb-4">Quickly design and customize re...</p>hideElementsrulediv.bg-dark.text-secondary pTODO: Add a title
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 4.27:1. Recommendation: change background to #fff.<code>.container</code>hideElementsrule.bg-light codeTODO: Add a title
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 4.27:1. Recommendation: change background to #fff.<a href="/docs/5.1/examples/navbar-static/">top</a>hideElementsrule.bg-light aTODO: Add a title
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 4.45:1. Recommendation: change background to #fafbfc.<span class="text-muted">Place sticky footer content her...</span>hideElementsrulefooter.bg-light span.text-mutedTODO: Add a title
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.<form class="container-fluid"> <div class="input-group"> ...</form>hideElementsrulemain > div:nth-child(3) > div:nth-child(55) > nav > form, main > div:nth-child(3) > div:nth-child(59) > nav > form, main > div:nth-child(3) > div:nth-child(133) > nav > div > buttonTODO: Add a title
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 4.27:1. Recommendation: change text colour to #fff.<div class="opacity-100 p-3 m-2 bg-primary text-light fw-bold rounded">100%</div>hideElementsrule.opacity-100.bg-primary.text-light, .opacity-75.bg-primary.text-light, .opacity-50.bg-primary.text-light, .opacity-25.bg-primary.text-lightTODO: Add a title
Not all th elements in this table have a scope attribute. These cells should contain a scope attribute to identify their association with td elementshideElementsrulemain > div:nth-child(3) > table.table.text-centerTODO: Add a title
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 4.3:1. Recommendation: change background to #fbfbfb.<p class="mt-5 mb-3 text-muted">© 2017–2021</p>hideElementsrulebody > main > form > p.text-mutedTODO: Add a title
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.<form> <div class="mb-3"> <labe...</form>hideElementsrulemain > div:nth-child(3) > div:nth-child(49) > form