Error page CSS and a11y improvements #41874
Merged
Conversation
This file contains 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
The toggle function relied on inline styles, but that method of toggle an element is not necessary. Relevant: classList is has ~99% browser support - https://caniuse.com/?search=classlist
These are super basic issues that were flagged by the axe browser extension. I tried to change as few things as possible to avoid breaking anything that might be making assumptions about the markup on this page. Generally, there is a lot more work that would need to be done on these pages to make them as friendly as possible to assistive technologies. Relevant: - https://dequeuniversity.com/rules/axe/4.1/landmark-one-main - https://dequeuniversity.com/rules/axe/4.1/color-contrast
|
@jacobherrington thanks for the improvements! 👍🏻 More than happy to look at other improvements to accessibility for these pages - what kind of things do you have in mind? |
|
@pixeltrix The issues that are automatically flagged by axe are probably the best places to start. There are some color contrast issues in the dark theme, for example. I can take care of those in another PR and I'll tag you as a reviewer when I do! It'd also be nice to make sure it's easy to navigate these pages with only a keyboard and to do some testing with a screenreader. Those are things I can definitely do soon 😄 I believe there are a few areas for improvement in https://github.com/rails/web-console as well. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
There are two main parts of this pull request:
1. Improvements to the existing CSS and removing inline styles
I noticed that there are quite a few inline styles in these templates.
Of course, that's not inherently wrong, but it does make it a little hard to find the CSS if you spot a bug and can cause bugs.
In order to make maintaining these templates a bit easier, I removed as many inline styles as possible (those which are not relying on erb). I believe this change fixes at least one styling bug where inline styles were competing with the styles defined in the layout.
Additionally, I eliminated a couple of unnecessary rules and tweaked a JS function so that it should behave more consistently.
2. Addressing (really, really) basic accessibility issues
I intentionally tried not to change any selectors that folks might be making assumptions about on this page, to avoid breaking any tools that might be floating around. However, the container
divs becamemains to address a lack of landmark elements.There are only two visible UI changes in this PR.
Line numbers were darkened slightly to increase color contrast (a11y):
An extremely light hover effect was applied to this link to indicate interactivity:
I'd like to make more drastic changes in support of making these pages more friendly to assistive technologies, but I don't want to invest the time if that's something the maintainers aren't willing to merge in the name of stability (as some changes might significantly modify the page).
Other Information