Use ActionButton for AppNavigationToggle

Signed-off-by: Jan C. Borchardt <[email protected]>
Signed-off-by: Raimund Schlüßler <[email protected]>

src/components/AppNavigationToggle/AppNavigationToggle.vue

@@ -22,29 +22,40 @@
  -
  -->
 <template>
-	<a class="app-navigation-toggle"
-		href="#"
-		:aria-expanded="open ? 'true' : 'false'"
-		aria-controls="app-navigation-vue"
-		@click.prevent="toggleNavigation"
-		@keydown.space.exact.prevent="toggleNavigation" />
+	<Actions class="app-navigation-toggle">
+		<ActionButton
+			:aria-expanded="open ? 'true' : 'false'"
+			:aria-label="label"
+			aria-controls="app-navigation-vue"
+			@click="$emit('update:open', !open)">
+			{{ label }}
+		</ActionButton>
+	</Actions>
 </template>
 
 <script>
+import Actions from '../Actions/Actions'
+import ActionButton from '../ActionButton/ActionButton'
+
 export default {
 
 	name: 'AppNavigationToggle',
 
+	components: {
+		Actions,
+		ActionButton,
+	},
+
 	props: {
 		open: {
 			type: Boolean,
 			required: true,
 		},
 	},
 
-	methods: {
-		toggleNavigation() {
-			this.$emit('update:open', !this.open)
+	computed: {
+		label() {
+			return this.open ? this.t('Close navigation') : this.t('Open navigation')
 		},
 	},
 }
@@ -53,26 +64,13 @@ export default {
 <style scoped lang="scss">
 @import '../../fonts/scss/iconfont-vue';
 
-.app-navigation-toggle {
+button.app-navigation-toggle {
 	position: absolute;
 	top: 0;
 	right: 0;
 	margin-right: - $clickable-area;
-	width: $clickable-area;
-	height: $clickable-area;
-	padding: $icon-margin;
 
-	cursor: pointer;
-	opacity: 0.6;
-
-	font-size: $icon-size;
-	line-height: 17px;
 	@include iconfont('menu');
-
-	&:hover,
-	&:focus {
-		opacity: $opacity_full;
-	}
 }
 
 </style>