satellytes · virus-rpi · Nov 28, 2023 · Nov 28, 2023 · Nov 28, 2023 · Nov 28, 2023
@@ -2,7 +2,7 @@
   "main.description": "Wir sind Ihr Partner für moderne und zukunftsorientierte Softwareentwicklung. Mit einer Kombination aus Expertise und Enthusiasmus bringen wir Ihre digitale Vision zum Leben. Wir wissen, dass jeder Kunde einzigartig ist. Deshalb entwickeln und designen wir maßgeschneiderte Softwarelösungen, die perfekt auf Ihre Bedürfnisse abgestimmt sind.",
   "main.career.button": "Alle offenen Stellen",
   "main.blog.button": "Alle Artikel",
-  "main.services.button": "Erfahren Sie mehr",
+  "main.services.button": "Mehr details zu unseren Leistungen",
   "career.mandatory-field": "* Pflichtfeld",
   "career.headline": "Bewirb dich jetzt!",
   "career.first-name": "Vorname",
@@ -48,13 +48,16 @@
   "contact.info-link": "<0>Nutzen Sie unser Kontaktformular oder schreiben Sie uns eine E-Mail an <1>[email protected]</1></0>",
   "contact.info": "Nutzen Sie unser Kontaktformular oder schreiben Sie uns eine E-Mail an [email protected]",
   "contact.name": "Name",
+  "contact.name-placeholder": "z.B. Max Mustermann",
   "contact.email": "E-Mail Adresse",
+  "contact.email-placeholder": "z.B. [email protected]",
   "contact.message": "Deine Nachricht an uns",
+  "contact.message-placeholder": "z.B. Hallo Satellytes, ...",
   "contact.mandatory-field": "Pflichtfeld",
-  "contact.error.name": "Dein Name fehlt",
-  "contact.error.message": "Deine Nachricht fehlt",
-  "contact.error.email": "Deine E-Mail fehlt",
-  "contact.error.email-undefined": "Irgendwas stimmt an dieser E-Mail nicht",
+  "contact.error.name": "Das Feld Name ist nicht ausgefüllt. Bitte fülle es aus um die Nachricht senden zu können",
+  "contact.error.message": "Das Feld Nachricht ist nicht ausgefüllt. Bitte fülle es aus um die Nachricht senden zu können",
+  "contact.error.email": "Das Feld E-Mail ist nicht ausgefüllt. Bitte fülle es aus um die Nachricht senden zu können",
+  "contact.error.email-undefined": "Irgendwas stimmt an dieser E-Mail nicht. Bitte überprüfe sie und versuche es noch einmal",
   "contact.action.again-text": "Leider gab es einen Fehler. Bitte versuche es noch einmal. Klappt das nicht, schicke deine Nachricht bitte direkt an",
   "contact.action.missing": "Bitte fülle alle benötigten Felder aus",
   "contact.action.send": "Senden",

@@ -2,7 +2,7 @@
   "main.description": "We are your partner for modern and future-oriented software development. With a combination of expertise and enthusiasm, we bring your digital vision to life. We know that every customer is unique. That's why we develop and design custom software solutions that are perfectly tailored to your needs.",
   "main.career.button": "All vacancies",
   "main.blog.button": "All articles",
-  "main.services.button": "Learn more",
+  "main.services.button": "More about our services",
   "career.headline": "Apply now!",
   "career.mandatory-field": "* Mandatory field",
   "career.first-name": "First name",
@@ -48,14 +48,17 @@
   "contact.info-link": "<0>Please use our contact form or send us an email to <1>[email protected]</1></0>",
   "contact.info": "Please use our contact form or send us an email to [email protected]",
   "contact.name": "Name",
+  "contact.name-placeholder": "e.g. John Doe",
   "contact.email": "E-mail address",
+  "contact.email-placeholder": "e.g. [email protected]",
   "contact.message": "Your message to us",
+  "contact.message-placeholder": "e.g. Hello Satellytes, ...",
   "contact.mandatory-field": "Mandatory field",
-  "contact.error.name": "Your name is missing",
-  "contact.error.message": "Your message is missing",
-  "contact.error.email": "Your email is missing",
-  "contact.error.email-undefined": "Something is wrong with this email",
-  "contact.action.again-text": "Unfortunately, there was a mistake. Please try again. If this does not work, please send your message directly to",
+  "contact.error.name": "The field name is not filled in. Please fill in the field name to send the message.",
+  "contact.error.message": "The field message is not filled in. Please fill in the field message to send the message.",
+  "contact.error.email": "The field email is not filled in. Please fill in the field email to send the message.",
+  "contact.error.email-undefined": "Something is wrong with this email. Please check the email address and try again.",
+  "contact.action.again-text": "Unfortunately, there was a error. Please try again. If this does not work, please send your message directly to",
   "contact.action.missing": "Please fill in all required fields",
   "contact.action.send": "Send",
   "contact.action.again": "Send again",

@@ -95,18 +95,18 @@ const IllustrationStyled = styled(Illustration)`
 `;
 
 const ContactHeadline = styled.h3`
-  ${TextStyles.textS}
+  ${TextStyles.textR}
   margin: 0;
   font-weight: bold;
 `;
 
 const ContactTitle = styled.p`
-  ${TextStyles.textXS}
+  ${TextStyles.textS}
   margin: 0;
 `;
 
 const ContactMail = styled(Link)`
-  ${TextStyles.textS}
+  ${TextStyles.textR}
   color: ${theme.palette.text.link.default};
 
   &:hover {

@@ -29,7 +29,10 @@ const StyledTextArea = styled.textarea<{ $hasError?: boolean }>`
 `;
 
 export const TextArea = (
-  props: UseControllerProps<FormDataProps> & { label: string },
+  props: UseControllerProps<FormDataProps> & {
+    label: string;
+    placeholder?: string;
+  },
 ) => {
   const { field, fieldState, formState } = useController(props);
   const errorMessage = fieldState?.error?.message;
@@ -50,6 +53,7 @@ export const TextArea = (
         value={(field?.value as string) || ''}
         name={props.name}
         id={props.name}
+        placeholder={props.placeholder}
       />
 
       {errorMessage && <StyledErrorMessage>{errorMessage}</StyledErrorMessage>}

@@ -47,7 +47,10 @@ export const StyledErrorMessage = styled.span`
 `;
 
 export const TextInput = (
-  props: UseControllerProps<FormDataProps> & { label: string },
+  props: UseControllerProps<FormDataProps> & {
+    label: string;
+    placeholder?: string;
+  },
 ) => {
   const { field, fieldState, formState } = useController(props);
   const errorMessage = fieldState?.error?.message;
@@ -66,6 +69,7 @@ export const TextInput = (
         $hasError={Boolean(errorMessage)}
         disabled={formState.isSubmitting}
         id={props.name}
+        placeholder={props.placeholder}
         {...field}
         value={(field?.value as string) || ''}
       />

@@ -173,6 +173,7 @@ const Header: React.FC<HeaderProps> = (props) => {
       <SiteTitle
         to={props.siteTitleUrl || '/'}
         $lightTheme={Boolean(props.$lightTheme && !isHeaderTransparent)}
+        aria-label={'Link to ' + props.siteTitle + ' homepage'}
       >
         <HeaderSwoosh />
         {props.siteTitle}

@@ -31,6 +31,10 @@ const StyledSelection = styled.select`
 
   appearance: none;
   cursor: pointer;
+
+  @media (max-width: 768px) {
+    ${TextStyles.menuMetaMobile}
+  }
 `;
 
 export const StyledChevron = styled(Icon)<{ isEnglish: boolean }>`
@@ -45,13 +49,14 @@ export const LanguageSwitch = ({
   const { languages, language, t, changeLanguage } = useI18next();
 
   return (
-    <StyledNav aria-label={t('navigation.language-aria')} className={className}>
+    <StyledNav className={className}>
       <StyledChevron isEnglish={language === 'en'} show="caret_squared_down" />
       <StyledSelection
         onChange={(event) => {
           changeLanguage(event.target.value);
         }}
         value={language}
+        aria-label={t('navigation.language-aria')}
       >
         {languages.map((languageOfLink) => (
           <option value={languageOfLink} key={languageOfLink}>

@@ -35,8 +35,7 @@ const NavigationBackground = styled.div`
 const LegalLinks = styled.ul`
   list-style-type: none;
   align-self: end;
-  margin: 0;
-  margin-top: 24px;
+  margin: 24px 0 0;
   padding: 0;
 
   display: flex;
@@ -114,6 +113,10 @@ const LegalLink = styled(Link)<{ $isSelected: boolean }>`
   &:hover {
     color: ${theme.palette.text.defaultLight};
   }
+
+  @media (max-width: 768px) {
+    ${TextStyles.menuMetaMobile}
+  }
 `;
 
 /**
@@ -212,7 +215,7 @@ const Navigation: React.FC<NavigationProps> = ({
             target="_blank"
             rel="noopener noreferrer"
             href="https://www.linkedin.com/company/satellytes"
-            title="Go to the Satellytes LinkedIn profile"
+            title="Open Satellytes LinkedIn profile in a new tab"
           >
             <IconWrapper>
               <Icon show="linked_in" />
@@ -221,7 +224,7 @@ const Navigation: React.FC<NavigationProps> = ({
         </SocialLinkItem>
         <SocialLinkItem>
           <SocialLink
-            title="Go to the Satellytes Github profile"
+            title="Open Satellytes GitHub profile in a new tab"
             target="_blank"
             rel="noopener noreferrer"
             href="https://github.com/satellytes"
@@ -241,7 +244,7 @@ const Navigation: React.FC<NavigationProps> = ({
             {t('navigation.imprint')}
           </LegalLink>
         </li>
-        <span>·</span>
+        <li>·</li>
         <li>
           <LegalLink
             to="/data-privacy"

@@ -18,8 +18,8 @@ export const theme: DefaultTheme = {
       defaultDark: '#FFFFFF',
       secondary: 'rgba(32,40,64,0.5)',
       topline: '#3E61EE',
-      timestamp: 'rgba(0, 0, 0, 0.5)',
-      errorMessage: '#FF0D35',
+      timestamp: 'rgba(0, 0, 0, 0.65)',
+      errorMessage: '#EB0027',
       header: {
         default: '#FFFFFF',
         light: '#3E61EE',

@@ -51,6 +51,7 @@ export const WithAnchorHOC =
           href={'#' + generateAnchorId(props.children)}
           id={generateAnchorId(props.children)}
           $visible={hoverActive}
+          aria-hidden={true}
         >
           <Icon show={'anchor'} />
         </ShareSymbol>

@@ -19,7 +19,7 @@ const FollowPanelContainer = styled.div`
   font-size: 16px;
 
   ${up('md')} {
-    margin-top: 0px;
+    margin-top: 0;
     min-width: 240px;
   }
 `;
@@ -31,7 +31,7 @@ export const PanelText = styled.p`
   color: ${({ theme }) => theme.palette.text.default};
 `;
 
-const SocialLinks = styled.ul`
+const SocialLinks = styled.div`
   all: unset;
   order: 2;
   color: ${({ theme }) => theme.palette.text.link.default};
@@ -64,10 +64,10 @@ export const FollowPanel = ({ className }: FollowProps) => {
 
   return (
     <FollowPanelContainer className={className}>
-      <PanelText>{t('blog.follow')}</PanelText>
+      <PanelText aria-hidden={true}>{t('blog.follow')}</PanelText>
       <SocialLinks>
         <SocialLinkItem data-testid="rss-feed">
-          <Link to={rssUrl}>
+          <Link to={rssUrl} aria-label={t('blog.follow')}>
             <Icon show="rss" />
           </Link>
         </SocialLinkItem>

@@ -29,7 +29,10 @@ export const Address = () => {
       80331 München
       <br />
       <br />
-      <StyledLink to="https://g.page/satellytes?share">
+      <StyledLink
+        to="https://g.page/satellytes?share"
+        aria-label={'Open Satellytes Google Maps profile in a new tab'}
+      >
         Google Maps &gt;
       </StyledLink>
     </SectionHeader>

@@ -21,6 +21,7 @@ export const FirstName = ({ control }) => {
       <TextInput
         name={'first_name'}
         label={t('contact.name')}
+        placeholder={t('contact.name-placeholder')}
         control={control}
         rules={{ required: t('contact.error.name') }}
       />
@@ -35,6 +36,7 @@ export const Email = ({ control }) => {
       <TextInput
         name={'email'}
         label={t('contact.email')}
+        placeholder={t('contact.email-placeholder')}
         control={control}
         rules={{
           required: t('contact.error.email'),
@@ -59,6 +61,7 @@ export const MessageArea = ({ control }) => {
       <TextArea
         name={'message'}
         label={t('contact.message')}
+        placeholder={t('contact.message-placeholder')}
         control={control}
         rules={{ required: t('contact.error.message') }}
       />

@@ -6,6 +6,7 @@ import { FormData } from './form';
 
 const HoneypotFieldContainer = styled.div`
   ${hideVisually()}
+  aria-hidden: true;
 `;
 
 export const HoneypotField = (
@@ -14,14 +15,15 @@ export const HoneypotField = (
   const { field } = useController(props);
   return (
     <HoneypotFieldContainer>
-      <label>
+      <label aria-hidden={true}>
         {props.label}
         <input
           id={props.name}
           type="text"
           {...field}
           tabIndex={-1}
           autoComplete="false"
+          aria-hidden={true}
         />
       </label>
     </HoneypotFieldContainer>

@@ -61,7 +61,7 @@ const CustomerLogo = ({
 
   return (
     <CustomerLogoLayout $mobileWidth={mobileWidth} $desktopWidth={desktopWidth}>
-      <CustomerLogoSVG />
+      <CustomerLogoSVG aria-label={`Customer Logo: ${show}`} tabIndex={0} />
     </CustomerLogoLayout>
   );
 };

@@ -14,8 +14,7 @@ export const LandingPageTeaserGrid = styled.div`
     grid-auto-flow: row;
     grid-template-columns: repeat(auto-fit, minmax(242px, 1fr));
     gap: 72px;
-    margin: 0;
-    margin-bottom: 60px;
+    margin: 0 0 60px;
     padding: 0;
     overflow-x: hidden;
   }

@@ -123,12 +123,17 @@ export const TextStyles = {
 
     letter-spacing: -0.01em;
   `,
-  // MenuLaguage has the exact same configuration as MenuMeta
+  // MenuLanguage has the exact same configuration as MenuMeta
   menuMeta: css`
     font-weight: bold;
     font-size: 14px;
     line-height: 110%;
   `,
+  menuMetaMobile: css`
+    font-weight: bold;
+    font-size: 18px;
+    line-height: 110%;
+  `,
   label: css`
     font-weight: normal;
     font-size: 13px;

@@ -42,7 +42,8 @@ const StyledLink = styled.a<{ $disabled: boolean }>`
     $disabled &&
     css`
       opacity: 50%;
-      cursor: default;
+      cursor: not-allowed;
+      pointer-events: none;
     `}
 
   &:hover {
@@ -83,7 +84,8 @@ export const Pagination = ({
       <StyledLink
         onClick={onPreviousClick}
         $disabled={currentPage === 1}
-        aria-label="Next Page"
+        aria-label="Previous Page"
+        tabIndex={currentPage === 1 ? -1 : 0}
       >
         <Icon show={'arrow_left'} />
       </StyledLink>
@@ -101,7 +103,8 @@ export const Pagination = ({
       <StyledLink
         onClick={onNextClick}
         $disabled={currentPage === amountOfPages}
-        aria-label="Previous Page"
+        aria-label="Next Page"
+        tabIndex={currentPage === amountOfPages ? -1 : 0}
       >
         <Icon show={'arrow_right'} />
       </StyledLink>