Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Web Profiler] Improve accessibility of web profiler toolbar #38205

Closed
nicodemuz opened this issue Sep 16, 2020 · 4 comments
Closed

[Web Profiler] Improve accessibility of web profiler toolbar #38205

nicodemuz opened this issue Sep 16, 2020 · 4 comments
Labels
Bug Status: Needs Review WebProfilerBundle

Comments

@nicodemuz
Copy link
Contributor

Symfony version(s) affected: 5.x

Description
pa11y-ci accessibility tool reports errors related to Symfony toolbar. pa11y-ci can be found at:
https://github.com/pa11y/pa11y-ci

How to reproduce
pa11y-ci http://127.0.0.1:8000

 • Anchor element found with a valid href attribute, but no link content has been supplied.

   (#sfToolbarMainContent-8eb6d2 > div:nth-child(2) > a)

   <a href="http://127.0.0.1:8000/_profiler/8eb6d2?panel=api_platform.data_collector.request"> <div class="sf-toolbar-...</a>

 • 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.13:1. Recommendation:  change text
   colour to #fff.

   (#sfToolbarMainContent-8eb6d2 > div:nth-child(3) > a > div > span:nth-child(2))

   <span class="sf-toolbar-value">6862</span>

 • 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.13:1. Recommendation:  change text
   colour to #fff.

   (#sfToolbarMainContent-8eb6d2 > div:nth-child(4) > a > div > span:nth-child(2))

   <span class="sf-toolbar-value">66.0</span>

 • 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.13:1. Recommendation:  change text
   colour to #fff.

   (#sfToolbarMainContent-8eb6d2 > div:nth-child(6) > a > div > span)

   <span class="sf-toolbar-value">39</span>

 • 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.13:1. Recommendation:  change text
   colour to #fff.

   (#sfToolbarMainContent-8eb6d2 > div:nth-child(8) > a > div > span)

   <span class="sf-toolbar-value">47</span>

Possible Solution
Adjust colors slightly on reported items.
Add link content on reported link.
@nicodemuz nicodemuz added the Bug label Sep 16, 2020
@fabpot
Copy link
Member

fabpot commented Sep 16, 2020

Would you like to work on this?

This was referenced Sep 17, 2020
Closed
Closed
@nicodemuz
Copy link
Contributor Author

@fabpot sure, see below PRs:
#38218
api-platform/core#3729

@fabpot fabpot closed this as completed Sep 17, 2020
@nicodemuz
Copy link
Contributor Author

After digging deeper, it seems like I had a CSS such as:

a {
    background-color: transparent;
}

Because of this, the contrast calculation was not working well:
pa11y/pa11y#442

For now, I excluded the toolbar from pa11y accessibility evaluation. I did this by adding a wrapper div in my body:

<body>
    <div id="wrapper">
    </div>
</body>

After this, I configured pa11y to only evaluate beginning from the wrapper.

{
    "defaults": {
        "rootElement": "#wrapper"
    }
}

@stof
Copy link
Member

stof commented Sep 17, 2020

Regarding the label you add in your API Platform PR, I think that adding the aria-label on the SVG of the icon looks weird (and might cause issues if the icon is reused for another place than the toolbar item).
Instead, the rendering of the toolbar in Symfony could automatically add a label in panel links of the toolbar by putting aria-label="Access the {{ name }} panel" or something like that. And this would improve the accessibility of the toolbar for all panels at once, rather than doing it panel by panel.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug Status: Needs Review WebProfilerBundle
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@fabpot @stof @nicodemuz @xabbuh @carsonbot