Merge pull request #2695 from nextcloud/accessibility/modal-navigatio…

…n-buttons Change Prev/next links to buttons
nextcloud-libraries · Jul 18, 2022 · c8c45f7 · c8c45f7
2 parents b6e357d + ae85aaf
commit c8c45f7
Showing 1 changed file with 28 additions and 39 deletions.
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
@@ -160,14 +160,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="closeButtonAriaLabel">
+							<template #icon>
+								<Close :size="iconSize" />
+							</template>
+						</ButtonVue>
 					</div>
 				</div>
 			</transition>
@@ -183,20 +183,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="prevButtonAriaLabel"
+							@click="previous">
+							<template #icon>
 								<ChevronLeft :size="40" />
-								<span class="hidden-visually">
-									{{ t('Previous') }}
-								</span>
-							</span>
-						</a>
+							</template>
+						</ButtonVue>
 					</transition>
 
 					<!-- Content -->
@@ -217,20 +215,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="nextButtonAriaLabel"
+							@click="next">
+							<template #icon>
 								<ChevronRight :size="40" />
-								<span class="hidden-visually">
-									{{ t('Next') }}
-								</span>
-							</span>
-						</a>
+							</template>
+						</ButtonVue>
 					</transition>
 				</div>
 			</transition>
@@ -240,7 +236,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'
@@ -259,7 +254,6 @@ export default {
 	name: 'Modal',
 
 	components: {
-		ActionButton,
 		Actions,
 		ChevronLeft,
 		ChevronRight,
@@ -408,6 +402,12 @@ export default {
 		closeButtonAriaLabel() {
 			return t('Close modal')
 		},
+		prevButtonAriaLabel() {
+			return t('Previous')
+		},
+		nextButtonAriaLabel() {
+			return t('Next')
+		},
 	},
 
 	watch: {
@@ -766,17 +766,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;