improve html table accessibility

jamband · Oct 16, 2023 · 42739a4 · 42739a4
1 parent c31a8cd
commit 42739a4
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/src/components/browser-support/component.astro b/src/components/browser-support/component.astro
@@ -19,16 +19,18 @@ const { items } = Astro.props;
   <thead class={styles.headerContainer}>
     <tr class={styles.row}>
       <th class={styles.header}></th>
-      <th class={styles.header}>chrome</th>
-      <th class={styles.header}>firefox</th>
-      <th class={styles.header}>safari</th>
+      <th scope="col" class={styles.header}>chrome</th>
+      <th scope="col" class={styles.header}>firefox</th>
+      <th scope="col" class={styles.header}>safari</th>
     </tr>
   </thead>
   <tbody>
     {
       items.map((item) => (
         <tr class={styles.row}>
-          <td class={styles.data}>{item.value}</td>
+          <th scope="row" class={styles.data}>
+            {item.value}
+          </th>
           <td class={styles.data}>{item.chrome}</td>
           <td class={styles.data}>{item.firefox}</td>
           {item.safari === "tp" ? (