Improved: code to add keyboard accessibility to form modals (#20)

hotwax · Nov 22, 2023 · eb5aaa3 · eb5aaa3
1 parent bb7d313
commit eb5aaa3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 17 deletions.
diff --git a/src/components/FacilityAddressModal.vue b/src/components/FacilityAddressModal.vue
@@ -24,13 +24,13 @@
         <ion-label>{{ translate("City") }} <ion-text color="danger">*</ion-text></ion-label>
         <ion-input v-model="address.city" slot="end" />
       </ion-item>
-      <ion-item>
+      <ion-item @keyup.enter.stop>
         <ion-label>{{ translate("Country") }}</ion-label>
         <ion-select interface="popover" :placeholder="translate('Select')" @ionChange="updateState($event)" v-model="address.countryGeoId">
           <ion-select-option v-for="(country, index) in countries" :key="index" :value="country.geoId">{{ country.geoName }}</ion-select-option>
         </ion-select>
       </ion-item>
-      <ion-item>
+      <ion-item @keyup.enter.stop>
         <ion-label>{{ translate("State") }}</ion-label>
         {{ address.countryGeoId }}
         <ion-select interface="popover" :placeholder="translate('Select')" v-model="address.stateGeoId">

diff --git a/src/components/FacilityGeoPointModal.vue b/src/components/FacilityGeoPointModal.vue
@@ -11,21 +11,23 @@
   </ion-header>
 
   <ion-content>
-    <ion-item class="ion-margin-bottom">
-      <ion-input placeholder="Zipcode" v-model="geoPoint.postalCode" />
-      <ion-button fill="outline" @click="generateLatLong">
-        {{ translate("Generate") }}
-        <ion-icon slot="end" :icon="colorWandOutline" />
-      </ion-button>
-    </ion-item>
-    <ion-item>
-      <ion-label>{{ translate("Latitude") }}</ion-label>
-      <ion-input v-model="geoPoint.latitude" slot="end"/>
-    </ion-item>
-    <ion-item>
-      <ion-label>{{ translate("Longitude") }}</ion-label>
-      <ion-input v-model="geoPoint.longitude" slot="end" />
-    </ion-item>
+    <form @keyup.enter="saveGeoPoint">
+      <ion-item class="ion-margin-bottom">
+        <ion-input placeholder="Zipcode" v-model="geoPoint.postalCode" />
+        <ion-button fill="outline" @click="generateLatLong">
+          {{ translate("Generate") }}
+          <ion-icon slot="end" :icon="colorWandOutline" />
+        </ion-button>
+      </ion-item>
+      <ion-item>
+        <ion-label>{{ translate("Latitude") }}</ion-label>
+        <ion-input v-model="geoPoint.latitude" slot="end"/>
+      </ion-item>
+      <ion-item>
+        <ion-label>{{ translate("Longitude") }}</ion-label>
+        <ion-input v-model="geoPoint.longitude" slot="end" />
+      </ion-item>
+    </form>
   </ion-content>
 
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">