Merge branch 'main' into chore/a11y/blog/post/code

satellytes · Sep 19, 2024 · 0ddeda4 · 0ddeda4
2 parents 0c198dc + 114b820
commit 0ddeda4
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 39 deletions.
diff --git 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
@@ -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/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,38 +23,35 @@ 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};
     `}
 
   &: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 (
-    <div>
+    <div style={{ position: 'relative' }}>
       <CheckboxLabel>
-        <HiddenCheckbox
+        <StyledCheckbox
           aria-required={true}
           disabled={formState.isSubmitting}
           {...field}
-          value={field?.value || false}
-          {...props}
           id={props.name}
-          onChange={handleChange}
+          $hasError={Boolean(fieldState?.error)}
         />
-        <StyledCheckbox checked={checked} hasError={Boolean(fieldState?.error)}>
-          <Icon show="checkmark_bold" />
-        </StyledCheckbox>
+        {field.value && <StyledIcon show="checkmark_bold" />}
         {props.label && (
           <CheckboxLabelTextWrapper
             label={props.label}

diff --git 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}

diff --git 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<ShareProps> = ({ title }) => {
       <SharePanelText>{t('blog.share')}</SharePanelText>
       <SocialLinks>
         <SocialLinkItem data-testid="facebook">
-          <FacebookShareButton url={shareUrl}>
+          <FacebookShareButton
+            url={shareUrl}
+            aria-label={t('blog.share.facebook')}
+          >
             <Icon show="facebook" />
           </FacebookShareButton>
         </SocialLinkItem>
         <SocialLinkItem data-testid="whatsapp">
-          <WhatsappShareButton url={shareUrl} title={title}>
+          <WhatsappShareButton
+            url={shareUrl}
+            title={title}
+            aria-label={t('blog.share.whatsapp')}
+          >
             <Icon show="whatsapp" />
           </WhatsappShareButton>
         </SocialLinkItem>
         <SocialLinkItem data-testid="email">
-          <EmailShareButton url={shareUrl} subject={title} body="body">
+          <EmailShareButton
+            url={shareUrl}
+            subject={title}
+            body="body"
+            aria-label={t('blog.share.email')}
+          >
             <Icon show="email" />
           </EmailShareButton>
         </SocialLinkItem>
         <SocialLinkItem data-testid="twitter">
-          <TwitterShareButton url={shareUrl} title={title} hashtags={hashtags}>
+          <TwitterShareButton
+            url={shareUrl}
+            title={title}
+            hashtags={hashtags}
+            aria-label={t('blog.share.twitter')}
+          >
             <Icon show="twitter" />
           </TwitterShareButton>
         </SocialLinkItem>
         <SocialLinkItem data-testid="linkedin">
-          <LinkedinShareButton title={title} url={shareUrl}>
+          <LinkedinShareButton
+            title={title}
+            url={shareUrl}
+            aria-label={t('blog.share.linkedin')}
+          >
             <Icon show="linked_in" />
           </LinkedinShareButton>
         </SocialLinkItem>

diff --git 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 (
     <AccordionButton>
       <AccordionTitleHeadline>{props.children}</AccordionTitleHeadline>
-      <StyledIcon open={isExpanded} show="chevron_up" />
+      <StyledIcon open={isExpanded} show="chevron_up" ariaHidden={true} />
     </AccordionButton>
   );
 };
diff --git 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 = ({
           </CheckmarkContainer>
         </>
       ) : (
-        <IconButton icon={'clone'} onClick={handleClick}></IconButton>
+        <IconButton
+          icon={'clone'}
+          onClick={handleClick}
+          aria-label={t('blog.copy')}
+        ></IconButton>
       )}
     </CopyWrapper>
   );

diff --git 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) => {
     <IconContainer
       size={props.size ?? DEFAULT_ICON_SIZE}
       className={props.className}
+      aria-hidden={props.ariaHidden}
     >
       <IconSvg />
     </IconContainer>