fix(a11y): move readme above sidebar in package view for mobile layout#1072
fix(a11y): move readme above sidebar in package view for mobile layout#1072knowler wants to merge 1 commit intonpmx-dev:mainfrom
Conversation
This is to solve a level A WCAG failure (SC 2.4.3).
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
📝 WalkthroughWalkthroughThis pull request adjusts the mobile layout grid structure in the package view component. The grid-template-areas order has been modified to reorder how sections are displayed on mobile devices. Specifically, the layout now positions the readme section and sidebar differently to ensure the visual grid order aligns with the document object model (DOM) order, addressing a focus order accessibility issue identified in the linked WCAG 2.2 compliance check. Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
knowler
changed the title
|
I agree that the order needs to be changed (discord), but I disagree about the reason. If the problem is only with A11Y, we need to change the order of the elements in the DOM (make <Sidebar> higher than <Readme>). As for the visual reordering, I think it's better to decide what experience we want to achieve (maybe for example collapsing sidebar sections on mobile devices is better) |
|
In #1072 (comment), @alexdln said:
If we did that it would cause the same WCAG failure for the “tablet” and desktop layouts because they would no longer match their grid order. Moving DOM specifically when the mobile breakpoint matches (i.e. using It’s that complexity and “whack-a-mole” problem that I’m trying to address with this PR. To make matters simple: DOM order must match the visual order for every breakpoint (without the help of JavaScript). I’m doing so at the cost of design, but it was a design that should never have been tenable because it did not consider accessibility. With all of that said, if we want to revisit the visual order that’s totally fine. The purpose of this PR less so to make a design change and more so to remediate the accessibility issue in a way that is most performant and universal (i.e. it works with whatever no-JS experience there is). |
It shouldn't. Navigation, toc, and priority elements to the right and left of main content are fairly standard practice. The current complaint was that focus jumping abruptly to the bottom of the page, and that shouldn't happen. With the option I'm talking about, focus should move correctly, since our right panel is sticky |
|
In #1072 (comment), @alexdln said:
That’s a really fair point.
With your option applied, I think the desktop view is fine. The focus jump remains in view. In the “tablet” view (I use a 14" laptop so I get this view if I open the vertical-tab-sidebar in my browser, which is pretty much always), it is a bit strange when the focus initially moves to the right column instead of the left column when traversing through the page. At this breakpoint, the “Getting started” + “vulnerabilities” sections are both comically wide when they don’t need to be. If we make both of them only take up one column and bump the sidebar up, that improves the experience to be more like desktop (and makes it look nicer IMO). Proposed grid layout change for tablet view
@media (min-width: 1024px) {
.package-page {
grid-template-columns: 2fr 1fr;
grid-template-areas:
'header header'
'details details'
- 'install install'
+ 'install sidebar'
- 'vulns vulns'
+ 'vulns sidebar'
'readme sidebar';
grid-template-rows: auto auto auto auto 1fr;
}
}What do you think?
I agree and, yes, I think collapsing the sidebar sections on mobile would be a good fix. |
|
lgtm about tablet (source) 
|
|
(marking as draft while you work on it) |
4 participants
Resolves #1069 which reports a WCAG 2.2 SC 2.4.3 Focus Order (Level A) failure.
See the linked issue. This PR goes with the easiest solution to the problem which is just making the DOM order match the visual order as that’s how the tablet/desktop view works (for screen readers). I am open to the other solutions I mentioned in the issue (someone else just might need to implement them).
As I mentioned in the issue, I think we could improve on the mobile experience by making the README section collapsible, at least on mobile. I did see the
<CollapsibleSection>component, however, the code for it made me think it might have been designed for the sidebar and might not work well for the README section.We can always hold this PR until we figure out a solution for that. This is such a small change that it shouldn’t be hard to update.