Add accessible toolbar component by joshsadam · Pull Request #50 · phac-nml/pathogen-view-components

joshsadam · 2026-05-27T14:53:12Z

What does this PR do and why?

Adds a shared Pathogen::Toolbar component so apps get one accessible, consistent action row for grids, panels, and dialogs.
Supports grouped buttons, a search field, separators, and spacer-driven reflow, with full keyboard navigation (arrow keys, Home/End) following the ARIA toolbar pattern.
Closes Add Pathogen::Toolbar component for accessible control groups above grids #49

Screenshots or screen recordings

Within IRIDA Next

More available in lookbook previews

How to set up and validate locally

bin/test test/components/pathogen/toolbar_test.rb
pnpm test test/javascript/controllers/toolbar_controller.test.js
pnpm run build:css:check
Run bin/dev, open Lookbook, and check the Toolbar Overview and Full-width & reflow previews.
Tab into a toolbar, then use arrow keys and Home/End to move between items and confirm focus stays visible.

Test within IRIDA Next

Checkout branch pathogen/toolbar (integration branch for toolbar adoption; may still be in progress)
Point the Gemfile at your local pathogen-view-components checkout (this rebased branch or a release cut from it).
Open a project Samples page and confirm the toolbar renders above the grid.
Tab into the toolbar and use arrow keys / Home / End to move between items.
If the page includes dropdown menu triggers inside the toolbar, confirm the closed trigger participates in roving focus and that the open menu owns its own keyboard model (popups must stop propagation so the toolbar does not steal arrow keys). Dropdown/menu composition is consumer-managed in v1 — see README Toolbar notes and the Lookbook Overview accessibility list.

PR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

I have evaluated the PR acceptance checklist for this PR.

Copilot

Pull request overview

This PR introduces a new accessible Pathogen::Toolbar ViewComponent (plus button and separator helpers) and a corresponding Stimulus controller to implement APG-style roving focus and keyboard navigation for grouped actions, along with previews, documentation, and test coverage.

Changes:

Add Pathogen::Toolbar, Pathogen::Toolbar::Button, and Pathogen::Toolbar::Separator components with required accessible naming and optional aria-controls.
Add pathogen--toolbar Stimulus controller implementing roving tabindex, Arrow/Home/End navigation, disabled-item click interception, and text-entry-safe key handling.
Add Lookbook previews, README documentation, importmap/controller registration wiring, styles, locales, and unit tests (Ruby + Vitest).

Reviewed changes

Copilot reviewed 23 out of 23 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
test/javascript/controllers/toolbar_controller.test.js	Adds Vitest coverage for roving focus, wrapping navigation, disabled click interception, and text-entry behavior.
test/components/previews/pathogen/toolbar_preview/basic_usage.html.erb	Lookbook preview for basic toolbar composition.
test/components/previews/pathogen/toolbar_preview/keyboard_and_accessibility.html.erb	Lookbook preview focused on keyboard contract and accessible naming.
test/components/previews/pathogen/toolbar_preview/toggle_buttons.html.erb	Preview showing consumer-managed toggle state and mixed children.
test/components/previews/pathogen/toolbar_preview/with_aria_controls.html.erb	Preview demonstrating `aria-controls` with a grid.
test/components/previews/pathogen/toolbar_preview/with_search_input.html.erb	Preview demonstrating search input participation without arrow-key hijacking.
test/components/previews/pathogen/toolbar_preview.rb	Registers toolbar previews and labels in Lookbook.
test/components/pathogen/toolbar_test.rb	Adds ViewComponent tests for toolbar API, ARIA attributes, data merging, and helpers.
README.md	Documents toolbar usage and adds controller to the registry list.
config/locales/en.yml	Adds i18n strings for toolbar previews.
config/locales/fr.yml	Adds French translations for toolbar previews.
config/importmap.rb	Pins the toolbar controller for importmap usage.
config/i18n-tasks.yml	Adds preview path so i18n-tasks detects preview key usage.
app/components/pathogen/toolbar.rb	Implements toolbar root component with ARIA naming validation and Stimulus wiring.
app/components/pathogen/toolbar.html.erb	Renders toolbar root wrapper markup.
app/components/pathogen/toolbar/button.rb	Adds toolbar-aware button wrapper that composes `Pathogen::Button` and opts into targeting/ARIA.
app/components/pathogen/toolbar/button.html.erb	Renders composed `Pathogen::Button` with optional visuals.
app/components/pathogen/toolbar/separator.rb	Adds semantic vertical separator component.
app/assets/javascripts/pathogen_view_components/toolbar_controller.js	Implements roving tabindex + keyboard/click handling for toolbar items.
app/assets/javascripts/pathogen_view_components.js	Registers/exports the toolbar controller and updates dev log message.
app/assets/stylesheets/pathogen/components/toolbar.css	Adds focus-visible and aria-disabled styling for toolbar items.
app/assets/stylesheets/pathogen.tailwind.css	Imports toolbar component CSS into Tailwind build input.
app/assets/stylesheets/pathogen_view_components.css	Updates compiled Tailwind output including toolbar styles.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 23 out of 23 changed files in this pull request and generated 2 comments.

