Skip to content

Commit

Permalink
Merge 529780b into 3656188
Browse files Browse the repository at this point in the history
  • Loading branch information
@meganaconley
meganaconley committed Nov 14, 2019
2 parents 3656188 + 529780b commit c1b4ee9
Show file tree
Hide file tree
Showing 10 changed files with 264 additions and 1 deletion.
8 changes: 8 additions & 0 deletions src/ComboboxInput/__snapshots__/ComboboxInput.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,12 @@ exports[`<ComboboxInput /> create combobox input 1`] = `
className="fd-popover__control"
>
<div
aria-haspopup={true}
className="fd-input-group"
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
>
<input
className="fd-input fd-input-group__input"
Expand Down Expand Up @@ -52,8 +56,12 @@ exports[`<ComboboxInput /> create combobox input 2`] = `
className="fd-popover__control"
>
<div
aria-haspopup={true}
className="fd-input-group"
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
>
<input
className="fd-input fd-input--compact fd-input-group__input"
Expand Down
20 changes: 20 additions & 0 deletions src/Dropdown/__snapshots__/Dropdown.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,12 @@ exports[`<Dropdown /> create dropdown component 1`] = `
className="fd-popover__control"
>
<button
aria-haspopup={true}
className="fd-button fd-dropdown__control"
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
>
Select
</button>
Expand All @@ -43,8 +47,12 @@ exports[`<Dropdown /> create dropdown component 2`] = `
className="fd-popover__control"
>
<button
aria-haspopup={true}
className="fd-button fd-button--compact fd-dropdown__control"
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
>
Select
</button>
Expand All @@ -70,8 +78,12 @@ exports[`<Dropdown /> create dropdown component 3`] = `
className="fd-popover__control"
>
<button
aria-haspopup={true}
className="fd-button fd-dropdown__control"
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
>
Select
</button>
Expand All @@ -98,8 +110,12 @@ exports[`<Dropdown /> create dropdown component 4`] = `
className="fd-popover__control"
>
<button
aria-haspopup={true}
className="fd-button sap-icon--filter fd-dropdown__control"
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
>
Select
</button>
Expand All @@ -126,9 +142,13 @@ exports[`<Dropdown /> create dropdown component 5`] = `
className="fd-popover__control"
>
<button
aria-haspopup={true}
className="fd-button sap-icon--filter is-disabled fd-dropdown__control"
disabled={true}
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
>
Select
</button>
Expand Down
12 changes: 12 additions & 0 deletions src/LocalizationEditor/__snapshots__/LocalizationEditor.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,12 @@ exports[`<LocalizationEditor /> create localization editor 1`] = `
className="fd-popover__control"
>
<div
aria-haspopup={true}
className="fd-input-group fd-input-group--after"
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
>
<input
className="fd-input fd-input-group__input"
Expand Down Expand Up @@ -68,8 +72,12 @@ exports[`<LocalizationEditor /> create localization editor 2`] = `
className="fd-popover__control"
>
<div
aria-haspopup={true}
className="fd-input-group fd-input-group--after"
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
>
<input
className="fd-input fd-input--compact fd-input-group__input"
Expand Down Expand Up @@ -114,8 +122,12 @@ exports[`<LocalizationEditor /> create localization editor 3`] = `
className="fd-popover__control"
>
<div
aria-haspopup={true}
className="fd-input-group fd-input-group--after"
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
>
<textarea
className="fd-textarea fd-input-group__input"
Expand Down
32 changes: 31 additions & 1 deletion src/Popover/Popover.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import chain from 'chain-function';
import classnames from 'classnames';
import keycode from 'keycode';
import Popper from '../utils/_Popper';
import { POPPER_PLACEMENTS } from '../utils/constants';
import PropTypes from 'prop-types';
Expand All @@ -15,6 +16,18 @@ class Popover extends Component {
};
}

isButton = (node) => {
if (!node) {
return false;
}
if (typeof node.type === 'string') {
return node.type.toLowerCase() === 'button';
} else if (node.type.displayName) {
return node.type.displayName.toLowerCase() === 'button';
}
return false;
};

