Fix social links accessibility (#112)

src/components/atoms/icon-button.astro

@@ -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>

src/components/atoms/sidebar-item.tsx

@@ -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>

src/components/organisms/project-timeline-item.astro

@@ -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

src/components/organisms/testimonial.astro

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

src/components/organisms/work-timeline-item.astro

@@ -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

src/components/sections/main-section.astro

@@ -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 }) => (
+              {socials.map(({ icon, url: iconUrl, name }) => (
-                <IconButton href={iconUrl} icon={icon} size="small" target="_blank" />
+                <IconButton href={iconUrl} icon={icon} size="small" target="_blank" aria-label={name} />
               ))}
             </div>
           )