Copilot

Pull request overview

Copilot reviewed 23 out of 23 changed files in this pull request and generated no new comments.

Add a reusable APG-style toolbar with roving tabindex behavior so host apps can build keyboard-accessible action bars above grids and similar surfaces. It also wires the new controller and toolbar styles into importmap, Stimulus registration, and bundled CSS so the component works out of the box.

Add Ruby and Stimulus tests for toolbar semantics, keyboard navigation, disabled-action interception, and merged data attribute behavior. These tests lock in the intended accessibility and integration guarantees of the new toolbar primitives.

Document toolbar usage in the README and add Lookbook preview scenarios with localized copy for accessibility guidance. Update i18n task search paths so preview-localized keys are validated by repository hooks.

Reconnect item targets after morph and stream updates. Ignore detached nodes so arrow keys keep working. Improve text-entry boundary checks and caret placement on arrow navigation.

Toolbar navigation was capturing arrow keys inside open menu popups and resetting roving tabindex during sync. After Turbo form submits, focus was not returned to the submitter button.

Extract roving focus, menu popup, text entry, and visibility into importable modules. Scope menu lookup to the toolbar first and localize the missing-items error via a Stimulus value.

Introduce Toolbar::MenuTrigger for menu-button items and a shared StimulusDataMerge helper. Rename button tag kwarg to button_tag and wire localized missing-items messaging on the toolbar root.

Apply focus-visible and disabled styles only to toolbar targets that are not Pathogen::Button wrappers, avoiding double rings on Toolbar::Button.

Document automatic resync, pathogen--toolbar:sync, and MenuTrigger usage so hosts do not reconnect unnecessarily.

…istency

Menu popups stay consumer-managed in v1. Remove toolbar keyboard delegation for open menus and vertical keys on aria-haspopup triggers. Log a console error for empty toolbars instead of replacing markup. Inline preview copy and drop preview i18n keys.

Update usage example and notes now that MenuTrigger is removed. Document that popups own their open-state keyboard model and must stop propagation.

Introduce layout helpers for grouped reflow and a table variant default. Move responsive toolbar layout into component CSS so breakpoints work without relying on Tailwind classes emitted from Ruby strings.

Assert Group, Spacer, and variant data attributes. Verify roving focus still crosses layout group wrappers.

Merge toolbar previews into one compact page aligned with the design contract. Document composite grid surfaces and drop nested border stacking in the sample grid demo.

joshsadam self-assigned this May 27, 2026

joshsadam marked this pull request as ready for review May 27, 2026 14:57

joshsadam added the enhancement New feature or request label May 27, 2026

joshsadam requested a review from Copilot May 27, 2026 15:06

Copilot started reviewing on behalf of joshsadam May 27, 2026 15:07 View session

Copilot AI reviewed May 27, 2026

View reviewed changes

Comment thread app/assets/stylesheets/pathogen/components/toolbar.css Outdated

Comment thread app/assets/stylesheets/pathogen/components/toolbar.css Outdated

Comment thread app/components/pathogen/toolbar/button.rb

joshsadam requested a review from Copilot May 27, 2026 16:28

Copilot started reviewing on behalf of joshsadam May 27, 2026 16:28 View session

Copilot AI reviewed May 27, 2026

View reviewed changes

Comment thread test/components/pathogen/toolbar_test.rb Outdated

Comment thread app/assets/javascripts/pathogen_view_components/toolbar_controller.js Outdated

joshsadam requested a review from Copilot May 27, 2026 16:45

Copilot started reviewing on behalf of joshsadam May 27, 2026 16:45 View session

Copilot AI reviewed May 27, 2026

View reviewed changes

joshsadam marked this pull request as draft May 28, 2026 14:14

joshsadam force-pushed the 001-add-toolbar-component branch from 2a73a78 to c7c7cc5 Compare May 28, 2026 18:53

joshsadam marked this pull request as ready for review May 28, 2026 19:01

