As a career changer, DEV has played a big part in my development as a Software Engineer. The DEV Community Bug Smash seemed like the perfect opport...
For further actions, you may consider blocking this person and/or reporting abuse
Great job, two things I noticed which may or may not be related to your work (they may always have been issues!)
On the home page if you change the feed to Week, Month etc. the skip link is focused again. I am guessing it is because there is a URL change and that is where the focus hook is? A similar issue occurs on the notifications page if you switch between comments, posts etc, it jumps back to the skip link.
Podcasts skip links do not work when on an actual podcast page. There are loads of errors in the console on that page so it might be nothing to do with the skip link itself.
If they are nothing to do with what you have done my apologies, I never checked the skip links until now and I do not want to detract from the improvements you have made! ❤🦄
There's a follow up about the same issue on search
Describe the bug
When I hit "return" on desktop to make a search on the platform, I see the keyboard nav "skip to content" element show up.
To Reproduce
Expected behavior
This element should not become visible.
Screenshots
Desktop (please complete the following information):
I think it's possibly expected behaviour for changing tabs as it does reset keyboard focus.
As for the podcast page I think the page itself needs looking at, I can't see a way to start a podcast without the mouse. I don't think it's related to this PR though.
Changing tabs shouldn't reset focus as it is all done via AJAX, instead you should either use
aria-liveand say "loaded" when complete or focus the first item in the list (SPA pattern).That issue you quoted is a tough one with the current pattern. I would suggest on that page that nothing is focused initially and the first Tab press is used to activate the skip links as there is no real way of differentiating keyboard and mouse users.
To be fair the whole pattern is a little unusual, I like it, but normally on navigation you would expect nothing to be focused on a page change and the first tab to show the skip link.
On a SPA application you would expect the
<h1>of the page to be focused once loading is complete.As Dev.to is a hybrid I think the solution implemented is a nice balance and the work done on this is great, just some minor points which may be there own issues.
The pattern was taken from this blog post.
I will have a proper read but I dont see an
aria-liveregion in the elements tab in dev tools to indicate the current page?From a skim read that looks to be the pattern they settled on?
SKip link focused, aria-live to notify of current page?
I might be missing it though as I am not on my main PC and it is hard to assess from here.
Under "Recommendations: finding common ground"
The tabs on the home feed aren't true "tabs" in the usual sense of toggling a small section of page visibility - they're actually links within a
navand clicking on them results in a fresh page load, which is why a user would need a skip link to get them back to the main content with ease.Looks like a page was missed when implementing the skip links! We'll get a quick fix up for that ASAP - nice spot 🙌
I remember seeing the more mature issue linked to my pre-forem, proto-issue and I was so happy to see someone tackling it! Well done!
Congrats on your first contribution to Forem!