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: blog page accessibility problems #791

Merged
merged 9 commits into from
Jan 30, 2024
Merged

fix: blog page accessibility problems #791

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4354d15
fix: button now have the correct aria-lable
Jan 9, 2024
a296d6a
feat: added aria-lable to rss button
Jan 9, 2024
9356554
feat: made timestamp color contrast AA complient
Jan 9, 2024
fe77cad
fix: netlify build error fix
Jan 15, 2024
c3055a8
Merge branch 'main' into chore/a11y/blog-fixes
georgiee Jan 16, 2024
e1e5702
fix: add aria-hidden to pagination button, so it can't be clicked by …
Jan 22, 2024
fd4cf7c
chore: ran prettier so test pass
Jan 22, 2024
6942ced
fix: format fix
Jan 29, 2024
ecf3d1e
Merge branch 'main' into chore/a11y/blog-fixes
maxmarkus Jan 30, 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
2 changes: 1 addition & 1 deletion src/components/layout/theme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const theme: DefaultTheme = {
defaultDark: '#FFFFFF',
secondary: 'rgba(32,40,64,0.5)',
topline: '#3E61EE',
timestamp: 'rgba(0, 0, 0, 0.5)',
timestamp: 'rgba(0, 0, 0, 0.65)',
virus-rpi marked this conversation as resolved.
Show resolved Hide resolved
errorMessage: '#FF0D35',
header: {
default: '#FFFFFF',
Expand Down
8 changes: 4 additions & 4 deletions src/components/pages/blog-post/follow-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const FollowPanelContainer = styled.div`
font-size: 16px;

${up('md')} {
margin-top: 0px;
margin-top: 0;
virus-rpi marked this conversation as resolved.
Show resolved Hide resolved
min-width: 240px;
}
`;
Expand All @@ -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};
Expand Down Expand Up @@ -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>
Expand Down
11 changes: 8 additions & 3 deletions src/components/ui/pagination/pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,8 @@ const StyledLink = styled.a<{ $disabled: boolean }>`
$disabled &&
css`
opacity: 50%;
cursor: default;
cursor: not-allowed;
pointer-events: none;
`}

&:hover {
Expand Down Expand Up @@ -82,8 +83,10 @@ export const Pagination = ({
<PaginationContainer className={className}>
<StyledLink
onClick={onPreviousClick}
aria-hidden={currentPage === 1}
$disabled={currentPage === 1}
aria-label="Next Page"
aria-label="Previous Page"
tabIndex={currentPage === 1 ? -1 : 0}
virus-rpi marked this conversation as resolved.
Show resolved Hide resolved
>
<Icon show={'arrow_left'} />
</StyledLink>
Expand All @@ -101,7 +104,9 @@ export const Pagination = ({
<StyledLink
onClick={onNextClick}
$disabled={currentPage === amountOfPages}
aria-label="Previous Page"
aria-hidden={currentPage === amountOfPages}
aria-label="Next Page"
tabIndex={currentPage === amountOfPages ? -1 : 0}
virus-rpi marked this conversation as resolved.
Show resolved Hide resolved
>
<Icon show={'arrow_right'} />
</StyledLink>
Expand Down