joshsadam requested review from ChrisHuynh333 and ericenns May 28, 2026 19:02

joshsadam marked this pull request as draft May 29, 2026 12:42

joshsadam marked this pull request as ready for review May 29, 2026 18:27

joshsadam force-pushed the 001-add-toolbar-component branch 2 times, most recently from 44d1269 to fa874bd Compare June 4, 2026 18:24

joshsadam force-pushed the 001-add-toolbar-component branch from fa874bd to 979a4f9 Compare June 10, 2026 16:03

joshsadam marked this pull request as draft June 11, 2026 14:35

joshsadam force-pushed the 001-add-toolbar-component branch from 979a4f9 to b79b4f5 Compare July 3, 2026 20:26

joshsadam changed the title ~~Toolbar Component~~ Add accessible toolbar component Jul 3, 2026

joshsadam marked this pull request as ready for review July 3, 2026 20:40

joshsadam force-pushed the 001-add-toolbar-component branch from b79b4f5 to ee9ddab Compare July 10, 2026 16:26

joshsadam added 3 commits July 10, 2026 17:52

docs(toolbar): add preview docs and localized toolbar examples

29cbaa6

Document toolbar usage in the README and add Lookbook preview scenarios with localized copy for accessibility guidance. Update i18n task search paths so preview-localized keys are validated by repository hooks.

joshsadam added 20 commits July 10, 2026 17:52

fix(toolbar): address review feedback

e7c8e56

fix(toolbar): address review feedback

8b79937

fix(toolbar): resync roving focus after DOM updates

415be45

Reconnect item targets after morph and stream updates. Ignore detached nodes so arrow keys keep working. Improve text-entry boundary checks and caret placement on arrow navigation.

fix(toolbar): yield keys to menus and restore focus

d289ed7

Toolbar navigation was capturing arrow keys inside open menu popups and resetting roving tabindex during sync. After Turbo form submits, focus was not returned to the submitter button.

refactor(toolbar): split Stimulus into modules

a46e4e8

Extract roving focus, menu popup, text entry, and visibility into importable modules. Scope menu lookup to the toolbar first and localize the missing-items error via a Stimulus value.

feat(toolbar): add MenuTrigger and data merge

3db6c09

Introduce Toolbar::MenuTrigger for menu-button items and a shared StimulusDataMerge helper. Rename button tag kwarg to button_tag and wire localized missing-items messaging on the toolbar root.

style(toolbar): scope focus to custom items

612f7fc

Apply focus-visible and disabled styles only to toolbar targets that are not Pathogen::Button wrappers, avoiding double rings on Toolbar::Button.

docs(toolbar): clarify DOM sync contract

9bd15e3

Document automatic resync, pathogen--toolbar:sync, and MenuTrigger usage so hosts do not reconnect unnecessarily.

♻️ refactor(toolbar): reuse toolbar button in menu trigger

338c7f0

refactor(toolbar): replace startController with startToolbar for cons…

83fa6b7

…istency

docs(toolbar): clarify custom control contract

24e07df

Update usage example and notes now that MenuTrigger is removed. Document that popups own their open-state keyboard model and must stop propagation.

feat(toolbar): add Group, Spacer, table layout

89edae4

Introduce layout helpers for grouped reflow and a table variant default. Move responsive toolbar layout into component CSS so breakpoints work without relying on Tailwind classes emitted from Ruby strings.

test(toolbar): cover groups and table variant

61bca5f

Assert Group, Spacer, and variant data attributes. Verify roving focus still crosses layout group wrappers.

docs(toolbar): consolidate Lookbook overview

73434bd

Merge toolbar previews into one compact page aligned with the design contract. Document composite grid surfaces and drop nested border stacking in the sample grid demo.

refactor(toolbar): adopt tone/emphasis API for toolbar button

40aec37

fix(toolbar): expose separator to assistive technology

591d43c

refactor(toolbar): namespace group reflow data attribute

ed2156c

docs(toolbar): tighten overview preview per design contract

c89a287

docs(toolbar): add full-width reflow preview

dbc5b35

joshsadam force-pushed the 001-add-toolbar-component branch from ee9ddab to dbc5b35 Compare July 10, 2026 22:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add accessible toolbar component#50

Add accessible toolbar component#50
joshsadam wants to merge 23 commits into
mainfrom
001-add-toolbar-component

joshsadam commented May 27, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

joshsadam commented May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do and why?

Screenshots or screen recordings

Within IRIDA Next

How to set up and validate locally

Test within IRIDA Next

PR acceptance checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

joshsadam commented May 27, 2026 •

edited

Loading