feat: add progress indicator styles #4019
Conversation
There was a problem hiding this comment.
a11y still seems a little off, may want to check out other examples of adding accessibility to progress indicators such as https://www.lightningdesignsystem.com/components/progress-indicator/
(can also test yourself by pressing cmd+F5 to toggle voiceover, mac's screen reader)
| ? undefined | ||
| : { | ||
| backgroundColor: 'secondary.300', | ||
| boxShadow: `0 0 0 1px ${getColor(theme, 'secondary.400')}`, |
There was a problem hiding this comment.
instead of function call, we can use css variables:
boxShadow: '0 0 0 1px var(--chakra-colors-secondary-400)'read more about the ones chakra generates app-wide here: https://chakra-ui.com/docs/styled-system/features/css-variables
| @@ -51,7 +71,7 @@ export const ProgressIndicator = ({ | |||
| ) | |||
|
|
|||
| const animationProps = useMemo(() => { | |||
| return { x: currActiveIdx.toString() + 'rem' } | |||
| return { x: (currActiveIdx + 0.125).toString() + 'rem' } | |||
There was a problem hiding this comment.
nit: can simplify with string templating (calls toString under the hood)
const animationProps = useMemo(() => {
return { x: `${currActiveIdx + 0.125}rem` }
}, [currActiveIdx])| position="absolute" | ||
| as="button" |
There was a problem hiding this comment.
this is creating an extra tabbable button in the component which i don't think is intended.
my screen reader (voiceover) is also announcing this button.
Problem
Add focus and hover styles for progress indicator, as well as aria-labels.
Closes #3977
Solution
Breaking Changes
Before & After Screenshots
Changes can be viewed on Rollout Announcement storybook