fix: reduce the number of accessibility issues#855
Conversation
|
♻️ PR Preview 2c0a845 has been successfully destroyed since this PR has been closed.
🤖 By surge-preview |
csouchet
force-pushed
the
fix_accessibility
branch
from
f791c58 to
e11f0a0
Compare
tbouffard
changed the title
tbouffard
left a comment
tbouffard
left a comment
There was a problem hiding this comment.
Some fixes are unclear to me. Is it possible to describe them shortly? I mean these involving color and opacity changes.
Are there any visual changes implied by the fixes provided here?
| buttonStyle={{ | ||
| background: '#90EE90', | ||
| color: theme.colors.primary, | ||
| color: '#000000', |
There was a problem hiding this comment.
❓ if we remove the usage of the theme colors, what is the point of defining them? are they used elsewhere?
There was a problem hiding this comment.
For the consent bar, we use specific colors, not used elsewhere.
I don't see the interest to use the theme for this.
ℹ️ More over, I will change the component of the Consent bar and its theme soon. So, I didn't want to spend more time on this topic 🙂
There was a problem hiding this comment.
If we are changing the whole Consent bar, this is probably extra work to change the color here.
Anyway, I'll check the rendering to see the visual change which is what matters most here.
|
|
||
| return ( | ||
| <ThemeProvider theme={theme}> | ||
| <html lang="en" /> |
There was a problem hiding this comment.
To fix the language accessibility error.
| /> | ||
| </GatsbyLink> | ||
| <MKTypography variant="h5">{brand.name}</MKTypography> | ||
| <MKTypography |
There was a problem hiding this comment.
To fix the accessibility error for the title hierarchy.
| @@ -61,20 +61,20 @@ const Layout = ({ children }: Props): JSX.Element => ( | |||
| enableDeclineButton={true} | |||
There was a problem hiding this comment.
To fix the accessibility error of the contrast of compatible colors : https://dequeuniversity.com/rules/axe/4.6/color-contrast-enhanced
| <Slide direction="left" triggerOnce> | ||
| <Heading color="text" mb={4}> | ||
| <Link selected> | ||
| <Link selected href={`#${getSectionHref(name)}`}> |
There was a problem hiding this comment.
To fix the accessibility error for link without href.
| return ( | ||
| <Button | ||
| as={props.withWiggleAnimation ? StyledOpenIcon : StyledIcon} | ||
| title={ |
There was a problem hiding this comment.
To fix the accessibility error for link without title.
| buttonStyle={{ | ||
| background: '#90EE90', | ||
| color: theme.colors.primary, | ||
| color: '#000000', |
There was a problem hiding this comment.
If we are changing the whole Consent bar, this is probably extra work to change the color here.
Anyway, I'll check the rendering to see the visual change which is what matters most here.
2 participants
With the help of the POC #852, we have been able to detect some issues on the accessibility of the PA website.
Here are the fixes.