triggerBody = () => {
if (!this.props.disabled) {
this.setState(prevState => ({
Expand All @@ -31,6 +44,19 @@ class Popover extends Component {
}
};

handleKeyPress = (event, node, onClickFunctions) => {
if (!this.isButton(node)) {
switch (keycode(event)) {
case 'enter':
case 'space':
event.preventDefault();
onClickFunctions();
break;
default:
}
}
}

render() {
const {
disableEdgeDetection,
Expand All @@ -53,7 +79,11 @@ class Popover extends Component {
}

const referenceComponent = React.cloneElement(control, {
onClick: onClickFunctions
onClick: onClickFunctions,
tabIndex: 0,
role: 'button',
'aria-haspopup': true,
onKeyPress: (event) => this.handleKeyPress(event, control, onClickFunctions)
});

const popoverClasses = classnames('fd-popover', className);
Expand Down
47 changes: 47 additions & 0 deletions src/Popover/Popover.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,53 @@ describe('<Popover />', () => {
});
});

describe('control accessibility', () => {
test('adds a tabindex of 0 to the control', () => {
const wrapper = mountComponentWithStyles(popOver);
const button = wrapper.find('Icon').at(0);

expect(button.props().tabIndex).toEqual(0);
});

test('adds aria-haspopup to the control', () => {
const wrapper = mountComponentWithStyles(popOver);
const button = wrapper.find('Icon').at(0);

expect(button.props()['aria-haspopup']).toEqual(true);
});

test('adds a role of button to the control', () => {
const wrapper = mountComponentWithStyles(popOver);
const button = wrapper.find('Icon').at(0);

expect(button.props().role).toEqual('button');
});

test('handle space key to open popover', () => {
const syntheticEvent = {
keyCode: 32,
preventDefault: () => {}
};
const wrapper = mountComponentWithStyles(popOver);
const button = wrapper.find('Icon').at(0);
button.prop('onKeyPress')(syntheticEvent, 'Icon', wrapper.triggerBody);

expect(wrapper.state('isExpanded')).toBeTruthy();
});

test('handle enter key to open popover', () => {
const syntheticEvent = {
keyCode: 13,
preventDefault: () => {}
};
const wrapper = mountComponentWithStyles(popOver);
const button = wrapper.find('Icon').at(0);
button.prop('onKeyPress')(syntheticEvent, 'Icon', wrapper.triggerBody);

expect(wrapper.state('isExpanded')).toBeTruthy();
});
});

describe('Callback handler', () => {
test('should dispatch the onClickOutside callback with the event', () => {
let f = jest.fn();
Expand Down
16 changes: 16 additions & 0 deletions src/Popover/__snapshots__/Popover.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,12 @@ exports[`<Popover /> create Popover 1`] = `
className="fd-popover__control"
>
<span
aria-haspopup={true}
className="sap-icon--cart sap-icon--xl"
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
Expand All @@ -34,8 +38,12 @@ exports[`<Popover /> create Popover 2`] = `
className="fd-popover__control"
>
<span
aria-haspopup={true}
className="sap-icon--cart sap-icon--xl"
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
Expand All @@ -55,8 +63,12 @@ exports[`<Popover /> create Popover 3`] = `
className="fd-popover__control"
>
<span
aria-haspopup={true}
className="sap-icon--cart sap-icon--xl"
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
Expand All @@ -76,8 +88,12 @@ exports[`<Popover /> create Popover 4`] = `
className="fd-popover__control"
>
<span
aria-haspopup={true}
className="sap-icon--cart sap-icon--xl"
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
Expand Down
16 changes: 16 additions & 0 deletions src/SearchInput/__snapshots__/SearchInput.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,12 @@ exports[`<SearchInput /> create SearchInput 1`] = `
className="fd-popover__control"
>
<div
aria-haspopup={true}
className="fd-input-group fd-input-group--after"
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
>
<input
className="fd-input fd-input-group__input"
Expand Down Expand Up @@ -57,8 +61,12 @@ exports[`<SearchInput /> create SearchInput 2`] = `
className="fd-popover__control"
>
<div
aria-haspopup={true}
className="fd-input-group fd-input-group--after"
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
>
<input
className="fd-input fd-input-group__input"
Expand Down Expand Up @@ -98,8 +106,12 @@ exports[`<SearchInput /> create SearchInput 3`] = `
className="fd-popover__control"
>
<div
aria-haspopup={true}
className="fd-input-group fd-input-group--after"
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
>
<input
className="fd-input fd-input-group__input"
Expand Down Expand Up @@ -139,8 +151,12 @@ exports[`<SearchInput /> create SearchInput 4`] = `
className="fd-popover__control"
>
<div
aria-haspopup={true}
className="fd-input-group fd-input-group--after"
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
>
<input
className="fd-input fd-input-group__input"
Expand Down
Loading

0 comments on commit c1b4ee9

Please sign in to comment.