Skip to content

Conversation

@acelaya
Copy link
Contributor

@acelaya acelaya commented Sep 23, 2025

Part of #6306

This PR brings back the changes from #5539 and #5570, that we then had to roll back because of the issues reported in https://github.com/hypothesis/support/issues/31

However, by implementing this again I cannot reproduce any of those issues anymore. Since the event handler ignores events not targeting the card itself, it should not be triggered while editing an annotation or interacting with other child controls.

TODO

  • Decide what is the right role for card elements. We originally used button, but I was never 100% sure about that.
    Bluesky uses link role for their posts in the feed, but we don't link anywhere from an anno card.
    Twitter uses article, which is what I provisionally used here.
  • Consider adding vertical arrow key navigation to cards, so that you can move the focus to the next/previous one via ArrowDown or ArrowUp.
    The regular tab sequence has a lot of elements, making it odd to move the focus between cards.
  • Add tests.

@acelaya acelaya force-pushed the sidebar-panel-trigger-titles branch from c3ff4c6 to 9bea91d Compare September 23, 2025 09:53
data-testid="thread-card"
elementRef={cardRef}
tabIndex={-1}
tabIndex={0}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make the element focusable, and be part of the regular tab sequence.

@codecov
Copy link

codecov bot commented Sep 23, 2025

Codecov Report

❌ Patch coverage is 0% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 99.41%. Comparing base (b0fb2d6) to head (acd3176).

Files with missing lines Patch % Lines
src/sidebar/components/ThreadCard.tsx 0.00% 6 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #7334      +/-   ##
==========================================
- Coverage   99.47%   99.41%   -0.06%     
==========================================
  Files         271      271              
  Lines       10968    10974       +6     
  Branches     2620     2624       +4     
==========================================
  Hits        10910    10910              
- Misses         58       64       +6     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@acelaya acelaya changed the title Sidebar panel trigger titles Make annotation cards focusable Sep 23, 2025
elementRef={cardRef}
tabIndex={-1}
tabIndex={0}
role="article"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TBD if article is the right role here.

@acelaya acelaya force-pushed the sidebar-panel-trigger-titles branch from 9bea91d to acd3176 Compare September 26, 2025 09:48
@acelaya
Copy link
Contributor Author

acelaya commented Sep 26, 2025

Superseded by #7339, as the branch name here is wrong

@acelaya acelaya closed this Sep 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants