feat:検査陽性者の状況のsvgのrole属性を修正し、aria-labelに具体的人数を追加

components/ConfirmedCasesTable.vue

@@ -4,6 +4,10 @@
     viewBox="0 0 340 120"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    :aria-label="
+      ariaLabel(検査実施人数, 陽性物数, 入院中, 軽症中等症, 重症, 死亡, 退院)
+    "
   >
     <mask id="path-1-inside-1" fill="white">
       <path
@@ -200,6 +204,19 @@ export default {
           return 0
         }
       }
+    },
+    /** グラフ内容がわかる支援技術用テキストの中身を取得する **/
+    ariaLabel(
+      inspected,
+      positive,
+      hospitalized,
+      mild,
+      critically,
+      deceased,
+      discharged
+    ) {
+      const ariaLabel = `検査陽性者の状況: 検査実施人数は${inspected}人、うち累積の陽性者数は${positive}人です。入院中は${hospitalized}人で、うち軽症・中等症は${mild}人、また重症は${critically}人です。さらに死亡は${deceased}人、退院は${discharged}人です。`
+      return ariaLabel
     }
   }
 }

components/SideNavigation.vue

@@ -33,9 +33,7 @@
           class="SideNavigation-ListItemContainer"
           @click="closeNavi"
         >
-          <div role="listitem">
-            <ListItem :link="item.link" :icon="item.icon" :title="item.title" role="link" />
-          </div>
+          <ListItem :link="item.link" :icon="item.icon" :title="item.title" />
           <v-divider v-show="item.divider" class="SideNavigation-Divider" />
         </v-container>
       </v-list>
@@ -258,7 +256,7 @@ export default {
     left: 0;
     display: block !important;
     width: 100%;
-    z-index: z-index-of(opened-side-navigation);    
+    z-index: z-index-of(opened-side-navigation);
     background-color: $white;
   }
 }

pages/index.vue

@@ -19,10 +19,7 @@
           :title-id="'details-of-confirmed-cases'"
           :date="headerItem.date"
         >
-          <confirmed-cases-table
-            aria-label="検査陽性者の状況"
-            v-bind="confirmedCases"
-          />
+          <confirmed-cases-table v-bind="confirmedCases" />
         </svg-card>
       </v-col>
       <v-col cols="12" md="6" class="DataCard">