juyung/devscard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix social links accessibility (#112)

Browse source
This commit is contained in:
Szymon Kin 2022-12-04 18:42:11 +01:00 committed by GitHub
parent 47a23ca34a
commit 4307e95b64
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 20 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/atoms/icon-button.astro
View file

@ -9,6 +9,7 @@ export interface Props {
target?: astroHTML.JSX.AnchorHTMLAttributes['target'];
href: string;
size: IconButtonSize;
'aria-label'?: astroHTML.JSX.AnchorHTMLAttributes['aria-label'];
}
const sizeMap: Record<IconButtonSize, string> = {
@ -16,7 +17,7 @@ const sizeMap: Record<IconButtonSize, string> = {
large: 'w-9 h-9',
};
const { icon, href, target, size } = Astro.props;
const { icon, href, target, size, ...rest } = Astro.props;
---
<a
@ -36,6 +37,7 @@ const { icon, href, target, size } = Astro.props;
'focus:ring-primary-500',
sizeMap[size],
]}
{...rest}
>
<Icon client:load name={icon} size={16} />
</a>

1
src/components/atoms/sidebar-item.tsx
View file

@ -27,6 +27,7 @@ const SidebarItem = ({ section, icon, title = '' }: SidebarItemProps) => {
${active ? 'bg-primary-600 text-white' : 'bg-white text-gray-400 hover:bg-primary-600 hover:text-white'}
`}
aria-current={active ? 'page' : undefined}
aria-label={`${section} section`}
>
<Icon name={icon} size={20} />
</a>

6
src/components/organisms/project-timeline-item.astro
View file

@ -46,7 +46,11 @@ const { alt, ...sharedImageProps } = {
/>
</div>
<div class:list={['flex', 'gap-2']}>
{socials?.map(({ icon, url }) => <IconButton icon={icon} href={url} target="_blank" size="small" />)}
{
socials?.map(({ icon, url, name: socialName }) => (
<IconButton icon={icon} href={url} target="_blank" size="small" aria-label={socialName} />
))
}
</div>
</div>
<Image

4
src/components/organisms/testimonial.astro
View file

@ -26,8 +26,8 @@ const {
{
socials && (
<div class:list={['flex', 'gap-3']}>
{socials.map(({ icon, url }) => (
<IconButton icon={icon} href={url} target="_blank" size="small" />
{socials.map(({ icon, url, name }) => (
<IconButton icon={icon} href={url} target="_blank" size="small" aria-label={name} />
))}
</div>
)

6
src/components/organisms/work-timeline-item.astro
View file

@ -22,7 +22,11 @@ const WorkTimelineItem = 'div';
</Typography>
</div>
<div class:list={['flex', 'flex-wrap', 'gap-2']}>
{job.socials?.map(({ icon, url }) => <IconButton icon={icon} href={url} target="_blank" size="small" />)}
{
job.socials?.map(({ icon, url, name }) => (
<IconButton icon={icon} href={url} target="_blank" size="small" aria-label={name} />
))
}
</div>
</div>
<Timestamp

6
src/components/sections/main-section.astro
View file

@ -32,6 +32,8 @@ const section: Section = 'main';
src={image}
alt={fullName}
class:list={['w-24', 'h-24', 'sm:w-36', 'sm:h-36', 'md:w-52', 'md:h-52', 'rounded-lg', 'max-w-none']}
format="webp"
aspectRatio="1/1"
/>
<Button href={url} download={downloadedFileName}>{label}</Button>
</div>
@ -44,8 +46,8 @@ const section: Section = 'main';
{
socials.length > 0 && (
<div class:list={['flex', 'gap-3', 'flex-wrap', 'sm:flex-nowrap']}>
{socials.map(({ icon, url: iconUrl }) => (
<IconButton href={iconUrl} icon={icon} size="small" target="_blank" />
{socials.map(({ icon, url: iconUrl, name }) => (
<IconButton href={iconUrl} icon={icon} size="small" target="_blank" aria-label={name} />
))}
</div>
)