Improve keyboard navigation within the category page #6776
Conversation
foxbunny
commented
Feb 26, 2025
- Change the order of the sections in markup
- Use grid to control the layout
- Improve responsiveness of the main layout
- Add bypass block link to skip to sidebar (for news, etc.)
f0e1f70 to
64fcbed
Compare
|
Do you have some before/after screenshots for the main visual changes? Otherwise it's like playing spot 5 differences 😅 One thing I notice is that category title is no longer left-aligned, which is fine, but then I'd align it with the main content |
| } | ||
|
|
||
| .category-container { | ||
| font-family: 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif; |
There was a problem hiding this comment.
Wow, this nonsense setting a font not used anywhere else was there for 11 years and nobody noticed... thanks for removing it! :D (it also made me spot some more legacy CSS in this file, such as the li h3 which has been completely unused for 11 years as well)
It shouldn't have any visual changes by default (except maybe accidental). You should see that the category page layout is now responsive compared to before (chops down when screen becomes narrow). The key change is that the focus order is left-to-right as on the screen rather than right-to-left as it was before.
Oh yeah, I did tuck that in. |
|
Could you look into aligning the title more nicely? That's the only thing missing for merging this PR. |
64fcbed to
f6873dc
Compare
|
There are some minor margin/padding changes which is fine, but the category list is a bit off-center now which looks a bit off IMO. Can we keep it centered? |
Can you point me to the list you're referring to? Also the display size you're testing at. Maybe that's got something to do with it. |
|
This is on master: Notice that the main content (the category list) has moved to the left. There are also some padding changes. This is on a 2560x1440 screen |
|
I forgot that sidebar is not there by default, thanks for catching that. I've added the fix for that. |
- Change the order of the sections in markup - Use grid to control the layout - Improve responsiveness of the main layout - Add bypass block link to skip to sidebar (for news, etc.)
This resulted in the sidebar element being rendered, which was ugly before (but barely visible unless you knew it was there), but now with this PR it became much more visible
6599a92 to
b94831b
Compare