Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Commit 9ea3d70

Browse files
mituronmituron
committed
adding logic for adding region/group differently based on carousel type
1 parent 8027a40 commit 9ea3d70

File tree

3 files changed

+90
-5
lines changed

3 files changed

+90
-5
lines changed

‎packages/accessibility/src/behaviors/Carousel/carouselBehavior.ts

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
11
import { Accessibility } from '../../types'
22
import * as keyboardKey from 'keyboard-key'
33

4+
45
/**
6+
* @description
7+
* Adds attribute 'role=region' to 'root' slot if 'navigation' property is false. Does not set the attribute otherwise.
8+
* Adds attribute 'aria-roledescription' to 'root' slot if 'navigation' property is false. Does not set the attribute otherwise.
9+
* Adds attribute 'aria-label' to 'root' slot if 'navigation' property is false. Does not set the attribute otherwise.
10+
* Adds attribute 'aria-roledescription' to 'itemsContainer' slot if 'navigation' property is true. Does not set the attribute otherwise.
11+
* Adds attribute 'aria-label' to 'itemsContainer' slot if 'navigation' property is true. Does not set the attribute otherwise.
12+
*
513
* @specification
614
* Adds attribute 'role=region' to 'root' slot.
715
* Adds attribute 'aria-live=polite' to 'itemsContainerWrapper' slot if 'ariaLiveOn' property is true. Sets the attribute to 'off' otherwise.
816
* Adds attribute 'aria-hidden=true' to 'paddleNext' slot if 'navigation' property is true. Does not set the attribute otherwise.
917
* Adds attribute 'aria-hidden=true' to 'paddlePrevious' slot if 'navigation' property is true. Does not set the attribute otherwise.
1018
* Adds attribute 'tabIndex=-1' to 'paddlePrevious' slot if 'navigation' property is true. Does not set the attribute otherwise.
1119
* Adds attribute 'tabIndex=-1' to 'paddlePrevious' slot if 'navigation' property is true. Does not set the attribute otherwise.
20+
* Adds attribute 'role=group' to 'itemsContainer' slot if 'navigation' property is true. Does not set the attribute otherwise.
1221
* Triggers 'showNextSlideByKeyboardNavigation' action with 'ArrowRight' on 'itemsContainer'.
1322
* Triggers 'showPreviousSlideByKeyboardNavigation' action with 'ArrowLeft' on 'itemsContainer'.
1423
* Triggers 'showNextSlideByPaddlePress' action with 'Enter' or 'Spacebar' on 'paddleNext'.
@@ -17,11 +26,18 @@ import * as keyboardKey from 'keyboard-key'
1726
const carouselBehavior: Accessibility<CarouselBehaviorProps> = props => ({
1827
attributes: {
1928
root: {
20-
role: 'region',
29+
role: props.navigation ? undefined : 'region',
30+
'aria-roledescription': props.navigation ? undefined : props.ariaRoleDescription,
31+
'aria-label': props.navigation ? undefined : props.ariaLabel
2132
},
2233
itemsContainerWrapper: {
2334
'aria-live': props.ariaLiveOn ? 'polite' : 'off',
2435
},
36+
itemsContainer: {
37+
role: props.navigation ? 'group' : undefined,
38+
'aria-roledescription': props.navigation ? props.ariaRoleDescription : undefined,
39+
'aria-label': props.navigation ? props.ariaLabel : undefined
40+
},
2541

2642
paddleNext: {
2743
...(props.navigation && {
@@ -62,7 +78,10 @@ const carouselBehavior: Accessibility<CarouselBehaviorProps> = props => ({
6278
export type CarouselBehaviorProps = {
6379
/** Element type. */
6480
navigation: Object | Object[]
65-
ariaLiveOn: boolean
81+
ariaLiveOn: boolean
82+
ariaRoleDescription?: string
83+
ariaLabel?: string
84+
6685
}
6786

6887
export default carouselBehavior

‎packages/accessibility/test/behaviors/caroselBehavior-test.tsx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { carouselBehavior as carouselBehavior } from '@fluentui/accessibility'
2+
3+
const roleDescription = "carousel"
4+
const label = "portrait collection"
5+
6+
describe('carouselBehavior.ts', () => {
7+
8+
describe('root', () => {
9+
test(`set "role=region" when carousel has NO navigation`, () => {
10+
const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false })
11+
expect(expectedResult.attributes.root.role).toEqual('region')
12+
})
13+
14+
test('set "aria-roledescription" when carousel has NO navigation', () => {
15+
const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ariaRoleDescription: roleDescription })
16+
expect(expectedResult.attributes.root['aria-roledescription']).toEqual(roleDescription)
17+
})
18+
19+
test('set "aria-label" when carousel has NO navigation', () => {
20+
const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ariaLabel: label })
21+
expect(expectedResult.attributes.root['aria-label']).toEqual(label)
22+
})
23+
24+
test('do NOT set "aria-roledescription" when carousel has navigation', () => {
25+
const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true, ariaRoleDescription: roleDescription })
26+
expect(expectedResult.attributes.root['aria-roledescription']).toBeUndefined()
27+
})
28+
29+
test('do NOT set "aria-label" when carousel has navigation', () => {
30+
const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true, ariaLabel: label })
31+
expect(expectedResult.attributes.root['aria-label']).toBeUndefined()
32+
})
33+
34+
test(`do NOT set "role=region" when carousel has navigation`, () => {
35+
const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true })
36+
expect(expectedResult.attributes.root.role).toBeUndefined()
37+
})
38+
})
39+
40+
describe('itemsContainer', () => {
41+
test('set "aria-roledescription" when carousel has navigation', () => {
42+
const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true, ariaRoleDescription: roleDescription })
43+
expect(expectedResult.attributes.itemsContainer['aria-roledescription']).toEqual(roleDescription)
44+
})
45+
46+
test('set "aria-label" when carousel has navigation', () => {
47+
const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true, ariaLabel: label })
48+
expect(expectedResult.attributes.itemsContainer['aria-label']).toEqual(label)
49+
})
50+
51+
test('do NOT set "aria-roledescription" when carousel has NO navigation', () => {
52+
const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ariaRoleDescription: roleDescription })
53+
expect(expectedResult.attributes.itemsContainer['aria-roledescription']).toBeUndefined()
54+
})
55+
56+
test('do NOT set "aria-label" when carousel has NO navigation', () => {
57+
const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ariaLabel: label })
58+
expect(expectedResult.attributes.itemsContainer['aria-label']).toBeUndefined()
59+
})
60+
61+
test(`do NOT set "role=group" when carousel has NO navigation`, () => {
62+
const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false })
63+
expect(expectedResult.attributes.itemsContainer.role).toBeUndefined()
64+
})
65+
})
66+
67+
68+
})

‎packages/react/src/components/Carousel/Carousel.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
241241
}
242242

243243
renderContent = (accessibility, styles, unhandledProps) => {
244-
const { ariaRoleDescription, ariaLabel, getItemPositionText, items } = this.props
244+
const {getItemPositionText, items} = this.props
245245
const { activeIndex, itemIds } = this.state
246246

247247
this.itemRefs = []
@@ -250,8 +250,6 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
250250
<div style={styles.itemsContainerWrapper} {...accessibility.attributes.itemsContainerWrapper}>
251251
<div
252252
className={Carousel.slotClassNames.itemsContainer}
253-
aria-roledescription={ariaRoleDescription}
254-
aria-label={ariaLabel}
255253
style={styles.itemsContainer}
256254
{...accessibility.attributes.itemsContainer}
257255
{...applyAccessibilityKeyHandlers(

0 commit comments

Comments
 (0)