Render annotation cards as list items

[acelaya]

Relates to #6185

This PR is an attempt to improve the annotation cards semantics, by rendering them as list items (<li />) inside an unordered list (<ul />).

This is the simplest solution from the ones suggested in#6185. However, I have to admit I haven't been able to fully verify this makes a difference for assistive technologies.

It should have no visual changes.

The other solutions would be a bit trickier, as the component which renders the article[aria-label] is deeply nested down the component tree, compared to the component that iterates annotations and therefore knows the index (ThreadList -> ThreadCard -> Thread -> Annotation).

This gets even more inconvenient if we want to index annotations per users (not globally), which would require moving some logic up the component tree in order to do that.

Another option would be to make the Annotation component pull all annotations from the store, filter those belonging to the same user, and then trying to compute the index, but this would be slightly inefficient.

Note

It's easier to review this PR ignoring whitespaces

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (1e58310) 99.44% compared to head (5b56408) 99.44%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6195   +/-   ##
=======================================
  Coverage   99.44%   99.44%           
=======================================
  Files         266      266           
  Lines       10146    10146           
  Branches     2403     2403           
=======================================
  Hits        10090    10090           
  Misses         56       56           

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

[robertknight]

This won't work because the thread list is virtualized, ie. the set of rendered items changes as you scroll the list. Additionally I wouldn't just assume that screen readers will render this combination of article-inside-ul in a helpful way. It needs to actually be verified.

One thing I will note is that we don't have to include a number in the article title to solve a problem, we just need some way of differentiating annotations. A number does have the advantage of being short, but a date + time could be a first step. For annotations the first few words of the quote could also work, though this won't work for page numbers.

[acelaya]

One thing I will note is that we don't have to include a number in the article title to solve a problem, we just need some way of differentiating annotations. A number does have the advantage of being short, but a date + time could be a first step. For annotations the first few words of the quote could also work, though this won't work for page numbers.

I'll try to put some thought on how can we improve annotation label specificity.

That said, I think using an unordered list for the thread list is probably the semantically right option, even if it doesn't help solving this particular issue. What do you think?

[acelaya]

I'm going to close this to focus on the actual issue.