Pathogen Tabs Component #1287
Open
Pathogen Tabs Component #1287
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…and tests - Implement Stimulus controller (pathogen--tabs) for accessible tabs: ARIA setup, roving tabindex, keyboard navigation (Arrow/Home/End), automatic activation and Turbo Frame lazy-loading integration. - Add Pathogen::Tabs component and subcomponents (Tab, TabPanel) with ERB templates for rendering. - Provide CSS progressive enhancement to hide non-active panels until JS initializes. - Add comprehensive unit, preview and system tests (including lazy-loading/system scaffolds); many system tests are skipped where Turbo integration is required.
joshsadam
added
enhancement
Replace TabsPanel with Pathogen::Tabs, switch tab option keys from text to label, add default_index, introduce tabs.with_panel blocks for members/groups, and make member/group turbo_frame tags and pagination frames lazy-loading with refresh: "morph".
- Add `sync_url` option to Pathogen::Tabs API and pass as `data-pathogen--tabs-sync-url-value` - Update tabs template to include sync data attribute and project members view to enable `sync_url: true` - Enhance Pathogen tabs Stimulus controller: - read initial tab from URL hash, update selected tab, and listen for `hashchange` - update URL hash using history.replaceState on tab selection (no extra history entries) - handle back/forward navigation by responding to hash changes and clean up listener on disconnect - add helpers to map between tab/panel IDs and indices - Add CSS rules for `[role="tab"][aria-selected="true|false"]` to override server-rendered classes when JS updates `aria-selected` - Minor comment/documentation tweaks in Tab and Tabs component
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What does this PR do and why?
Describe in detail what your merge request does and why.
Add accessible tabs component to the Pathogen design system following W3C ARIA Authoring Practices Guide.
What's Changed
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other pull requests.
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
See Lookbook Previews
PR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.