Skip to content

Add descriptive alt text on work and file-set representative media accessibility#1203

Merged
haitzlm merged 1 commit intodevelopfrom
add-alt-text-individual-work-thumbnails
Apr 10, 2026
Merged

Add descriptive alt text on work and file-set representative media accessibility#1203
haitzlm merged 1 commit intodevelopfrom
add-alt-text-individual-work-thumbnails

Conversation

@Janell-Huyck
Copy link
Copy Markdown
Contributor

@Janell-Huyck Janell-Huyck commented Apr 10, 2026

Summary

This branch improves accessibility (including common WAVE findings) across Hyrax views and the app shell, adds meaningful alt text for representative thumbnails on work and file-set pages, and tightens the notifications badge behavior for screen readers. View and helper specs are added or updated to lock in the new markup.

Motivation

  • Thumbnails on work/file-set show pages should expose useful alt text instead of generic or missing descriptions.
  • Several UI patterns produced empty headings, unlabeled controls, or redundant navigation links that hurt accessibility tooling and assistive tech.
  • The unread notification count badge should not announce “0” when there is nothing to report, while still showing a visible count when messages are unread.

Changes

Thumbnails and representative media

  • Override Hyrax hyrax/file_sets/media_display partials for image, PDF, and office documents to pass alt: thumbnail_alt_text_for(...).
  • Update hyrax/base/_representative_media.html.erb so the default representative image uses the same alt helper.

Shell and Hyrax UI accessibility

  • Search: Add a proper <label> (visually hidden where appropriate) for catalog and “my” dashboard search forms.
  • Work show actions: Associate a sr-only label with the batch checkbox and add aria-label for “include work in collection” / batch selection semantics.
  • Parent relationships: Only render the relationships <h2> when parent works exist (_parent_relationship_table).
  • Collection show (public and dashboard): Render the search-results heading only when search parameters are present, avoiding an empty <h2>.
  • User menu: Improve dropdown semantics (role, aria-*, menuitem) and wire the toggle to the menu it controls.
  • Toolbar: Use non-navigating dropdown toggles for “My Works” / “My Collections” so each destination appears once as a real link (Bootstrap 3–compatible).

Notifications

  • Extract notification_count_badge from render_notifications in HyraxHelper.
  • When the unread count is zero, render an empty badge span with aria-hidden="true" and invisible styling; when positive, show the numeric count with the danger label and no aria-hidden.

Locales

  • Add English strings in config/locales/hyrax.en.yml for new user-visible copy tied to the above views.

Tests

  • New specs for media display partials, representative media, show actions, and parent relationship table.
  • Extended specs for toolbar, user util links (including unread notification badge behavior), search forms, collection show pages, and notification_count_badge in hyrax_helper_spec.

Wave view of item detail page. Includes 1 warning for a duplicate link that cannot be fixed without more in-depth JavaScript rework.
Screenshot 2026-04-10 at 1 56 56 PM

overriding Hyrax file_set media_display partials (image, PDF, office)
and the base representative media partial, using thumbnail_alt_text_for.
Copy link
Copy Markdown
Contributor

@haitzlm haitzlm left a comment

Choose a reason for hiding this comment

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

Excellent work on remediation. All tests passed, who am I do doubt what they did?

@haitzlm haitzlm merged commit 8d5910d into develop Apr 10, 2026
5 checks passed
@Janell-Huyck Janell-Huyck deleted the add-alt-text-individual-work-thumbnails branch April 10, 2026 18:29
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