From dca8b616b873610a0effcfc1163b84d438d8fb6e Mon Sep 17 00:00:00 2001
From: Caleb Rogers <caleb@calebjay.com>
Date: Sat, 20 Mar 2021 12:45:07 +0800
Subject: [PATCH] Add name attribute to filter buttons to guarantee
 accessibility

Many screen readers will read button contents, but adding a name
ensures this functionality more broadly.
---
 src/components/Map.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Map.vue b/src/components/Map.vue
index f2b99d2..de067ed 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -4,7 +4,7 @@
 
     <div class="container-fluid px-1 pt-7 pb-4 filter-buttons-container" :class="{ desktop: $vuetify.breakpoint.mdAndUp, 'sidebar-expanded': appState.factoryDetailsExpanded }" v-if="appState.isInitialPage">
       <display-setting-bottom-sheet />
-      <v-btn class="mx-2 mb-5 primary--text" v-for="button in filterButtonsData" :key="button.value" @click="onClickFilterButton(button.value)" rounded :class="{ 'v-btn--active': checkActive(button.value) }" color="white">
+      <v-btn class="mx-2 mb-5 primary--text" v-for="button in filterButtonsData" :key="button.value" @click="onClickFilterButton(button.value)" rounded :class="{ 'v-btn--active': checkActive(button.value) }" color="white" :name="button.text">
         <v-icon :color="button.color">mdi-map-marker</v-icon>
         {{ button.text }}
       </v-btn>
@@ -220,7 +220,8 @@ export default createComponent({
     const filterButtonsData = defaultFactoryDisplayStatuses.map(v => ({
       text: getDisplayStatusText(v),
       color: getDisplayStatusColor(v),
-      value: v
+      value: v,
+      name: v
     }))
 
     return {