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
diff --git a/src/views/AccessControl/LocalUserManagement/ModalSettings.vue b/src/views/AccessControl/LocalUserManagement/ModalSettings.vue
index 650cd56..8727b20 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 baf49e9..b426dd9 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>