feat: add focusgroup attribute section to keyboard-interface practice#158
Merged
feat: add focusgroup attribute section to keyboard-interface practice#158
Conversation
Add comprehensive documentation about the emerging focusgroup HTML attribute to the keyboard-interface practice page (both EN and JA). Includes interactive demo component with linear, wrapping, and grid focusgroup examples, browser support detection, comparison table with existing JS-based approaches, and progressive enhancement guidance. https://claude.ai/code/session_01M8kaqxuhunpzSu9MynhadN
The focusgroup demo previously only displayed the HTML markup without working keyboard navigation in unsupported browsers. This adds a progressive enhancement approach: detect focusgroup support via HTMLElement.prototype, and when unsupported, initialize JavaScript-based roving tabindex for linear (horizontal/wrap) and grid (2D) demos. https://claude.ai/code/session_01M8kaqxuhunpzSu9MynhadN
Keep the demo as a pure focusgroup attribute showcase without JavaScript roving tabindex fallback. Browser support detection still shows an appropriate notice for unsupported browsers. https://claude.ai/code/session_01M8kaqxuhunpzSu9MynhadN
Replace markdown table with a dedicated Astro component that shows a standard table on desktop (md+) and stacked cards on mobile. https://claude.ai/code/session_01M8kaqxuhunpzSu9MynhadN
Deploying apg-patterns-examples with
|
| Latest commit: |
dec15ca
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d0df81ea.apg-patterns-examples.pages.dev |
| Branch Preview URL: | https://claude-add-focusgroup-attrib.apg-patterns-examples.pages.dev |
The focusgroup attribute uses `toolbar` as the primary keyword (not `horizontal`/`vertical`/`grid`). Key changes: - Demo: `focusgroup="horizontal"` → `focusgroup="toolbar"` - Demo: `focusgroup="horizontal wrap"` → `focusgroup="toolbar wrap"` - Demo: Replace grid demo (not yet implemented) with vertical toolbar demo (`focusgroup="toolbar block"`) - Feature detection: `focusGroup` (camelCase) → `focusgroup` - Update Available Values table with correct tokens (toolbar, inline, block, wrap, nomemory, extend, none) - Update nested focusgroup examples to match MS Edge patterns - Extract comparison table into responsive FocusgroupComparisonTable component (table on desktop, stacked cards on mobile) Reference: https://microsoftedge.github.io/Demos/focusgroup/ https://claude.ai/code/session_01M8kaqxuhunpzSu9MynhadN
Add locale prop to FocusgroupDemo.astro with Japanese translations for browser support notices, demo labels, and usage descriptions. Pass locale="ja" in content.ja.mdx. https://claude.ai/code/session_01M8kaqxuhunpzSu9MynhadN
Replace `<p set:html={...} />` with `<p><Fragment set:html={...} /></p>`
to avoid prettier-plugin-astro converting to self-closing tags.
https://claude.ai/code/session_01M8kaqxuhunpzSu9MynhadN
…errors Extend astroHTML.JSX.HTMLAttributes in env.d.ts with the focusgroup property so astro check no longer reports ts(2322) errors. https://claude.ai/code/session_01M8kaqxuhunpzSu9MynhadN
- Rename `nomemory` token to `no-memory` (scoped explainer spelling)
- Update Chrome version from 133+ to 146+ for scoped focusgroup origin trial
- Fix feature detection: use `document.createElement('div')` instead of
`HTMLElement.prototype`
- Add Scoped Focusgroup Explainer and WHATWG HTML Issue #11641 to resources
- Apply all fixes to both EN and JA content, FocusgroupDemo, and
FocusgroupComparisonTable
https://claude.ai/code/session_01M8kaqxuhunpzSu9MynhadN
Add a focusgroup="toolbar no-memory" demo as the first item in FocusgroupDemo. This lets users test whether the browser recognizes `no-memory` (scoped explainer) by checking if focus resets to the first button when tabbing back in. https://claude.ai/code/session_01M8kaqxuhunpzSu9MynhadN
Place a focusgroup="toolbar nomemory" demo right after the no-memory demo so both spellings can be tested side-by-side in Chromium to determine which token the implementation recognizes. https://claude.ai/code/session_01M8kaqxuhunpzSu9MynhadN
Confirmed that `no-memory` (hyphenated) is recognized by Chromium while `nomemory` (no hyphen) is not. Remove the comparison demo since the correct spelling is now verified. https://claude.ai/code/session_01M8kaqxuhunpzSu9MynhadN
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Add comprehensive documentation about the emerging focusgroup HTML
attribute to the keyboard-interface practice page (both EN and JA).
Includes interactive demo component with linear, wrapping, and grid
focusgroup examples, browser support detection, comparison table
with existing JS-based approaches, and progressive enhancement guidance.
https://claude.ai/code/session_01M8kaqxuhunpzSu9MynhadN