Proposed changes based on ada feedback

README.md

@@ -53,7 +53,8 @@ For more examples, see the demo: https://vue-ssr-carousel.netlify.app.
 | `slides-per-page`   | `1`         | How many slides are shown per page. Can be set to `null` to allow for flexible widths for slides. See https://vue-ssr-carousel.netlify.app/responsive and note the caveats mentiond within.
 | `gutter`            | `20`        | The size of the space between slides. This can a number or any CSS resolvable string. See https://vue-ssr-carousel.netlify.app/gutters.
 | `paginate-by-slide` | `false`     | When `false`, dragging the carousel or interacting with the arrows will advance a full page of slides at a time.  When `true`, the carousel will come to a rest at each slide.
-| `autoplay-delay`     | `0`         | Add a delay in seconds for auto playing the slides. See https://vue-ssr-carousel.netlify.app/misc#autoplay.
+| `pagination-label`  | `null`      | Customizes the label used in aria labels to describe a page.
+| `autoplay-delay`    | `0`         | Add a delay in seconds for auto playing the slides. See https://vue-ssr-carousel.netlify.app/misc#autoplay.
 | `loop`              | `false`     | Boolean to enable looping / infinite scroll. See https://vue-ssr-carousel.netlify.app/looping.
 | `center`            | `false`     | Render the first slide in the middle of the carousel.  Should only be used with odd numbers of `slides-per-page`.  This results in the slides being rendered visually in a different order than the DOM [which is an accessibility concern](https://developer.mozilla.org/en-US/docs/Web/CSS/order#accessibility_concerns). See https://vue-ssr-carousel.netlify.app/looping.
 | `peek`              | `0`         | A width value for how far adjacent cards should peek into the carousel canvas. This can a number or any CSS resolvable string. See https://vue-ssr-carousel.netlify.app/peeking.

cypress/e2e/ui.coffee

@@ -21,7 +21,7 @@ context 'ui', ->
 		cy.get('[data-cy=dots]').within ->
 
 			# Click on page 2 dot
-			cy.get('.ssr-carousel-dot-button[aria-label="Page 2"]').click()
+			cy.get('.ssr-carousel-dot-button[aria-label="Go to page 2"]').click()
 				.slideHidden 1
 				.slideVisible 2
 

demo/components/demos/accessibility/pagination-label.vue

@@ -0,0 +1,9 @@
+<template>
+
+<ssr-carousel pagination-label='Story' show-arrows show-dots loop>
+  <slide>Story 1</slide>
+  <slide>Story 2</slide>
+  <slide>Story 3</slide>
+</ssr-carousel>
+
+</template>

demo/content/accessibility.md

@@ -29,3 +29,17 @@ The `loop` feature isn't friendly to keyboard navigation and is disabled once th
   <slide :index='3' to='#3'></slide>
 </ssr-carousel>
 ```
+
+## Customize the label given to pages
+
+By default, pages are referred to as "Page" in aria labels unless using `paginate-by-slide`, in which case they are labeled as "Slide".  The `pagination-label` prop lets you customize this label.
+
+<demos-accessibility-pagination-label></demos-accessibility-pagination-label>
+
+```vue
+<ssr-carousel pagination-label='Story' show-arrows show-dots loop>
+  <slide>Story 1</slide>
+  <slide>Story 2</slide>
+  <slide>Story 3</slide>
+</ssr-carousel>
+```

src/concerns/accessibility.coffee

@@ -3,14 +3,23 @@ Code related to supporting keyboard interaction and screen readers
 ###
 export default
 
+	# The label to use for pagination
+	props: paginationLabel: String
+
 	# Store whether the user appears to be using keyboard to navigate
 	data: -> usingKeyboard: false
 
 	computed:
 
+		# Determine the descriptor to use in aria messages
+		pageLabel: -> switch
+			when @paginationLabel then @paginationLabel
+			when @paginateBySlide then "Slide"
+			else "Page"
+
 		# Make the current slide message
 		# https://www.w3.org/WAI/tutorials/carousels/functionality/#announce-the-current-item
-		currentSlideMessage: -> "Item #{@boundedIndex + 1} of #{@pages}"
+		currentSlideMessage: -> "#{@pageLabel} #{@boundedIndex + 1} of #{@pages}"
 
 	watch:
 

src/ssr-carousel-arrows.vue

@@ -6,16 +6,16 @@
 
 	//- Back arrow
 	button.ssr-carousel-back-button(
-		aria-label='Back'
-		:disabled='backDisabled'
+		:aria-label='`Previous ${pageLabel}`'
+		:aria-disabled='backDisabled'
 		@click='$emit("back")')
 			slot(name='back' :disabled='backDisabled')
 				span.ssr-carousel-back-icon
 
 	//- Next arrow
 	button.ssr-carousel-next-button(
-		aria-label='Next'
-		:disabled='nextDisabled'
+		:aria-label='`Next ${pageLabel}`'
+		:aria-disabled='nextDisabled'
 		@click='$emit("next")')
 			slot(name='next' :disabled='nextDisabled')
 				span.ssr-carousel-next-icon
@@ -31,6 +31,7 @@ export default
 		index: Number
 		pages: Number
 		shouldLoop: Boolean
+		pageLabel: String
 
 	computed:
 
@@ -68,13 +69,13 @@ export default
 	flex-center()
 
 	// Show disabled state
-	[disabled] > &
+	[aria-disabled] > &
 		opacity 0.1
 		cursor default
 
 	// Make a simple hover
 	transition opacity 0.2s
-	:not([disabled]) > &
+	:not([aria-disabled]) > &
 		opacity 0.5
 		+hover()
 			opacity 0.85

src/ssr-carousel-dots.vue

@@ -5,8 +5,8 @@
 .ssr-carousel-dots
 	button.ssr-carousel-dot-button(
 		v-for='i in pages' :key='i'
-		:aria-label='`Page ${i}`'
-		:disabled='isDisabled(i)'
+		:aria-label='`Go to ${pageLabel} ${i}`'
+		:aria-disabled='isDisabled(i)'
 		@click='$emit("goto", i - 1)')
 
 		//- Custom dot
@@ -28,6 +28,7 @@ export default
 	props:
 		boundedIndex: Number
 		pages: Number
+		pageLabel: String
 
 	methods:
 
@@ -64,14 +65,14 @@ export default
 	margin-h 4px
 
 	// Show disabled state (aka, the active state)
-	[disabled] > &
+	[aria-disabled] > &
 		opacity 1
 		background rgba(black, 0.7)
 		cursor default
 
 	// Make a simple hover
 	transition opacity 0.2s
-	:not([disabled]) > &
+	:not([aria-disabled]) > &
 		opacity 0.5
 		+hover()
 			opacity 0.85

src/ssr-carousel.vue

@@ -52,7 +52,7 @@
 		//- Back / Next navigation
 		ssr-carousel-arrows(
 			v-if='showArrows'
-			v-bind='{ index, pages, shouldLoop }'
+			v-bind='{ index, pages, shouldLoop, pageLabel }'
 			@back='back'
 			@next='next')
 			template(#back='props'): slot(name='back-arrow' v-bind='props')
@@ -61,7 +61,7 @@
 	//- Dots navigation
 	ssr-carousel-dots(
 		v-if='showDots'
-		v-bind='{ boundedIndex, pages }'
+		v-bind='{ boundedIndex, pages, pageLabel }'
 		@goto='gotoDot')
 		template(#dot='props'): slot(name='dot' v-bind='props')