UIK 5640/radio cards - #3101
Conversation
| | `Tab` | When focus moves to the `RadioCards`, it moves to the active `RadioCards.Item`. | | ||
| | `Left Arrow` , `Right Arrow` | Set `checked` value to the next/previous button in the group. If focus is on the last/first button, moves focus to the first/last button respectively. | | ||
|
|
||
| See detailed information about the keyboard support for clickable elements in the [Keyboard control guide](/core-principles/a11y/a11y-keyboard#any-other-controls-filtertrigger-pills-tabline-etc). |
There was a problem hiding this comment.
🚫 [vale] <DevDocs.Names> reported by reviewdog 🐶
Use 'A11y' or 'A11Y' instead of 'a11y'.
| See detailed information about the keyboard support for clickable elements in the [Keyboard control guide](/core-principles/a11y/a11y-keyboard#any-other-controls-filtertrigger-pills-tabline-etc). | |
| See detailed information about the keyboard support for clickable elements in the [Keyboard control guide](/core-principles/A11y/a11y-keyboard#any-other-controls-filtertrigger-pills-tabline-etc). |
| See detailed information about the keyboard support for clickable elements in the [Keyboard control guide](/core-principles/a11y/a11y-keyboard#any-other-controls-filtertrigger-pills-tabline-etc). | |
| See detailed information about the keyboard support for clickable elements in the [Keyboard control guide](/core-principles/A11Y/a11y-keyboard#any-other-controls-filtertrigger-pills-tabline-etc). |
| --- | ||
| title: Radio Cards | ||
| fileSource: radio-cards | ||
| tabs: Design('radio-cards'), A11y('radio-cards-a11y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') |
There was a problem hiding this comment.
🚫 [vale] <DevDocs.Names> reported by reviewdog 🐶
Use 'A11y' or 'A11Y' instead of 'a11y'.
| tabs: Design('radio-cards'), A11y('radio-cards-a11y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') | |
| tabs: Design('radio-cards'), A11y('radio-cards-A11y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') |
| tabs: Design('radio-cards'), A11y('radio-cards-a11y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') | |
| tabs: Design('radio-cards'), A11y('radio-cards-A11Y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') |
| --- | ||
| title: Radio Cards | ||
| fileSource: radio-cards | ||
| tabs: Design('radio-cards'), A11y('radio-cards-a11y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') |
There was a problem hiding this comment.
🚫 [vale] <DevDocs.Names> reported by reviewdog 🐶
Use 'A11y' or 'A11Y' instead of 'a11y'.
| tabs: Design('radio-cards'), A11y('radio-cards-a11y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') | |
| tabs: Design('radio-cards'), A11y('radio-cards-A11y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') |
| tabs: Design('radio-cards'), A11y('radio-cards-a11y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') | |
| tabs: Design('radio-cards'), A11y('radio-cards-A11Y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') |
| --- | ||
| title: Radio Cards | ||
| fileSource: radio-cards | ||
| tabs: Design('radio-cards'), A11y('radio-cards-a11y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') |
There was a problem hiding this comment.
🚫 [vale] <DevDocs.Names> reported by reviewdog 🐶
Use 'A11y' or 'A11Y' instead of 'a11y'.
| tabs: Design('radio-cards'), A11y('radio-cards-a11y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') | |
| tabs: Design('radio-cards'), A11y('radio-cards-A11y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') |
| tabs: Design('radio-cards'), A11y('radio-cards-a11y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') | |
| tabs: Design('radio-cards'), A11y('radio-cards-A11Y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') |
| --- | ||
| title: Radio Cards | ||
| fileSource: radio-cards | ||
| tabs: Design('radio-cards'), A11y('radio-cards-a11y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') |
There was a problem hiding this comment.
🚫 [vale] <DevDocs.Names> reported by reviewdog 🐶
Use 'A11y' or 'A11Y' instead of 'a11y'.
| tabs: Design('radio-cards'), A11y('radio-cards-a11y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') | |
| tabs: Design('radio-cards'), A11y('radio-cards-A11y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') |
| tabs: Design('radio-cards'), A11y('radio-cards-a11y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') | |
| tabs: Design('radio-cards'), A11y('radio-cards-A11Y'), API('radio-cards-api'), Examples('radio-cards-code'), Changelog('radio-cards-changelog') |
| aria-disabled={disabled} | ||
| aria-checked={checked} | ||
| > | ||
| {advancedMode |
There was a problem hiding this comment.
do we really need advanced mode here?)
There was a problem hiding this comment.
idk, since it's called as radio-cards I cannot guarantee that left or right addon will be filled with the correct content. That is why I decided to expand the component to advanced mode. idk :) we could discuss it deeper :)
| }, | ||
| "dependencies": { | ||
| "@semcore/typography": "^17.2.1" | ||
| }, |
There was a problem hiding this comment.
You should add peerDeps. Core and base-components, I think
Motivation and Context
Added new
RadioCardscomponent.How has this been tested?
I've added unit test.
Screenshots (if appropriate):
Types of changes
Checklist: