Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: footer accessibility problems #793

Merged
merged 10 commits into from
Feb 6, 2024
Merged

fix: footer accessibility problems #793

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
5453b49
feat: increase language switch text size on mobile
Jan 15, 2024
8b78e75
feat: add aria-label to language switcher
Jan 15, 2024
7777d71
feat: make legal links bigger on mobile
Jan 15, 2024
464d7a2
fix: state that social links will open a tab
Jan 15, 2024
b97c165
fix: converted span to li because lists should only contain li
Jan 15, 2024
d7b1edd
fix: netlify build error fix
Jan 15, 2024
d0b2633
Merge branch 'main' into chore/a11y/footer-fixes
Jan 30, 2024
cd456ed
feat: make small dot aria hidden
Jan 30, 2024
7d54e9c
fix: ran `yarn format`
Jan 30, 2024
b48056c
Merge branch 'main' into chore/a11y/footer-fixes
virus-rpi Feb 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/components/layout/header/language-switch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }>`
Expand All @@ -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}>
Expand Down
13 changes: 8 additions & 5 deletions src/components/layout/navigation/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -114,6 +113,10 @@ const LegalLink = styled(Link)<{ $isSelected: boolean }>`
&:hover {
color: ${theme.palette.text.defaultLight};
}

@media (max-width: 768px) {
${TextStyles.menuMetaMobile}
}
`;

/**
Expand Down Expand Up @@ -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" />
Expand All @@ -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"
Expand All @@ -241,7 +244,7 @@ const Navigation: React.FC<NavigationProps> = ({
{t('navigation.imprint')}
</LegalLink>
</li>
<span>·</span>
<li>·</li>
virus-rpi marked this conversation as resolved.
Show resolved Hide resolved
<li>
<LegalLink
to="/data-privacy"
Expand Down
7 changes: 6 additions & 1 deletion src/components/typography.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
5 changes: 4 additions & 1 deletion src/templates/blog-post.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,10 @@ export const Head = ({
const { author, seoMetaText, title, publicationDate, heroImage } =
data.contentfulBlogPost;

const shareImagePath = heroImage.shareImage.resize.src;
let shareImagePath = '';
if (heroImage && heroImage.shareImage && heroImage.shareImage.resize) {
virus-rpi marked this conversation as resolved.
Show resolved Hide resolved
shareImagePath = heroImage.shareImage.resize.src;
}

/*
* SEO Notes:
Expand Down