Skip to content

feat(accessibility): add isDescribedBy flag to FormContainer and update global accessibility values #162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 27, 2018
Merged

feat(accessibility): add isDescribedBy flag to FormContainer and update global accessibility values #162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
251ef32
feat(accessibility): add isDescribedBy flag to FormContainer and upda…
austingreendev Sep 18, 2018
96712b6
Update documentation
austingreendev Sep 18, 2018
fbbe2bc
Add deprecation warning to getMessageProps
austingreendev Sep 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 3 additions & 13 deletions packages/autocomplete/src/containers/AutocompleteContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,12 +318,10 @@ class AutocompleteContainer extends ControlledComponent {
};

getItemId = key =>
typeof key === 'undefined' ? '' : `${this.getControlledState().id}--item-${key}`;
typeof key === 'undefined' ? null : `${this.getControlledState().id}--item-${key}`;

getTagId = key =>
typeof key === 'undefined' ? '' : `${this.getControlledState().id}--tag-${key}`;

getMenuId = () => `${this.getControlledState().id}--menu`;
typeof key === 'undefined' ? null : `${this.getControlledState().id}--tag-${key}`;

getInputProps = ({
tabIndex = 0,
Expand All @@ -341,7 +339,6 @@ class AutocompleteContainer extends ControlledComponent {
role,
'aria-autocomplete': 'list',
'aria-haspopup': 'true',
'aria-owns': this.getMenuId(),
'aria-expanded': isOpen,
'aria-activedescendant': isOpen ? this.getItemId(focusedKey) : this.getTagId(tagFocusedKey),
autoComplete: 'off',
Expand Down Expand Up @@ -388,15 +385,8 @@ class AutocompleteContainer extends ControlledComponent {
};
};

getMenuProps = ({
id = this.getMenuId(),
role = 'listbox',
onMouseDown,
onMouseUp,
...other
} = {}) => {
getMenuProps = ({ role = 'listbox', onMouseDown, onMouseUp, ...other } = {}) => {
return {
id,
role,
onMouseDown: composeEventHandlers(onMouseDown, () => {
this.menuMousedDown = true;
Expand Down
2 changes: 0 additions & 2 deletions packages/autocomplete/src/containers/AutocompleteContainer.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,6 @@ describe('AutocompleteContainer', () => {
expect(input).toHaveProp('role', 'combobox');
expect(input).toHaveProp('aria-autocomplete', 'list');
expect(input).toHaveProp('aria-haspopup', 'true');
expect(input).toHaveProp('aria-owns', 'test--menu');
expect(input).toHaveProp('autoComplete', 'off');
});

Expand Down Expand Up @@ -492,7 +491,6 @@ describe('AutocompleteContainer', () => {
it('applies accessibility attributes correctly', () => {
const menu = findMenu(wrapper);

expect(menu).toHaveProp('id', 'test--menu');
expect(menu).toHaveProp('role', 'listbox');
});

Expand Down
57 changes: 30 additions & 27 deletions packages/autocomplete/src/examples/autocomplete.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,34 +117,37 @@ initialState = {
{!isOpen && <span>{state.value}</span>}
<Input
{...getInputProps(
getFieldInputProps({
bare: true,
innerRef: inputRef,
value: state.inputValue,
onChange: e => {
setState({ inputValue: e.target.value });
getFieldInputProps(
{
bare: true,
innerRef: inputRef,
value: state.inputValue,
onChange: e => {
setState({ inputValue: e.target.value });
},
placeholder: state.value,
onFocus: () => {
setState({ isFocused: true });
},
onBlur: () => {
setState({ isFocused: false });
},
onKeyDown: e => {
if (
e.keyCode === KEY_CODES.ENTER &&
(!e.target.value || e.target.value.trim().length === 0) &&
!state.focusedKey &&
state.isOpen
) {
e.preventDefault();
}
},
style: !isOpen
? { opacity: 0, height: 0, minHeight: 0, width: 0, minWidth: 0 }
: {}
},
placeholder: state.value,
onFocus: () => {
setState({ isFocused: true });
},
onBlur: () => {
setState({ isFocused: false });
},
onKeyDown: e => {
if (
e.keyCode === KEY_CODES.ENTER &&
(!e.target.value || e.target.value.trim().length === 0) &&
!state.focusedKey &&
state.isOpen
) {
e.preventDefault();
}
},
style: !isOpen
? { opacity: 0, height: 0, minHeight: 0, width: 0, minWidth: 0 }
: {}
})
{ isDescribed: false }
)
)}
/>
</FauxInput>
Expand Down
109 changes: 56 additions & 53 deletions packages/autocomplete/src/examples/multiselect.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ the `input` and it's collection of tags.
This example also includes an example of "copy-to-clipboard" functionality when
a tag is selected.

#### Accessibility Warning
### Accessibility Warning

When implementing a MultiSelect with the ability to delete Tags, be aware of
users that navigate primarily with a keyboard and how your features may affect
Expand Down Expand Up @@ -229,65 +229,68 @@ const MoreAnchor = styled(Anchor)`

<Input
{...getInputProps(
getFieldInputProps({
bare: true,
innerRef: inputRef,
value: state.inputValue,
onChange: e => {
setState({ inputValue: e.target.value });
},
onKeyDown: e => {
if (
e.keyCode === KEY_CODES.ENTER &&
(!e.target.value || e.target.value.trim().length === 0) &&
!state.focusedKey &&
state.isOpen
) {
e.preventDefault();
return;
}

if (
e.keyCode === KEY_CODES.DELETE ||
e.keyCode === KEY_CODES.BACKSPACE
) {
if (tagFocusedKey !== undefined) {
deleteTag(tagFocusedKey);
getFieldInputProps(
{
bare: true,
innerRef: inputRef,
value: state.inputValue,
onChange: e => {
setState({ inputValue: e.target.value });
},
onKeyDown: e => {
if (
e.keyCode === KEY_CODES.ENTER &&
(!e.target.value || e.target.value.trim().length === 0) &&
!state.focusedKey &&
state.isOpen
) {
e.preventDefault();
return;
}

if (e.target.value === '') {
const tags = Object.keys(state.selectedKeys);
deleteTag(tags[tags.length - 1]);
if (
e.keyCode === KEY_CODES.DELETE ||
e.keyCode === KEY_CODES.BACKSPACE
) {
if (tagFocusedKey !== undefined) {
deleteTag(tagFocusedKey);
return;
}

if (e.target.value === '') {
const tags = Object.keys(state.selectedKeys);
deleteTag(tags[tags.length - 1]);
}
}
}

if (tagFocusedKey !== undefined) {
// copy-to-clipboard functionality
if (e.keyCode === 67 && e.metaKey) {
alert(`"${tagFocusedKey}" copied`);
if (tagFocusedKey !== undefined) {
// copy-to-clipboard functionality
if (e.keyCode === 67 && e.metaKey) {
alert(`"${tagFocusedKey}" copied`);
}
}
}
},
placeholder:
Object.keys(state.selectedKeys).length === 0
? 'Enter some content'
: undefined,
onFocus: () => {
setState({ isFocused: true });
},
onBlur: () => {
setState({ isFocused: false });
},
placeholder:
Object.keys(state.selectedKeys).length === 0
? 'Enter some content'
: undefined,
onFocus: () => {
setState({ isFocused: true });
},
onBlur: () => {
setState({ isFocused: false });
},
style: Object.assign(
{ margin: '0 2px', flexGrow: 1, width: 60 },
Object.keys(state.selectedKeys).length !== 0 &&
(!state.isFocused || tagFocusedKey !== undefined) &&
!isOpen
? { opacity: 0, height: 0, minHeight: 0 }
: {}
)
},
style: Object.assign(
{ margin: '0 2px', flexGrow: 1, width: 60 },
Object.keys(state.selectedKeys).length !== 0 &&
(!state.isFocused || tagFocusedKey !== undefined) &&
!isOpen
? { opacity: 0, height: 0, minHeight: 0 }
: {}
)
})
{ isDescribed: false }
)
)}
/>
</FauxInput>
Expand Down
19 changes: 10 additions & 9 deletions packages/checkboxes/src/elements/Checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import CheckboxView from '../views/CheckboxView';
import Input from '../views/Input';
import Label from '../views/Label';
import Hint from '../views/Hint';
import Message from '../views/Message';

/**
* Accepts all `<input type="checkbox" />` props
Expand Down Expand Up @@ -49,7 +48,6 @@ export default class Checkbox extends ControlledComponent {
renderCheckbox = ({
getLabelProps,
getInputProps,
getMessageProps,
getFocusProps,
getHintProps,
keyboardFocused
Expand All @@ -65,9 +63,17 @@ export default class Checkbox extends ControlledComponent {
*/
const { onMouseDown: onFocusMouseDown, ...checkboxProps } = getFocusProps(checkboxInputProps);

let isDescribed = false;

Children.forEach(children, child => {
if (hasType(child, Hint)) {
isDescribed = true;
}
});

return (
<CheckboxView {...wrapperProps}>
<Input {...getInputProps(checkboxProps)} />
<Input {...getInputProps(checkboxProps, { isDescribed })} />
{Children.map(children, child => {
if (!isValidElement(child)) {
return child;
Expand All @@ -91,10 +97,6 @@ export default class Checkbox extends ControlledComponent {
return cloneElement(child, getHintProps(child.props));
}

if (hasType(child, Message)) {
return cloneElement(child, getMessageProps(child.props));
}

return child;
})}
</CheckboxView>
Expand All @@ -106,13 +108,12 @@ export default class Checkbox extends ControlledComponent {

return (
<FieldContainer id={id}>
{({ getLabelProps, getInputProps, getMessageProps, getHintProps }) => (
{({ getLabelProps, getInputProps, getHintProps }) => (
<KeyboardFocusContainer>
{({ getFocusProps, keyboardFocused }) =>
this.renderCheckbox({
getLabelProps,
getInputProps,
getMessageProps,
getFocusProps,
getHintProps,
keyboardFocused
Expand Down
4 changes: 0 additions & 4 deletions packages/checkboxes/src/elements/Checkbox.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,6 @@ describe('Checkbox', () => {
expect(wrapper.find(Hint)).toHaveProp('id', `${CHECKBOX_ID}--hint`);
});

it('applies container props to Message', () => {
expect(wrapper.find(Message)).toHaveProp('id', `${CHECKBOX_ID}--message`);
});

it('applies no props to any other element', () => {
expect(Object.keys(wrapper.find('[data-test-id="extra"]').props())).toHaveLength(2);
});
Expand Down
2 changes: 1 addition & 1 deletion packages/checkboxes/src/views/Label.example.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
</Checkbox>
</Col>
<Col md={3}>
<Checkbox checked onChange={() => console.log('checked value changed')}>
<Checkbox checked>
<Label>Checked Label</Label>
</Checkbox>
</Col>
Expand Down
13 changes: 6 additions & 7 deletions packages/menus/src/containers/MenuContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,8 +240,6 @@ class MenuContainer extends ControlledComponent {
}
};

getMenuId = () => `${this.getControlledState().id}--container`;

toggleMenuVisibility = ({ defaultFocusedIndex, focusOnOpen, closedByBlur } = {}) => {
const { isOpen } = this.getControlledState();

Expand All @@ -263,7 +261,6 @@ class MenuContainer extends ControlledComponent {
return {
tabIndex,
'aria-haspopup': true,
'aria-controls': this.getMenuId(),
'aria-expanded': isOpen,
onClick: composeEventHandlers(onClick, () => this.toggleMenuVisibility()),
onKeyDown: composeEventHandlers(onKeyDown, event => {
Expand Down Expand Up @@ -313,13 +310,12 @@ class MenuContainer extends ControlledComponent {
* Props to be applied to the menu container
*/
getMenuProps = (
{ id = this.getMenuId(), tabIndex = -1, role = 'menu', onKeyDown, onFocus, ...other } = {},
{ tabIndex = -1, role = 'menu', onKeyDown, onFocus, ...other } = {},
focusSelectionModel
) => {
const { focusOnOpen } = this.getControlledState();

return {
id,
role,
tabIndex,
onFocus: composeEventHandlers(onFocus, event => {
Expand Down Expand Up @@ -410,7 +406,7 @@ class MenuContainer extends ControlledComponent {
/**
* Props to be applied to each selectable menu item
**/
getItemProps = ({ key, textValue, ...other }) => {
getItemProps = ({ key, role = 'menuitemcheckbox', textValue, ...other }) => {
const { focusedKey } = this.getControlledState();

if (typeof textValue === 'string' && textValue.length > 0) {
Expand All @@ -437,6 +433,7 @@ class MenuContainer extends ControlledComponent {

return {
key,
role,
...other
};
};
Expand Down Expand Up @@ -584,7 +581,9 @@ class MenuContainer extends ControlledComponent {
getContainerProps(this.getMenuProps(props, focusSelectionModel))
),
getItemProps: props =>
getSelectionItemProps(this.getItemProps(props)),
getSelectionItemProps(this.getItemProps(props), {
selectedAriaKey: 'aria-checked'
}),
getNextItemProps: props =>
getSelectionItemProps(
this.getItemProps(this.getNextItemProps(props))
Expand Down
Loading