fix(settings): federation scope menu a11y

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

diff --git a/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue
index e02cbb7db01fc44c7ef5cea7143b85954d38b5c2..a39f550eee923c825b2a79c90dd69fb99a146b3e 100644 (file)
--- a/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue
@@ -21,29 +21,33 @@
 -->
 
 <template>
-       <NcActions :class="{ 'federation-actions': !additional, 'federation-actions--additional': additional }"
+       <NcActions class="federation-actions"
+               :class="{ 'federation-actions--additional': additional }"
                :aria-label="ariaLabel"
                :default-icon="scopeIcon"
                :disabled="disabled">
-               <FederationControlAction v-for="federationScope in federationScopes"
+               <NcActionButton v-for="federationScope in federationScopes"
                        :key="federationScope.name"
-                       :active-scope="scope"
-                       :display-name="federationScope.displayName"
-                       :handle-scope-change="changeScope"
-                       :icon-class="federationScope.iconClass"
-                       :is-supported-scope="supportedScopes.includes(federationScope.name)"
-                       :name="federationScope.name"
-                       :tooltip-disabled="federationScope.tooltipDisabled"
-                       :tooltip="federationScope.tooltip" />
+                       class="federation-actions__btn"
+                       :class="{ 'federation-actions__btn--active': scope === federationScope.name }"
+                       :close-after-click="true"
+                       :disabled="!supportedScopes.includes(federationScope.name)"
+                       :icon="federationScope.iconClass"
+                       :name="federationScope.displayName"
+                       type="radio"
+                       :value="federationScope.name"
+                       :model-value="scope"
+                       @update:modelValue="changeScope">
+                       {{ supportedScopes.includes(federationScope.name) ? federationScope.tooltip : federationScope.tooltipDisabled }}
+               </NcActionButton>
        </NcActions>
 </template>
 
 <script>
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import { loadState } from '@nextcloud/initial-state'
 
-import FederationControlAction from './FederationControlAction.vue'
-
 import {
        ACCOUNT_PROPERTY_READABLE_ENUM,
        ACCOUNT_SETTING_PROPERTY_READABLE_ENUM,
@@ -66,7 +70,7 @@ export default {
 
        components: {
                NcActions,
-               FederationControlAction,
+               NcActionButton,
        },
 
        props: {
@@ -194,14 +198,23 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-       .federation-actions--additional {
-               &::v-deep button {
+.federation-actions {
+       &--additional {
+               &:deep(button) {
                        // TODO remove this hack
-                       padding-bottom: 7px;
                        height: 30px !important;
                        min-height: 30px !important;
                        width: 30px !important;
                        min-width: 30px !important;
                }
        }
+
+       &__btn {
+               &--active {
+                       background-color: var(--color-primary-element-light) !important;
+                       box-shadow: inset 2px 0 var(--color-primary-element) !important;
+                       border-radius: 0px !important;
+               }
+       }
+}
 </style>

diff --git a/apps/settings/src/components/PersonalInfo/shared/FederationControlAction.vue b/apps/settings/src/components/PersonalInfo/shared/FederationControlAction.vue
deleted file mode 100644 (file)
index 4f52a9d..0000000
--- a/apps/settings/src/components/PersonalInfo/shared/FederationControlAction.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<!--
-       - @copyright 2021 Christopher Ng <chrng8@gmail.com>
-       -
-       - @author Christopher Ng <chrng8@gmail.com>
-       -
-       - @license GNU AGPL version 3 or any later version
-       -
-       - This program is free software: you can redistribute it and/or modify
-       - it under the terms of the GNU Affero General Public License as
-       - published by the Free Software Foundation, either version 3 of the
-       - License, or (at your option) any later version.
-       -
-       - This program is distributed in the hope that it will be useful,
-       - but WITHOUT ANY WARRANTY; without even the implied warranty of
-       - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-       - GNU Affero General Public License for more details.
-       -
-       - You should have received a copy of the GNU Affero General Public License
-       - along with this program. If not, see <http://www.gnu.org/licenses/>.
-       -
--->
-
-<template>
-       <NcActionButton class="federation-actions__btn"
-               :class="{ 'federation-actions__btn--active': activeScope === name }"
-               :close-after-click="true"
-               :disabled="!isSupportedScope"
-               :icon="iconClass"
-               :name="displayName"
-               @click.stop.prevent="updateScope">
-               {{ isSupportedScope ? tooltip : tooltipDisabled }}
-       </NcActionButton>
-</template>
-
-<script>
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-
-export default {
-       name: 'FederationControlAction',
-
-       components: {
-               NcActionButton,
-       },
-
-       props: {
-               activeScope: {
-                       type: String,
-                       required: true,
-               },
-               displayName: {
-                       type: String,
-                       required: true,
-               },
-               handleScopeChange: {
-                       type: Function,
-                       default: () => {},
-               },
-               iconClass: {
-                       type: String,
-                       required: true,
-               },
-               isSupportedScope: {
-                       type: Boolean,
-                       required: true,
-               },
-               name: {
-                       type: String,
-                       required: true,
-               },
-               tooltipDisabled: {
-                       type: String,
-                       default: '',
-               },
-               tooltip: {
-                       type: String,
-                       required: true,
-               },
-       },
-
-       methods: {
-               updateScope() {
-                       this.handleScopeChange(this.name)
-               },
-       },
-}
-</script>
-
-<style lang="scss" scoped>
-.federation-actions__btn--active {
-       background-color: var(--color-primary-element-light) !important;
-       box-shadow: inset 2px 0 var(--color-primary-element) !important;
-       border-radius: 0px !important;
-}
-</style>