From 460ffb5fe28a5bc6c3c302cacf1699503cd902de Mon Sep 17 00:00:00 2001 From: Sergey Date: Thu, 6 Dec 2018 21:40:39 +0100 Subject: [PATCH] Allow to configure aria-live message (#460) * Allow to configure aria-live message * Add documentation --- README.md | 77 +++++++++++++++++++------------ demo/app.js | 3 ++ src/announce-slide.js | 5 ++ src/index.js | 16 +++++-- test/specs/announce-slide.test.js | 15 +++++- 5 files changed, 82 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 897f5f9a..f05daae8 100644 --- a/README.md +++ b/README.md @@ -62,36 +62,37 @@ Or on CodeSandeBox at the following url: + `Slide ${currentSlide + 1} of ${slideCount}` + } +> + {/* Carousel Content */} + +``` + ### External Control of Carousel State You can control the state of the carousel from your parent component as shown below: diff --git a/demo/app.js b/demo/app.js index 756a3d25..e93bd224 100644 --- a/demo/app.js +++ b/demo/app.js @@ -50,6 +50,9 @@ class App extends React.Component { Nuka Carousel: Slide {currentSlide + 1} )} + renderAnnounceSlideMessage={({ currentSlide, slideCount }) => { + return `Showing slide ${currentSlide + 1} of ${slideCount}`; + }} > {colors.slice(0, this.state.length).map((color, index) => ( { ); }; +export const defaultRenderAnnounceSlideMessage = ({ + currentSlide, + slideCount +}) => `Slide ${currentSlide + 1} of ${slideCount}`; + export default AnnounceSlide; diff --git a/src/index.js b/src/index.js index 568d35cf..24dbd568 100644 --- a/src/index.js +++ b/src/index.js @@ -5,7 +5,9 @@ import Animate from 'react-move/Animate'; import * as easing from 'd3-ease'; import { PagingDots, PreviousButton, NextButton } from './default-controls'; import Transitions from './all-transitions'; -import AnnounceSlide from './announce-slide'; +import AnnounceSlide, { + defaultRenderAnnounceSlideMessage +} from './announce-slide'; import { addEvent, removeEvent, @@ -858,7 +860,13 @@ export default class Carousel extends React.Component { } render() { const { currentSlide, slideCount, frameWidth } = this.state; - const { frameOverflow, vertical, framePadding, slidesToShow } = this.props; + const { + frameOverflow, + vertical, + framePadding, + slidesToShow, + renderAnnounceSlideMessage + } = this.props; const duration = this.state.dragging || this.state.resetWrapAroundPosition ? 0 @@ -886,7 +894,7 @@ export default class Carousel extends React.Component { > {!this.props.autoplay && ( )} , renderCenterRightControls: props => , renderBottomCenterControls: props => , + renderAnnounceSlideMessage: defaultRenderAnnounceSlideMessage, slideWidth: 1, speed: 500, swiping: true, diff --git a/test/specs/announce-slide.test.js b/test/specs/announce-slide.test.js index 7f3e7804..e5abcf53 100644 --- a/test/specs/announce-slide.test.js +++ b/test/specs/announce-slide.test.js @@ -1,4 +1,6 @@ -import AnnounceSlide from '../../src/announce-slide'; +import AnnounceSlide, { + defaultRenderAnnounceSlideMessage +} from '../../src/announce-slide'; describe('', () => { it('allows you to set props', () => { @@ -8,3 +10,14 @@ describe('', () => { expect(wrapper.props().message).toBe('New message.'); }); }); + +describe('defaultRenderAnnounceSlideMessage', () => { + it('creates default announce message', () => { + const message = defaultRenderAnnounceSlideMessage({ + currentSlide: 0, + slideCount: 5 + }); + + expect(message).toBe('Slide 1 of 5'); + }); +});