Added switch component (#1299) #1328
Conversation
Deploying design-system with
|
| Latest commit: |
5773b44
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://be9b2d21.design-system.pages.dev |
| Branch Preview URL: | https://issue-1299-create-new-switch.design-system.pages.dev |
| } | ||
|
|
||
| &__value { | ||
| font-size: 16px; |
There was a problem hiding this comment.
Please use relative units when possible and makes sense. This should be 1rem;
| {showLabel && <div className="switch__label">{label}</div>} | ||
| <div className='switch__wrapper'> | ||
| <div className="switch__track" tabIndex={0}> | ||
| {showIcon && ( |
There was a problem hiding this comment.
To avoid using css filters (and hardcode color value) you might want to replace element with
Check Language switcher component's icons for the example of implementation
…g. Added correct svgs of each size and color
… styles as needed
|
@CalebLuster , as discussed, since we are using button element as a toggle (not default behavior) we shall use associated aria- attributes to explicitly declare that. Check out https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed for details, but essentially you should add aria-pressed attribute to the button element with true/false values reflecting current state. Another accessibility issue we have to address is that element must have a label all the time. Regardless its visibility, which will be governed by that control, but markup should include label all the time. To achieve that use persistent aria-label attribute for the button. |
…ted with NVDA, everything seems to be working well
| `; | ||
|
|
||
| useEffect(() => { | ||
| console.log('toggled', toggled); |
There was a problem hiding this comment.
@CalebLuster , please remove console.log call, it shouldn't be a part of production code
|
@CalebLuster , changes in https://github.com/undp/design-system/pull/1328/files#diff-8c0b50e63802ff6a0da7dc6063f43563c1ae8b81f2d56d3bc34658edd34927e4 shouldn't be mixed with this ticket. We will leave it as is for the time being as it is not a big deal, but for the future - we should keep changes pertinent to specific ticket within relevant PR. THis one was marked as fixing #1299 , so other changes shouldn't be included as a matter of practice. No action required. |
#1299