From cf43f0d98a61d213a7fdf74b4221d3c61231106a Mon Sep 17 00:00:00 2001 From: Noa Santo <72336443+virus-rpi@users.noreply.github.com> Date: Wed, 18 Sep 2024 17:46:08 +0200 Subject: [PATCH 1/4] fix (a11y): add accessible name to social buttons and copy button (#814) * fix (a11y): add an accessible name to social buttons * fix (a11y): add an accessible name to copy button --------- Co-authored-by: noa.santo --- src/assets/locales/de/translations.json | 6 ++++ src/assets/locales/en/translations.json | 6 ++++ .../pages/blog-post/share-panel.tsx | 31 ++++++++++++++++--- src/components/ui/copy-button/copy-button.tsx | 6 +++- 4 files changed, 43 insertions(+), 6 deletions(-) diff --git a/src/assets/locales/de/translations.json b/src/assets/locales/de/translations.json index 58b154430..99e914714 100644 --- a/src/assets/locales/de/translations.json +++ b/src/assets/locales/de/translations.json @@ -79,6 +79,12 @@ "navigation.contact": "Kontakt", "navigation.about-us": "Über Uns", "blog.share": "Artikel teilen", + "blog.share.facebook": "Teilen auf Facebook", + "blog.share.whatsapp": "Teilen auf WhatsApp", + "blog.share.email": "Teilen per E-Mail", + "blog.share.twitter": "Teilen auf X", + "blog.share.linkedin": "Teilen auf LinkedIn", + "blog.copy": "Kopieren", "blog.copied": "Kopiert", "blog.follow": "Blog abonnieren", "blog.pagination": "Seite", diff --git a/src/assets/locales/en/translations.json b/src/assets/locales/en/translations.json index 28ad9e5ce..f7433689c 100644 --- a/src/assets/locales/en/translations.json +++ b/src/assets/locales/en/translations.json @@ -79,6 +79,12 @@ "navigation.contact": "Contact", "navigation.about-us": "About", "blog.share": "Share article", + "blog.share.facebook": "Share on Facebook", + "blog.share.whatsapp": "Share on WhatsApp", + "blog.share.email": "Share via email", + "blog.share.twitter": "Share on X", + "blog.share.linkedin": "Share on LinkedIn", + "blog.copy": "Copy", "blog.copied": "Copied", "blog.follow": "Subscribe to blog", "blog.pagination": "Page", diff --git a/src/components/pages/blog-post/share-panel.tsx b/src/components/pages/blog-post/share-panel.tsx index 862f0250e..ff14a829b 100644 --- a/src/components/pages/blog-post/share-panel.tsx +++ b/src/components/pages/blog-post/share-panel.tsx @@ -64,27 +64,48 @@ export const SharePanel: React.FC = ({ title }) => { {t('blog.share')} - + - + - + - + - + diff --git a/src/components/ui/copy-button/copy-button.tsx b/src/components/ui/copy-button/copy-button.tsx index 4dcb25e27..5f58d6e3b 100644 --- a/src/components/ui/copy-button/copy-button.tsx +++ b/src/components/ui/copy-button/copy-button.tsx @@ -74,7 +74,11 @@ export const Copy = ({ ) : ( - + )} ); From ba69a8819ea7aa64a2028d346027427150b574ef Mon Sep 17 00:00:00 2001 From: Noa Santo <72336443+virus-rpi@users.noreply.github.com> Date: Wed, 18 Sep 2024 17:53:35 +0200 Subject: [PATCH 2/4] fix (a11y): hide accordion chevron from screen reader (#815) * fix (a11y): add aria-hidden to chevron to hide it * fix (a11y): aria hide the correct component --------- Co-authored-by: noa.santo --- src/components/ui/accordion/accordion-header.tsx | 2 +- src/components/ui/icon/icon.tsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/ui/accordion/accordion-header.tsx b/src/components/ui/accordion/accordion-header.tsx index 603b7b004..a762d1344 100644 --- a/src/components/ui/accordion/accordion-header.tsx +++ b/src/components/ui/accordion/accordion-header.tsx @@ -60,7 +60,7 @@ export const AccordionHeader = (props: AccordionHeaderProps) => { return ( {props.children} - + ); }; diff --git a/src/components/ui/icon/icon.tsx b/src/components/ui/icon/icon.tsx index 410e21607..cbc70a15d 100644 --- a/src/components/ui/icon/icon.tsx +++ b/src/components/ui/icon/icon.tsx @@ -43,6 +43,7 @@ interface IconProps { * Let's support styled components and friends by accepting this property */ className?: string; + ariaHidden?: boolean; } const transformSizeToDimension = (size: IconSize) => { @@ -67,6 +68,7 @@ export const Icon = (props: IconProps) => { From 56c9a586bff7ebf218666b066878bfcf257851d8 Mon Sep 17 00:00:00 2001 From: Noa Santo <72336443+virus-rpi@users.noreply.github.com> Date: Thu, 19 Sep 2024 16:08:50 +0200 Subject: [PATCH 3/4] fix (a11y): make privacy checkbox keyboard accessible (#816) * fix (a11y): make privacy checkbox keyboard accessible * chore: rename hasError prop to $hasError, so it's not passed through to the DOM element * chore: omit the spread props from the checkbox, so they are not passed through to the DOM element and no prop is given to it that should be passed through --------- Co-authored-by: noa.santo --- src/components/forms/checkbox/checkbox.tsx | 50 ++++++++-------------- 1 file changed, 18 insertions(+), 32 deletions(-) diff --git a/src/components/forms/checkbox/checkbox.tsx b/src/components/forms/checkbox/checkbox.tsx index 0085b7e9a..17aa6830d 100644 --- a/src/components/forms/checkbox/checkbox.tsx +++ b/src/components/forms/checkbox/checkbox.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import { useController, UseControllerProps } from 'react-hook-form'; import styled, { css } from 'styled-components'; import { theme } from '../../layout/theme'; @@ -23,16 +23,23 @@ const CheckboxLabelText = styled.span` } `; -const StyledCheckbox = styled.div<{ checked: boolean; hasError: boolean }>` +const StyledCheckbox = styled.input.attrs({ + type: 'checkbox', +})<{ $hasError: boolean }>` display: inline-block; width: 24px; height: 24px; - + margin: 0; + padding: 0; background: #f7f8fa; border-radius: 4px; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + cursor: pointer; - ${({ hasError }) => - hasError && + ${({ $hasError }) => + $hasError && css` border: 2px solid ${theme.palette.text.errorMessage}; `} @@ -40,21 +47,11 @@ const StyledCheckbox = styled.div<{ checked: boolean; hasError: boolean }>` &:hover { border: 1px solid ${theme.palette.text.default}; } - - svg { - visibility: ${({ checked }) => (checked ? 'visible' : 'hidden')}; - } `; -const HiddenCheckbox = styled.input.attrs({ - type: 'checkbox', -})` - height: 1px; - width: 1px; - margin: -1px; - overflow: hidden; +const StyledIcon = styled(Icon)` position: absolute; - visibility: hidden; + pointer-events: none; `; const CheckboxLabelTextWrapper = ({ label, required }) => { @@ -70,29 +67,18 @@ export const Checkbox = ( ) => { const { field, fieldState, formState } = useController(props); const errorMessage = fieldState?.error?.message; - const [checked, setChecked] = useState(field?.value || false); - - const handleChange = () => { - const newChecked = !checked; - setChecked(newChecked); - field.onChange(newChecked); - }; return ( -
+
- - - - + {field.value && } {props.label && ( Date: Thu, 19 Sep 2024 16:48:31 +0200 Subject: [PATCH 4/4] fix (a11y): mark all external links with the aria-label "(opens in a new tab)" (#821) Co-authored-by: noa.santo --- src/components/legacy/links/links.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/legacy/links/links.tsx b/src/components/legacy/links/links.tsx index 422bfe798..9307bf231 100644 --- a/src/components/legacy/links/links.tsx +++ b/src/components/legacy/links/links.tsx @@ -31,6 +31,7 @@ export const Link = (props: LinkProps): JSX.Element => { target="_blank" rel="noopener" className={className} + aria-label={`${children} (opens in a new tab)`} {...rest} > {children}