Modify search results for accessibility & layout

[jvine]

These changes are mostly accessibility-driven with some minor visual adjustments.

• 1. Remove the .stretch-link styling on the expand button

  • Interaction may seem similar to MyLibrary, but it's not appropriate here. It's not likely the primary action for the title, and the large clickable area means users are likely to activate it expecting the title link. And it obscures the hover text for the icons.

• 2. Move the expand button to the end of the title (in the DOM, not just in the flex order), outside the <h3>

  • Again, expanding the summary is not the primary action for the row, and the screen reader encounters an action without context before hearing the title it applies to.
  • I had a hard time making the button appear properly when it's outside the <h3> ... apologies and good luck.

• 3. Remove the 0 padding styles on the button and allow default button padding. (See focus outline.)

  • Without default button padding, the mouse target is too small.

• 4. Add aria-label="Toggle summary" to the button

  • Currently it has no text equivalent, so just reads as "button".

• 5. Change .documents-list .document {border-bottom: 1px dotted #dee2e6} to solid

  • Give the line the same weight as the other lines on the page; dotted lines can be tricky for some vision issues.

• 6. Increase .pl-2, .px-2 {padding-left: 0.5rem !important; to 1rem

  • Fixes the left alignment so content isn't hanging out into the left margin

• 7. Consider allowing the titles to wrap.

  • Using the title element to display the entire title is not satisfactory: many users won't encounter it, and keyboard users can't trigger it - so for sighted keyboard users, there is no way to see the complete title in the results list. In many titles the differentiating information (e.g. date or level of detail) is at the end. I know the goal is to keep the list compact and aligned with the map, but IMO too much information is lost. We can explore other ways of making the title appear in full on hover/focus (without a wait, and without disturbing movement or animation), but they will be hard, and the most expedient solution is just to turn off overflow:hidden.

• 8. And if you do that, you can remove the title attribute from the link, as it's redundant and generates a11y warnings (not errors).

• 9. Add a 30px margin between the last result and the pagination section.

[Nick Budak]

closing since PR was merged