Merge pull request #43098 from nextcloud/fix/41903/settings--change-scope-a11y

fix(settings): federation scope menu a11y

apps/settings/src/components/PersonalInfo/shared/FederationControl.vue

@@ -21,29 +21,31 @@
 -->
 
 <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" />
+			: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 +68,7 @@ export default {
 
 	components: {
 		NcActions,
-		FederationControlAction,
+		NcActionButton,
 	},
 
 	props: {
@@ -194,14 +196,15 @@ 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;
 		}
 	}
+}
 </style>

apps/settings/src/components/PersonalInfo/shared/FederationControlAction.vue

@@ -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>