♿️ Improve components accessibility

Frontendland · Frontendland · commit e72a8ed1eef6 · 2024-08-03T20:20:31.000+02:00
diff --git a/src/components/Menu/Menu.astro b/src/components/Menu/Menu.astro
@@ -45,7 +45,7 @@ const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('
             )}
 
             {!centerLogo && logo?.html && (
-                <a href="/">
+                <a href="/" aria-label={logo.alt || 'Logo'}>
                     <Fragment set:html={logo.html} />
                 </a>
             )}
@@ -77,7 +77,7 @@ const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('
         )}
 
         {centerLogo && logo?.html && (
-            <a href="/">
+            <a href="/" aria-label={logo.alt || 'Logo'}>
                 <Fragment set:html={logo.html} />
             </a>
         )}
diff --git a/src/components/Menu/Menu.svelte b/src/components/Menu/Menu.svelte
@@ -43,7 +43,9 @@
             {/if}
 
             {#if !centerLogo && logo?.html}
-                <a href="/">{@html logo.html}</a>
+                <a href="/" aria-label={logo.alt || 'Logo'}>
+                    {@html logo.html}
+                </a>
             {/if}
         
             {#if items?.length}
@@ -73,7 +75,9 @@
         {/if}
             
         {#if centerLogo && logo?.html}
-            <a href="/">{@html logo.html}</a>
+            <a href="/" aria-label={logo.alt || 'Logo'}>
+                {@html logo.html}
+            </a>
         {/if}
 
         {#if logo?.url && centerLogo}
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -55,6 +55,7 @@ const Menu = ({
                         <a
                             href="/"
                             dangerouslySetInnerHTML={{ __html: logo.html }}
+                            aria-label={logo.alt || 'Logo'}
                         />
                     )}
 
@@ -88,6 +89,7 @@ const Menu = ({
                     <a
                         href="/"
                         dangerouslySetInnerHTML={{ __html: logo.html }}
+                        aria-label={logo.alt || 'Logo'}
                     />
                 )}
 
diff --git a/src/components/ThemeSwitcher/ThemeSwitcher.astro b/src/components/ThemeSwitcher/ThemeSwitcher.astro
@@ -38,6 +38,7 @@ const buttonClasses = [
         <button
             style={!useIcons ? `background:${theme};` : undefined}
             data-theme={themes[theme]}
+            aria-label={themes[theme]}
             class:list={buttonClasses}
         >
             {index === 0 && <slot name="primaryIcon" />}
diff --git a/src/components/ThemeSwitcher/ThemeSwitcher.svelte b/src/components/ThemeSwitcher/ThemeSwitcher.svelte
@@ -61,9 +61,10 @@
 >
     {#each Object.keys(themes) as theme, index}
         <button
+            on:click={() => setTheme(toggle ? index : themes[theme])}
             style={!useIcons ? `background:${theme};` : undefined}
             data-active={currentTheme === themes[theme]}
-            on:click={() => setTheme(toggle ? index : themes[theme])}
+            aria-label={themes[theme]}
             class={classNames([
                 styles.switch,
                 useIcons && styles.icons
diff --git a/src/components/ThemeSwitcher/ThemeSwitcher.tsx b/src/components/ThemeSwitcher/ThemeSwitcher.tsx
@@ -70,8 +70,9 @@ const ThemeSwitcher = ({
             {Object.keys(themes as {}).map((theme, index) => (
                 <button
                     key={index}
-                    data-active={currentTheme === themes[theme]}
                     onClick={() => setTheme(toggle ? index : themes[theme])}
+                    data-active={currentTheme === themes[theme]}
+                    aria-label={themes[theme]}
                     style={!useIcons ? { background: theme } : undefined}
                     className={classNames([
                         styles.switch,
diff --git a/src/data.js b/src/data.js
@@ -14,11 +14,27 @@ export const accordionItems = [{
 }]
 
 export const avatarGroup = [
-    "/img/avatar0.png",
-    "/img/avatar1.png",
-    "/img/avatar2.png",
-    "/img/avatar3.png",
-    "/img/avatar4.png"
+    '/img/avatar0.png',
+    '/img/avatar1.png',
+    '/img/avatar2.png',
+    '/img/avatar3.png',
+    '/img/avatar4.png'
+]
+
+export const avatarGroupAlt1 = [
+    'avatar0',
+    'avatar1',
+    'avatar2',
+    'avatar3',
+    'avatar4'
+]
+
+export const avatarGroupAlt2 = [
+    'Marcus',
+    'Giuseppe',
+    'Emily',
+    'Frank',
+    'Jonathan'
 ]
 
 export const tabItems = [{
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -26,7 +26,12 @@ import TimelineItem from '@components/TimelineItem/TimelineItem.astro'
 import infoIcon from '../icons/info.svg?raw'
 import gitHubIcon from '../icons/github.svg?raw'
 
-import { themes, accordionItems, avatarGroup } from '@data'
+import {
+    themes,
+    accordionItems,
+    avatarGroup,
+    avatarGroupAlt2
+} from '@data'
 
 import logo from '../../public/img/logo.svg?raw'
 
@@ -81,6 +86,7 @@ const tabItems = [{
             <Avatar
                 size={[30, 40, 50, 40, 30]}
                 img={avatarGroup}
+                alt={avatarGroupAlt2}
             />
         </CardWrapper>
         <CardWrapper title="Badge" href="/badge">
@@ -197,6 +203,10 @@ const tabItems = [{
         color: #61DAFB;
     }
 
+    .theme-light .r {
+        color: #00a0cc;
+    }
+
     .cta {
         text-align: center;
         display: flex;
diff --git a/src/scss/global/theme.scss b/src/scss/global/theme.scss
@@ -7,7 +7,7 @@
             --w-color-primary: #FFF;
             --w-color-primary-10: #DDD;
             --w-color-primary-20: #BBB;
-            --w-color-primary-30: #555;
+            --w-color-primary-30: #757575;
             --w-color-primary-40: #333;
             --w-color-primary-50: #252525;
             --w-color-primary-60: #111;
@@ -22,7 +22,7 @@
             --w-color-warning: #FF9F43;
             --w-color-warning-accent: #f7AA61;
             --w-color-warning-fg: #000;
-            --w-color-alert: #E73F40;
+            --w-color-alert: #de3233;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #FFF;
         }
@@ -49,7 +49,7 @@
             --w-color-warning: #FF9F43;
             --w-color-warning-accent: #f7AA61;
             --w-color-warning-fg: #000;
-            --w-color-alert: #E73F40;
+            --w-color-alert: #de3233;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #FFF;
         }
@@ -61,7 +61,7 @@
             --w-color-primary: #FFF;
             --w-color-primary-10: #EEE;
             --w-color-primary-20: #a5b7cf;
-            --w-color-primary-30: #516580;
+            --w-color-primary-30: #667f9e;
             --w-color-primary-40: #2d4463;
             --w-color-primary-50: #20344e;
             --w-color-primary-60: #101a2d;
@@ -76,7 +76,7 @@
             --w-color-warning: #FF9F43;
             --w-color-warning-accent: #f7AA61;
             --w-color-warning-fg: #000;
-            --w-color-alert: #E73F40;
+            --w-color-alert: #de3233;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #FFF;
         }
@@ -103,7 +103,7 @@
             --w-color-warning: #FF9F43;
             --w-color-warning-accent: #f7AA61;
             --w-color-warning-fg: #000;
-            --w-color-alert: #E73F40;
+            --w-color-alert: #de3233;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #FFF;
         }
@@ -130,7 +130,7 @@
             --w-color-warning: #FF9F43;
             --w-color-warning-accent: #f7AA61;
             --w-color-warning-fg: #000;
-            --w-color-alert: #E73F40;
+            --w-color-alert: #de3233;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #FFF;
         }
diff --git a/src/static/Examples.astro b/src/static/Examples.astro
@@ -1,6 +1,8 @@
 ---
+import Alert from '@components/Alert/Alert.astro'
 import Card from '@components/Card/Card.astro'
 import Input from '@components/Input/Input.astro'
+import Icon from '@components/Icon/Icon.astro'
 import Badge from '@components/Badge/Badge.astro'
 import Button from '@components/Button/Button.astro'
 import Checkbox from '@components/Checkbox/Checkbox.astro'
@@ -15,7 +17,7 @@ import Rating from '@components/Rating/Rating.astro'
 import Spinner from '@components/Spinner/Spinner.astro'
 import TimelineItem from '@components/TimelineItem/TimelineItem.astro'
 
-import { avatarGroup } from '@data'
+import { avatarGroup, avatarGroupAlt2 } from '@data'
 
 const tabItems = [{
     label: 'Profile',
@@ -207,10 +209,17 @@ const tasks = [
                     <Avatar
                         size={[30, 40, 50, 40, 30]}
                         img={avatarGroup}
+                        alt={avatarGroupAlt2}
                     />
                 </a>
             </div>
         </Card>
+
+        <Alert title="Deployments">
+            <Icon type="github" slot="icon" />
+            <span>Connect your project to GitHub to start running automatic deployments.</span>
+            <Button className="connect">Connect</Button>
+        </Alert>
     </div>
 </div>
 
@@ -265,4 +274,9 @@ const tasks = [
             display: block;
         }
     }
+
+    .connect {
+        @include spacing(mt-sm);
+        @include typography(md);
+    }
 </style>

Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,7 @@ const buttonClasses = [`
`38`	`38`	`<button`
`39`	`39`	style={!useIcons ? `background:${theme};` : undefined}
`40`	`40`	`data-theme={themes[theme]}`
	`41`	`+ aria-label={themes[theme]}`
`41`	`42`	`class:list={buttonClasses}`
`42`	`43`	`>`
`43`	`44`	`{index === 0 && <slot name="primaryIcon" />}`