Hey Anna - lovely job as always.
This is my go to resources for tabbed interfaces: https://inclusive-components.design/tabbed-interfaces/ - as ever with Heydon, very in depth.
When finding this I also saw this link which might be of interest? (I don't know Svelte so not sure how good it is.) https://github.com/aral/heydons-inclusive-tabbed-interface-in-svelte
One small issue on the tabs is that I sometimes get a flash of the previously rendered text or photo when selecting different options. Just a small point though.
Cheers Dave
Marked as helpful
@brasspetals
Posted
@dwhenson Hi, Dave! Thanks for taking the time to look at my solution, and for sharing those resources! π
Ack! That flash is what I was talking about with my animation concern and wanting to find a way to preload image srcsets from pictures. It's all because the content for that section is dynamically generated depending on which tab is active, so the content has to load. I did have an animation delay and even a hidden class to help compensate, but I think I might have to rework the section (and here I thought I was being so clever!). π
Instead of dynamically generating content, I could put all the tab content in the DOM and toggle some hidden class along with the animations. I would imagine that would solve both the flashing and any accessibility issues. Might have to try out that tab componenent you found! Thanks again for looking into it! Just so happens my next project is a "tabbed" single-page web app, so your resources are well-timed!
Update: All the content is now in the DOM rather than dynamically loaded, so the flashing issue should be fixed. π€
@brasspetals I think the approach that you've taken now is in line with what Heydon recommends. The other advantage is that if JS fails then the user should still be able to see all the content.
I now seem to get one flicker (sorry!!) when I try after the page has loaded for the first time then everything works perfectly - even if I reload the page. If the content is in the DOM I'm not sure why this is?
Sorry, I'm just pointing out problems and not helping!!!
Cheers Dave
Marked as helpful
@brasspetals
Posted
@dwhenson No, no - it's good you're letting me know! You are definitely helping! I only wish I could replicate the issue. π There're a few things that might be causing it, but I'm going with the easiest (potential) solutions first. Would you mind testing out this version of the project and seeing if the issue is fixed? I am determined to get to the bottom of this!
@brasspetals - I just tested the alternative version in Chrome and Safari and it seems to work fine - no flicker!! Good one for pushing on with this! I hate these last little bits - they always seem to take forever!
Cheers Dave
Marked as helpful
@brasspetals
Posted
@dwhenson Awesome! Thank you so much for checking this for me! It's always been a concern of mine to have bugs I couldn't see/replicate (especially when it comes to animations), so it's massively helpful that you not only pointed out the issue, but also helped me fix it. Again, super appreciate it! π
@brasspetals glad you got it sorted! The project looks lovely!!
Cheers