feat: add Kbd component - #886
Open
Shreyag02 wants to merge 1 commit into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📝 WalkthroughWalkthroughAdds the semantic Sequence Diagram(s)sequenceDiagram
actor User
participant Button
participant Tooltip
participant Kbd
User->>Button: Activate outline button
Button->>Tooltip: Trigger tooltip
Tooltip->>Kbd: Render Command-K shortcut
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/www/src/content/docs/components/kbd/demo.ts`:
- Around line 5-8: In apps/www/src/content/docs/components/kbd/demo.ts, add
descriptive aria-label values to every symbol-only Kbd example: label Command at
lines 5-8, 13-19, 24-34, 42-46, 61-68, and 73-86; additionally label Shift and
Enter in the 13-19 example and Shift in the 24-34 example. Use labels such as
“Command,” “Shift,” and “Enter” while preserving the displayed symbols.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: b976dc67-dfd8-49f0-97d5-98284057b0fe
📒 Files selected for processing (9)
apps/www/src/content/docs/components/kbd/demo.tsapps/www/src/content/docs/components/kbd/index.mdxapps/www/src/content/docs/components/kbd/props.tspackages/raystack/components/kbd/__tests__/data-slots.test.tsxpackages/raystack/components/kbd/__tests__/kbd.test.tsxpackages/raystack/components/kbd/index.tsxpackages/raystack/components/kbd/kbd.module.csspackages/raystack/components/kbd/kbd.tsxpackages/raystack/index.tsx
Comment on lines
+5
to
+8
| code: `<Kbd.Group> | ||
| <Kbd>⌘</Kbd> | ||
| <Kbd>K</Kbd> | ||
| </Kbd.Group>` |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Add aria-label to every symbol-only key example.
These examples use symbols as the only key content. They do not follow the accessibility guidance on apps/www/src/content/docs/components/kbd/index.mdx line 94. Add labels such as <Kbd aria-label="Command">⌘</Kbd>.
apps/www/src/content/docs/components/kbd/demo.ts#L5-L8: Label the Command key.apps/www/src/content/docs/components/kbd/demo.ts#L13-L19: Label the Command, Shift, and Enter keys.apps/www/src/content/docs/components/kbd/demo.ts#L24-L34: Label the Command and Shift keys.apps/www/src/content/docs/components/kbd/demo.ts#L42-L46: Label the Command key.apps/www/src/content/docs/components/kbd/demo.ts#L61-L68: Label the Command key.apps/www/src/content/docs/components/kbd/demo.ts#L73-L86: Label the Command key.
📍 Affects 1 file
apps/www/src/content/docs/components/kbd/demo.ts#L5-L8(this comment)apps/www/src/content/docs/components/kbd/demo.ts#L13-L19apps/www/src/content/docs/components/kbd/demo.ts#L24-L34apps/www/src/content/docs/components/kbd/demo.ts#L42-L46apps/www/src/content/docs/components/kbd/demo.ts#L61-L68apps/www/src/content/docs/components/kbd/demo.ts#L73-L86
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/www/src/content/docs/components/kbd/demo.ts` around lines 5 - 8, In
apps/www/src/content/docs/components/kbd/demo.ts, add descriptive aria-label
values to every symbol-only Kbd example: label Command at lines 5-8, 13-19,
24-34, 42-46, 61-68, and 73-86; additionally label Shift and Enter in the 13-19
example and Shift in the 24-34 example. Use labels such as “Command,” “Shift,”
and “Enter” while preserving the displayed symbols.
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
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.
Description
Adds
Kbd, a component for displaying keyboard keys and shortcut sequences.Apsara has no shared way to render a keyboard key today, so it gets hand-rolled with inline styles wherever it appears.
Command.Shortcutrenders unstyled<kbd>elements,Menuhas no shortcut support, and tooltips have no way to show an action's shortcut.The API follows shadcn's Kbd, converted to Apsara conventions: dot-notation sub-components and
--rs-*tokens. The visual treatment reuses the existing key styling fromCommand.Shortcutand the docs-siteKbd, so no new tokens were added.One note for review:
Kbd.Grouprenders a<kbd>rather than a<div>, since the HTML spec defines a nestedkbdas an individual key within a larger input.Type of Change
How Has This Been Tested?
classNamemerging, ref forwarding, composition, and thedata-slotcontract. Full suite: 2589 passed, 1 skipped.pnpm build:apsaraandpnpm --filter www buildboth pass; the docs page generates and appears in the sidebar.tsc --noEmitandbiome checkclean on all new files.Checklist:
Screenshots (if appropriate):
N/A
Related Issues
N/A