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
| <> | ||
| <RadioCards.Item.Header> | ||
| {iconAddon && <RadioCards.Item.Header.LeftAddon>{iconAddon}</RadioCards.Item.Header.LeftAddon>} | ||
| {value && <RadioCards.Item.Header.Text>{value}</RadioCards.Item.Header.Text>} |
There was a problem hiding this comment.
let's use here textHeader, value will be some hidden value
Motivation and Context
Added new
RadioCardscomponent.How has this been tested?
I've added unit test.
Screenshots (if appropriate):
Types of changes
Checklist: