feat: better a11y

khmm12 · Jun 25, 2024 · 931a7cc · 931a7cc
1 parent 8dd0760
commit 931a7cc
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 18 deletions.
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -6,7 +6,7 @@ type IconProps = Omit<JSX.SvgSVGAttributes<SVGSVGElement>, ForbiddenProps>
 
 export function SettingsIcon(props: IconProps): JSX.Element {
   return (
-    <svg aria-hidden xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" {...props}>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" {...props}>
       <g fill="none" fill-rule="evenodd" clip-rule="evenodd" stroke="currentColor" stroke-width="5">
         <path d="M82.015 5.591a60.824 60.824 0 0 1 11.009 4.565l-1.359 26.56 26.561-1.357a60.772 60.772 0 0 1 4.564 11.007l-19.744 17.825 19.744 17.824a60.81 60.81 0 0 1-4.564 11.008l-26.561-1.357 1.359 26.56a60.82 60.82 0 0 1-11.009 4.564l-17.824-19.744-17.826 19.744a60.801 60.801 0 0 1-11.007-4.564l1.358-26.56-26.56 1.357a60.814 60.814 0 0 1-4.565-11.008l19.744-17.824L5.591 46.366a60.772 60.772 0 0 1 4.564-11.007l26.561 1.357-1.358-26.56a60.876 60.876 0 0 1 11.007-4.565l17.826 19.744L82.015 5.591Z" />
         <circle cx="64" cy="64" r="21" />
@@ -17,7 +17,7 @@ export function SettingsIcon(props: IconProps): JSX.Element {
 
 export function CloseIcon(props: IconProps): JSX.Element {
   return (
-    <svg aria-hidden xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" {...props}>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" {...props}>
       <path
         fill="currentColor"
         d="M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7z"

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -62,7 +62,7 @@ export default function Modal(props: ModalProps): JSX.Element {
               <div class={css.header}>
                 <div class={css.titleWrapper}>
                   <Show when={props.icon}>
-                    <div aria-hidden class={css.icon}>
+                    <div aria-hidden="true" class={css.icon}>
                       {props.icon}
                     </div>
                   </Show>
@@ -71,7 +71,7 @@ export default function Modal(props: ModalProps): JSX.Element {
                   </h1>
                 </div>
                 <button class={css.closeButton} type="button" title="Close" onClick={handleCloseButtonClick}>
-                  <CloseIcon />
+                  <CloseIcon aria-hidden="true" />
                 </button>
               </div>
               <div class={css.body}>{props.children}</div>

diff --git a/src/components/SettingsButton/index.tsx b/src/components/SettingsButton/index.tsx
@@ -39,7 +39,7 @@ export default function SettingsButton(props: SettingsButtonProps): JSX.Element
       title={isLoading() ? 'Opening settings' : 'Open settings'}
       onClick={handleClick}
     >
-      <SettingsIcon ref={$svg} aria-hidden class={css.svg} />
+      <SettingsIcon ref={$svg} aria-hidden="true" class={css.svg} />
     </button>
   )
 }

diff --git a/src/components/SettingsDialog/components/SettingsForm/index.tsx b/src/components/SettingsDialog/components/SettingsForm/index.tsx
@@ -28,7 +28,7 @@ export default function SettingsForm(props: SettingsFormProps): JSX.Element {
   const ids = createUniqueIds(['birthDate'])
 
   return (
-    <Form class={css.container} role="form" onSubmit={props.onSubmit}>
+    <Form class={css.container} role="form" aria-label="Settings" onSubmit={props.onSubmit}>
       <Field name="birthDate" transform={parseDateValue}>
         {(field, input) => (
           <div class={css.formGroup}>

diff --git a/src/components/Time/Time.test.tsx b/src/components/Time/Time.test.tsx
@@ -19,15 +19,15 @@ describe('Time', () => {
   it('renders current date', () => {
     render(() => <Time />)
 
-    const date = screen.getByRole('timer', { current: 'date' })
+    const date = screen.getByLabelText('Date')
     expect(date).toBeDefined()
     expect(date).toHaveTextContent('05.03.2022')
   })
 
   it('renders current time', () => {
     render(() => <Time />)
 
-    const time = screen.getByRole('timer', { current: 'time' })
+    const time = screen.getByLabelText('Time')
     expect(time).toBeDefined()
     expect(time).toHaveTextContent('16:05:30')
   })
@@ -37,6 +37,6 @@ describe('Time', () => {
 
     vi.advanceTimersByTime(1000)
 
-    expect(screen.getByRole('timer', { current: 'time' })).toHaveTextContent('16:05:31')
+    expect(screen.getByLabelText('Time')).toHaveTextContent('16:05:31')
   })
 })
diff --git a/src/components/Time/index.tsx b/src/components/Time/index.tsx
@@ -9,17 +9,17 @@ export default function Time(): JSX.Element {
   const dateTime = createCurrentDateTime({ update: EverySecond })
 
   return (
-    <div class={css.container}>
-      <span aria-current="date" aria-live="polite" role="timer">
+    <time aria-live="polite" aria-atomic="true" aria-label="Current date time" class={css.container}>
+      <span aria-current="date" aria-label="Date">
         {format.date(dateTime())}
       </span>
-      <span aria-current="time" aria-live="polite" role="timer">
+      <span aria-current="time" aria-label="Time">
         {format.date(dateTime(), {
           hour: 'numeric',
           minute: 'numeric',
           second: 'numeric',
         })}
       </span>
-    </div>
+    </time>
   )
 }
diff --git a/src/components/TimeMilestones/components/Milestone/components/Bar/index.tsx b/src/components/TimeMilestones/components/Milestone/components/Bar/index.tsx
@@ -15,7 +15,13 @@ export default function Bar(_props: BarProps): JSX.Element {
   const props = mergeProps(_props, { width: 20, height: 5 })
 
   return (
-    <svg class={css.svg} aria-hidden preserveAspectRatio="none" viewBox={`0 0 ${props.width} ${props.height}`}>
+    <svg
+      class={css.svg}
+      role="figure"
+      aria-hidden="true"
+      preserveAspectRatio="none"
+      viewBox={`0 0 ${props.width} ${props.height}`}
+    >
       <For each={Bars}>
         {(index) => {
           const d = createMemo((): string => {

diff --git a/src/components/TimeMilestones/components/Milestone/index.tsx b/src/components/TimeMilestones/components/Milestone/index.tsx
@@ -22,10 +22,13 @@ export default function Milestone(props: MilestoneProps): JSX.Element {
   const formatValue = (value: number): string => formatPercent(round(value, 2)).replaceAll(/\s/g, '')
 
   return (
-    <div class={css.container}>
+    <div role="group" class={css.container}>
       <span class={css.value}>{formatValue(props.value)}</span>
       <Bar progress={props.value} />
-      <span class={css.description}>...{props.description}</span>
+      <span class={css.description}>
+        <span aria-hidden="true">...</span>
+        {props.description}
+      </span>
     </div>
   )
 }
diff --git a/src/components/TimeMilestones/index.tsx b/src/components/TimeMilestones/index.tsx
@@ -1,5 +1,6 @@
 import { type JSX, Show } from 'solid-js'
 import createCurrentDateTime, { EveryMinute } from '@/hooks/createCurrentDateTime'
+import createUniqueIds from '@/hooks/createUniqueIds'
 import asGetters from '@/utils/as-getters'
 import Milestone from './components/Milestone'
 import createTimeMilestones from './hooks/createTimeMilestones'
@@ -17,9 +18,13 @@ export default function TimeMilestones(): JSX.Element {
     }),
   )
 
+  const ids = createUniqueIds(['heading'])
+
   return (
-    <div class={css.container}>
-      <h1 class={css.title}>We're now through...</h1>
+    <div role="group" aria-describedby={ids.heading} aria-label="Time milestones" class={css.container}>
+      <h1 id={ids.heading} class={css.title}>
+        We're now through...
+      </h1>
       <div class={css.items}>
         <Milestone value={milestones.day} description="of day" />
         <Milestone value={milestones.week} description="of week" />

diff --git a/src/components/TimeMilestones/styles.ts b/src/components/TimeMilestones/styles.ts
@@ -15,6 +15,7 @@ export const container = css`
 
 export const title = css`
   font-size: 3.6rem;
+  font-weight: bold;
   margin: 0 0 2.4rem;
 
   @media ${beforeSmall} {