feat(accessibility): add tabbing to chart menu in dashboard (#26138)

Co-authored-by: geido <diegopucci.me@gmail.com>
Co-authored-by: Diego Pucci <geido@Diegos-MBP.wind3.hub>
This commit is contained in:
Elizabeth Thompson
2024-04-08 09:40:57 -07:00
committed by GitHub
parent 662c1ed618
commit 34b1db219c
24 changed files with 965 additions and 154 deletions

View File

@@ -58,6 +58,11 @@ const ErrorAlertDiv = styled.div<{ level: ErrorLevel }>`
.link {
color: ${({ level, theme }) => theme.colors[level].dark2};
text-decoration: underline;
&:focus-visible {
border: 1px solid ${({ theme }) => theme.colors.primary.base};
padding: ${({ theme }) => theme.gridUnit / 2}px;
margin: -${({ theme }) => theme.gridUnit / 2 + 1}px;
border-radius: ${({ theme }) => theme.borderRadius}px;
}
`;
@@ -131,6 +136,11 @@ export default function ErrorAlert({
tabIndex={0}
className="link"
onClick={() => setIsModalOpen(true)}
onKeyDown={event => {
if (event.key === 'Enter') {
setIsModalOpen(true);
}
}}
>
{t('See more')}
</span>
@@ -145,6 +155,11 @@ export default function ErrorAlert({
tabIndex={0}
className="link"
onClick={() => setIsModalOpen(true)}
onKeyDown={event => {
if (event.key === 'Enter') {
setIsModalOpen(true);
}
}}
>
{t('See more')}
</span>
@@ -162,6 +177,11 @@ export default function ErrorAlert({
tabIndex={0}
className="link"
onClick={() => setIsBodyExpanded(true)}
onKeyDown={event => {
if (event.key === 'Enter') {
setIsBodyExpanded(true);
}
}}
>
{t('See more')}
</span>
@@ -175,6 +195,11 @@ export default function ErrorAlert({
tabIndex={0}
className="link"
onClick={() => setIsBodyExpanded(false)}
onKeyDown={event => {
if (event.key === 'Enter') {
setIsBodyExpanded(false);
}
}}
>
{t('See less')}
</span>
@@ -213,6 +238,12 @@ export default function ErrorAlert({
cta
buttonStyle="primary"
onClick={() => setIsModalOpen(false)}
tabIndex={0}
onKeyDown={event => {
if (event.key === 'Enter') {
setIsModalOpen(false);
}
}}
>
{t('Close')}
</Button>