From d16c2287cec8bb0353c76d4eaf2a918067185d47 Mon Sep 17 00:00:00 2001
From: Vanessa Pertsch <vanessa.pertsch@posteo.de>
Date: Wed, 18 May 2022 14:14:20 +0200
Subject: [PATCH 1/2] Change Prev/next links to buttons

Signed-off-by: Vanessa Pertsch <vanessa.pertsch@posteo.de>
---
 src/components/Modal/Modal.vue | 61 ++++++++++++----------------------
 1 file changed, 22 insertions(+), 39 deletions(-)

diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index 88b100ca9b..06a02b96a5 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -155,14 +155,14 @@
 						</Actions>
 
 						<!-- Close modal -->
-						<Actions v-if="canClose && !closeButtonContained" class="header-close">
-							<ActionButton @click="close">
-								<template #icon>
-									<Close :size="iconSize" />
-								</template>
-								{{ t('Close') }}
-							</ActionButton>
-						</Actions>
+						<ButtonVue v-if="canClose && !closeButtonContained"
+								type="tertiary"
+								class="header-close"
+								:aria-label="t('Close')">
+							<template #icon>
+								<Close :size="iconSize" />
+							</template>
+						</ButtonVue>
 					</div>
 				</div>
 			</transition>
@@ -178,20 +178,18 @@
 					@mousedown.self="close">
 					<!-- Navigation button -->
 					<transition name="fade-visibility">
-						<a v-show="hasPrevious"
+						<ButtonVue v-show="hasPrevious"
+							type="tertiary-no-background"
 							class="prev"
-							href="#"
 							:class="{
 								invisible: !hasPrevious
 							}"
-							@click.prevent.stop="previous">
-							<span class="icon-previous">
+							:aria-label="t('Previous')"
+							@click="previous">
+							<template #icon>
 								<ChevronLeft :size="40" />
-								<span class="hidden-visually">
-									{{ t('Previous') }}
-								</span>
-							</span>
-						</a>
+							</template>
+						</ButtonVue>
 					</transition>
 
 					<!-- Content -->
@@ -212,20 +210,18 @@
 
 					<!-- Navigation button -->
 					<transition name="fade-visibility">
-						<a v-show="hasNext"
+						<ButtonVue v-show="hasNext"
+							type="tertiary-no-background"
 							class="next"
-							href="#"
 							:class="{
 								invisible: !hasNext
 							}"
-							@click.prevent.stop="next">
-							<span class="icon-next">
+							:aria-label="t('Next')"
+							@click="next">
+							<template #icon>
 								<ChevronRight :size="40" />
-								<span class="hidden-visually">
-									{{ t('Next') }}
-								</span>
-							</span>
-						</a>
+							</template>
+						</ButtonVue>
 					</transition>
 				</div>
 			</transition>
@@ -235,7 +231,6 @@
 
 <script>
 import Actions from '../Actions/index.js'
-import ActionButton from '../ActionButton/index.js'
 import Tooltip from '../../directives/Tooltip/index.js'
 import l10n from '../../mixins/l10n.js'
 import Timer from '../../utils/Timer.js'
@@ -254,7 +249,6 @@ export default {
 	name: 'Modal',
 
 	components: {
-		ActionButton,
 		Actions,
 		ChevronLeft,
 		ChevronRight,
@@ -761,17 +755,6 @@ export default {
 		right: 0;
 	}
 
-	// buttons/icons
-	.icon-next,
-	.icon-previous {
-		box-sizing: border-box;
-		width: $clickable-area;
-		height: $clickable-area;
-		color: white;
-		background-image: none;
-		display: flex;
-	}
-
 	/* Content */
 	.modal-container {
 		position: relative;

From ae85aaf8d1ac5d319d2342b3d8b8c5371b634f1b Mon Sep 17 00:00:00 2001
From: Joas Schilling <coding@schilljs.com>
Date: Thu, 14 Jul 2022 15:42:36 +0200
Subject: [PATCH 2/2] Fix language and eslint

Signed-off-by: Joas Schilling <coding@schilljs.com>
---
 src/components/Modal/Modal.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index 06a02b96a5..8df8038429 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -156,9 +156,9 @@
 
 						<!-- Close modal -->
 						<ButtonVue v-if="canClose && !closeButtonContained"
-								type="tertiary"
-								class="header-close"
-								:aria-label="t('Close')">
+							type="tertiary"
+							class="header-close"
+							:aria-label="closeButtonAriaLabel">
 							<template #icon>
 								<Close :size="iconSize" />
 							</template>
@@ -184,7 +184,7 @@
 							:class="{
 								invisible: !hasPrevious
 							}"
-							:aria-label="t('Previous')"
+							:aria-label="prevButtonAriaLabel"
 							@click="previous">
 							<template #icon>
 								<ChevronLeft :size="40" />
@@ -216,7 +216,7 @@
 							:class="{
 								invisible: !hasNext
 							}"
-							:aria-label="t('Next')"
+							:aria-label="nextButtonAriaLabel"
 							@click="next">
 							<template #icon>
 								<ChevronRight :size="40" />
@@ -397,6 +397,12 @@ export default {
 		closeButtonAriaLabel() {
 			return t('Close modal')
 		},
+		prevButtonAriaLabel() {
+			return t('Previous')
+		},
+		nextButtonAriaLabel() {
+			return t('Next')
+		},
 	},
 
 	watch: {