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

Commit

Permalink
feat(list): enter and spacebar keyboard handling for List and Listitem (
Browse files Browse the repository at this point in the history
#279)

test roles and keyboard handlers for list and listitem
  • Loading branch information
jurokapsiar authored Dec 20, 2018
1 parent 3759e68 commit e93076c
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { Accessibility } from '../../types'
* @specification
* Adds role='listbox'.
*/

const selectableListBehavior: Accessibility = (props: any) => ({
attributes: {
root: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import * as keyboardKey from 'keyboard-key'
* @specification
* Adds role='option'. This role is used for a selectable item in a list.
* Adds attribute 'aria-selected=true' based on the property 'selected'. Based on this screen readers will recognize the selected state of the item.
* Performs click action with 'Enter' and 'Spacebar' on 'root'.
*/

const selectableListItemBehavior: Accessibility = (props: any) => ({
Expand Down
8 changes: 0 additions & 8 deletions test/specs/components/List/ListItem-test.ts

This file was deleted.

30 changes: 30 additions & 0 deletions test/specs/components/List/ListItem-test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import * as React from 'react'
import * as keyboardKey from 'keyboard-key'
import { isConformant, handlesAccessibility } from 'test/specs/commonTests'
import { mountWithProvider } from 'test/utils'

import ListItem from 'src/components/List/ListItem'
import { selectableListItemBehavior } from 'src/lib/accessibility'

describe('ListItem', () => {
isConformant(ListItem)
handlesAccessibility(ListItem, { defaultRootRole: 'listitem' })

test('handleClick is executed when Enter is pressed for selectable list', () => {
const onClick = jest.fn()
const listItem = mountWithProvider(
<ListItem accessibility={selectableListItemBehavior} onClick={onClick} />,
).find('ListItem')
listItem.simulate('keydown', { keyCode: keyboardKey.Enter })
expect(onClick).toHaveBeenCalledTimes(1)
})

test('handleClick is executed when Spacebar is pressed for selectable list', () => {
const onClick = jest.fn()
const listItem = mountWithProvider(
<ListItem accessibility={selectableListItemBehavior} onClick={onClick} />,
).find('ListItem')
listItem.simulate('keydown', { keyCode: keyboardKey.Spacebar })
expect(onClick).toHaveBeenCalledTimes(1)
})
})

0 comments on commit e93076c

Please sign in to comment.