From 9a9092dc021b10c26dfaba5c39ea02c4fa563f14 Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Mon, 4 May 2020 08:24:21 -0700
Subject: Fix accessibility issue on local user page

Updates template to use form attribute on submit button to allow
keyboard users to submit modal forms with the enter key. These
updates were made to the local user add/edit modal and the
account settings modal.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Id217cd68e4576ee099598591df6edbead0f1de8b
---
 .../LocalUserManagement/ModalSettings.vue           | 16 ++++++++++++++--
 .../AccessControl/LocalUserManagement/ModalUser.vue | 21 +++++++++++++--------
 2 files changed, 27 insertions(+), 10 deletions(-)

(limited to 'src/views')

diff --git a/src/views/AccessControl/LocalUserManagement/ModalSettings.vue b/src/views/AccessControl/LocalUserManagement/ModalSettings.vue
index 650cd560..8727b20e 100644
--- a/src/views/AccessControl/LocalUserManagement/ModalSettings.vue
+++ b/src/views/AccessControl/LocalUserManagement/ModalSettings.vue
@@ -3,11 +3,10 @@
     id="modal-settings"
     ref="modal"
     :title="$t('pageLocalUserManagement.accountPolicySettings')"
-    :ok-title="$t('global.action.save')"
     @ok="onOk"
     @hidden="resetForm"
   >
-    <b-form novalidate @submit="handleSubmit">
+    <b-form id="form-settings" novalidate @submit.prevent="handleSubmit">
       <b-container>
         <b-row>
           <b-col>
@@ -102,6 +101,19 @@
         </b-row>
       </b-container>
     </b-form>
+    <template v-slot:modal-footer="{ ok, cancel }">
+      <b-button variant="secondary" @click="cancel()">
+        {{ $t('global.action.cancel') }}
+      </b-button>
+      <b-button
+        form="form-settings"
+        type="submit"
+        variant="primary"
+        @click="ok()"
+      >
+        {{ $t('global.action.save') }}
+      </b-button>
+    </template>
   </b-modal>
 </template>
 
diff --git a/src/views/AccessControl/LocalUserManagement/ModalUser.vue b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
index baf49e91..b426dd91 100644
--- a/src/views/AccessControl/LocalUserManagement/ModalUser.vue
+++ b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
@@ -8,7 +8,7 @@
         {{ $t('pageLocalUserManagement.editUser') }}
       </template>
     </template>
-    <b-form novalidate @submit="handleSubmit">
+    <b-form id="form-user" novalidate @submit.prevent="handleSubmit">
       <b-container>
         <!-- Manual unlock form control -->
         <b-row v-if="!newUser && manualUnlockPolicy && user.Locked">
@@ -186,13 +186,18 @@
         </b-row>
       </b-container>
     </b-form>
-    <template v-slot:modal-ok>
-      <template v-if="newUser">
-        {{ $t('pageLocalUserManagement.addUser') }}
-      </template>
-      <template v-else>
-        {{ $t('global.action.save') }}
-      </template>
+    <template v-slot:modal-footer="{ ok, cancel }">
+      <b-button variant="secondary" @click="cancel()">
+        {{ $t('global.action.cancel') }}
+      </b-button>
+      <b-button form="form-user" type="submit" variant="primary" @click="ok()">
+        <template v-if="newUser">
+          {{ $t('pageLocalUserManagement.addUser') }}
+        </template>
+        <template v-else>
+          {{ $t('global.action.save') }}
+        </template>
+      </b-button>
     </template>
   </b-modal>
 </template>
-- 
cgit v1.2.3