Phase 1 shared-component accessibility remediation for search, header/nav, tabs, and pagination

[Copilot]

This PR implements the first shared-component-first accessibility pass across high-reuse UI primitives used throughout Bracco. It targets WCAG 2.1 AA gaps called out by WAVE/Lighthouse (form labeling, semantic controls, keyboard/focus behavior, and navigation semantics) without changing layout or branding.

• Shared search accessibility (model-search)

  • Added explicit programmatic labels for search input and sort select (labels are no longer placeholder-only).
  • Replaced clear-action non-semantic element with a keyboard-accessible <button type="button">.
  • Moved search/sort interactions to explicit handlers compatible with semantic form/select behavior.

• Shared header/navigation accessibility (application-header)

  • Added a reusable skip-link pattern before navbar (Skip to main content).
  • Replaced action-only sign-out anchor with a semantic button while preserving dropdown styling/behavior.
  • Kept logo image decorative within the already-labeled home link (alt="", aria-hidden="true").

• Shared tab navigation semantics (index-header, show-provider-tabs, show-repository-tabs)

  • Wrapped tab groups in labeled semantic <nav> landmarks.
  • Added route-driven active-state mapping via @current-when instead of relying on implicit/manual styling behavior.
  • Removed stale commented tab markup in repository tabs to reduce semantic/lint noise.

• Shared pagination accessibility (page-numbers)

  • Added semantic pagination landmark (aria-label="Pagination").
  • Replaced disabled non-semantic links with non-interactive text.
  • Added explicit labels for prev/next/page links and current-page semantics (aria-current="page").

• Centralized accessibility utilities (app/styles/local.css)

  • Added reusable :focus-visible outline treatment.
  • Added reusable skip-link styling.
  • Added shared semantic-control styles (.search-clear-btn, .dropdown-action) preserving existing visual language.
  • Added contrast-safe muted text utilities (.muted-readable, .text-muted-readable).

Example of the search/pagination semantic shift:

<label for="query" class="sr-only">{{this.searchLabel}}</label>
<Input id="query" ... />

<button type="button" id="search-clear" class="search-clear-btn" {{on "click" this.clear}}>
  <i class="fas fa-times-circle"></i>
</button>

<nav class="pagination-centered" aria-label="Pagination">
  ...
  <li class="active page-number" aria-label="Current page, page {{item.page}}">
    <span aria-current="page">{{item.page}}</span>
  </li>
</nav>

Original prompt

Implement the first phase of accessibility remediation in datacite/bracco using a shared-component-first strategy.

Focus ONLY on the following high-reuse shared components and utilities first:

1. app/components/model-search.hbs
2. app/components/model-search.js
3. app/components/application-header.hbs
4. app/components/application-header.js
5. app/components/page-numbers.hbs
6. app/components/index-header.hbs
7. app/components/show-provider-tabs.hbs
8. app/components/show-repository-tabs.hbs
9. app/styles/local.css

Goals:

• Improve WCAG 2.1 AA accessibility
• Reduce WAVE and Lighthouse errors
• Preserve the current UI/branding
• Avoid redesigning layouts

Implementation requirements:

1. Shared search accessibility

In model-search:

• Add explicit accessible labels for search inputs
• Add accessible labels for sort dropdowns
• Ensure placeholders are not the only labels
• Replace clickable span/action patterns with semantic buttons where appropriate
• Preserve existing Bootstrap/ember-bootstrap appearance

2. Shared navigation accessibility

In application-header:

• Replace action-only anchor elements with semantic buttons where appropriate
• Add keyboard-visible focus styles
• Add a reusable skip-link pattern before main navigation/content
• Preserve current navbar appearance and responsive behavior

3. Shared tab navigation

In index-header, show-provider-tabs, and show-repository-tabs:

• Improve semantic tab navigation behavior
• Prefer route-driven active state over manual DOM class mutation
• Ensure active/current tab accessibility semantics
• Preserve current visual styling

4. Shared pagination accessibility

In page-numbers:

• Replace non-semantic disabled pagination links
• Ensure pagination controls are keyboard accessible
• Add accessible labels where needed

5. Shared accessibility utilities

In app/styles/local.css:

• Add centralized :focus-visible utility styles
• Add reusable contrast-safe muted text utility classes
• Add reusable accessibility helper utilities only if needed
• Preserve existing branding/colors while improving readability

Important constraints:

• DO NOT redesign the UI
• DO NOT add large overlays or visual effects
• DO NOT rewrite unrelated components
• DO NOT massively restructure templates
• Keep changes incremental and reviewable
• Preserve ember-bootstrap conventions
• Preserve existing responsive behavior

Preferred accessibility patterns:

• semantic buttons instead of clickable spans/icons
• aria-label for icon-only controls
• visually-hidden labels where appropriate
• accessible keyboard focus indicators
• semantic navigation structure
• centralized reusable accessibility utilities

Please implement reusable/shared fixes instead of page-specific hacks, following the same incremental accessibility remediation philosophy used in DataCite Commons/Akita accessibility improvements.

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: @copilot Accepted Confirmation: Confirm cloud agent session

Assistant: Started — the final contrast fix has been queued against the existing PR only.

Track progress here:

data:
    - title: '[WIP] Fix remaining accessibility contrast errors on hero header'
      repository: datacite/bracco
      url: https://github.com/copilot/tasks/pull/PR_kwDOBb0Wo87cm_G6?session_id=d0823b10-b76f-4fbb-a0b9-25b0fb5b1f0f
      state: queued

Once it completes, I can help review whether PR #971 removed the white background from the hero title/subtitle and cleared the final 2 WAVE contrast errors.

User: ````

Fix accessibility issues found on:

http://localhost:4200/about

Current Lighthouse score: 90.

Issues found:

• Image elements do not have alt attributes
• Contrast issues
• WAVE shows missing first-level heading
• WAVE highlights the Fabrica logo image inside the home link

1. Fix Fabrica logo image alt text

File likely:

• app/components/application-header.hbs

Current rendered HTML:

<a href="/" class="navbar-brand title-inverted" aria-label="DataCite Fabrica home">
  <img src="/assets/images/fabrica-logo.svg" height="50" class="fabrica-logo">
</a>

The parent link already has an accessible name via aria-label, so the image should be treated as decorative.

Update the image to:

<img
  src="/assets/images/fabrica-logo.svg"
  height="50"
  class="fabrica-logo"
  alt=""
  aria-hidden="true"
/>

Do not remove the parent aria-label.

2. Add/fix first-level heading on About page

WAVE reports “Missing first level heading” on /about.

Find the About page template/component and ensure the page has a proper h1.

Likely files:

• app/templates/about.hbs
• app/components/about*.hbs
• related route/template files

Add or update heading structure so the page starts with:

<h1>About</h1>

Then ensure any section headings descend sequentially:

h1 → h2 → h3

Do ...

This pull request was created from Copilot chat.