feat: topics loop selection and tabbing A11y

[UnknownSean8]

Contributor checklist

• This pull request is on a separate branch and not the main branch

---

Description

This should allow the selection of topics to loop while navigating using arrow keys.

This PR also fixes the problem where tabbing will go to the next component instead of a fixed component.

Related issue

• Expand a11y of CardTopicSelection #527

[netlify]

✅ Deploy Preview for activist-org ready!

Name	Link
🔨 Latest commit	610080c
🔍 Latest deploy log	https://app.netlify.com/sites/activist-org/deploys/65b82506653a98000868f7a9
😎 Deploy Preview	https://deploy-preview-664--activist-org.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Thank you for the pull request!

The activist team will do our best to address your contribution as soon as we can. The following is a checklist for maintainers to make sure this process goes as well as possible. Feel free to address the points below yourself in further commits if you realize that actions are needed :)

If you're not already a member of our public Matrix community, please consider joining! We'd suggest using Element as your Matrix client, and definitely join the General and Development rooms once you're in. It'd be great to have you!

Maintainer checklist

• The commit messages for the remote branch should be checked to make sure the contributor's email is set up correctly so that they receive credit for their contribution

  • The contributor's name and icon in remote commits should be the same as what appears in the PR
  • If there's a mismatch, the contributor needs to make sure that the email they use for GitHub matches what they have for git config user.email in their local activist repo

• The TypeScript and formatting workflows within the PR checks do not indicate new errors in the files changed

• The CHANGELOG has been updated with a description of the changes for the upcoming release and the corresponding issue (if necessary)

[andrewtavis]

Heyo @UnknownSean8 👋 Generally the changes are good, but I'm noticing that we're not switching to the first topic anymore if we've navigated with the arrow keys to a different one. We instead switch back to the last one that was focussed, which isn't inherently bad, but then we'd want it to go to the first if say the person filters and then we want them to go to the first topic instead of the one that's in the position they were just on. What's more, we now don't tab into the topics selection if the topic that was last focussed isn't in the filter results. So from the base view type ac and we can switch to Accessibility, but if we type an such that Accessibility is no longer visible then we jump directly to the check box. Let me know what your thoughts are on this!

[UnknownSean8]

Ahh, I got what you mean. I missed some testing before pushing the commits. I'll fix it up ASAP. Thanks!

[UnknownSean8]

Hi @andrewtavis, I've done the A11y implementation for the topics.

One remaining problem is an edge case where the topic will lose focus if the user enters the first topic after navigating the topics. Other than that is working all as expected.

Steps to reproduce:

1. Tab into the topics
2. Navigate to the ~3rd/4th topics
3. Select 2-3 topics
4. Shift-Tab back to the input
5. Tab back into the topics
6. Select the first topic
7. Focus will go missing until the Tab is pressed again

I will continue to look into this. Maybe I can create a new issue regarding this?

Thank you.

[andrewtavis]

Yes by all means, @UnknownSean8! Feel free to make a new issue and I'll bring this PR in. We can put help wanted on the issue and maybe someone will have a suggestion. Don't worry too much about this edge case though. It's all great what you're doing 😊

[andrewtavis]

Hey @UnknownSean8 :) Am realizing one thing that the up and down arrow behavior that you were showing me during Code Brunch 🍞☕ seems to not be working. When I try to do it on the top row it just ends up cycling through the top row elements as if I were pressing left or right. If fixing this is going to cause a headache, could we just remove the ability to navigate with the up and down arrow on desktop?

Thanks!

[UnknownSean8]

Hi @andrewtavis, I don't seem to encounter this issue. Could you show me what steps you have taken, video or maybe a call?

Thanks :D

[andrewtavis]

Sure thing on a call! Want to jump into the sync?

[UnknownSean8]

Sure!

[andrewtavis]

Really amazing stuff here, @UnknownSean8 😊 So happy to have had you specifically working on this one! Has turned out so well 🥳 Bringing this in and closing it up!