Skip to content
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

Combo Box - Adding title and Improved aria-activedescendant for accessibility #3738

Merged
merged 13 commits into from
Jan 26, 2018
Merged

Combo Box - Adding title and Improved aria-activedescendant for accessibility #3738

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
4054f99
added aria-autocomplete; added title; added activedescendant with foc…
Jan 17, 2018
5ac2fed
added comments in combobox
Jan 17, 2018
658f005
removed autocomplete value for now
Jan 17, 2018
10e99a5
cleaned up code
Jan 17, 2018
7f460ec
Merge branch 'master' into chiechan/checkboxAcc
Jan 17, 2018
a9f0009
added change files
Jan 17, 2018
f9ce367
fixed for id for label to point to the input element
Jan 18, 2018
8d0ad87
updated changes with aria-autocomplete
Jan 22, 2018
ed7eba2
fixed lint problem; updated test snap file
Jan 23, 2018
a656591
fixed aria autocomplete to have the correct logic in if check
Jan 23, 2018
8d80c5a
simplified code and changed priority of title values
Jan 24, 2018
4bf14bd
addressed lint problems and updated test
Jan 24, 2018
556fd0c
updated title to only use title attribute for combobox
Jan 25, 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
11 changes: 11 additions & 0 deletions common/changes/office-ui-fabric-react/chiechan-checkboxAcc_2018-01-17-19-40.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"packageName": "office-ui-fabric-react",
"comment": "Combox box: added accessibility changes added a title and changed activedescendant to use focused element",
"type": "patch"
}
],
"packageName": "office-ui-fabric-react",
"email": "chiechan@microsoft.com"
}
35 changes: 32 additions & 3 deletions packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
return (
<div {...divProps } ref='root' className={ this._classNames.container }>
{ label && (
<Label id={ id + '-label' } disabled={ disabled } required={ required } htmlFor={ id } className={ this._classNames.label }>{ label }</Label>
<Label id={ id + '-label' } disabled={ disabled } required={ required } htmlFor={ id + '-input' } className={ this._classNames.label }>{ label }</Label>
) }
<div
ref={ this._resolveRef('_comboBoxWrapper') }
Expand All @@ -315,21 +315,22 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
onClick={ this._onBaseAutofillClick }
onInputValueChange={ this._onInputChange }
aria-expanded={ isOpen }
aria-autocomplete={ (!disabled && autoComplete === 'on') }
aria-autocomplete={ this._getAriaAutoCompleteValue() }
role='combobox'
aria-readonly={ ((allowFreeform || disabled) ? null : 'true') }
readOnly={ disabled || !allowFreeform }
aria-labelledby={ (label && (id + '-label')) }
aria-label={ ((ariaLabel && !label) && ariaLabel) }
aria-describedby={ (id + '-option') }
aria-activedescendant={ (isOpen && (selectedIndex as number) >= 0 ? (id + '-list' + selectedIndex) : null) }
aria-activedescendant={ this._getAriaActiveDescentValue() }
aria-disabled={ disabled }
aria-owns={ (id + '-list') }
spellCheck={ false }
defaultVisibleValue={ this._currentVisibleValue }
suggestedDisplayValue={ suggestedDisplayValue }
updateValueInWillReceiveProps={ this._onUpdateValueInAutoFillWillReceiveProps }
shouldSelectFullInputValueInComponentDidUpdate={ this._onShouldSelectFullInputValueInAutoFillComponentDidUpdate }
title={ (ariaLabel && !label) ? ariaLabel : label }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't be setting the title with ariaLabel, actually we shouldn't be setting aria-label, aria-labelledby, or title at the same time. Why not use this.props.title and then check that there's no label or ariaLabel and a title before adding the title. You'll also need to tell getNativeProps to ignore the title attribute

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right, actually I don't think any of the labels are even needed. I think the correct approach here is to just add the title and exclude it so it's not added to the div.

/>
<IconButton
className={ 'ms-ComboBox-CaretDown-button' }
Expand Down Expand Up @@ -1540,4 +1541,32 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {

return getOptionStyles(this.props.theme!, customStylesForAllOptions, customStylesForCurrentOption);
}

/**
* Get the aria-activedescendant value for the comboxbox.
* @returns the id of the current focused combo item, otherwise the id of the currently selected element, null otherwise
*/
private _getAriaActiveDescentValue(): string | null {
let descendantText = (this.state.isOpen && (this.state.selectedIndex as number) >= 0 ? (this._id + '-list' + this.state.selectedIndex) : null);
if (this.state.isOpen && this.state.focused && this.state.currentPendingValueValidIndex !== -1) {
descendantText = (this._id + '-list' + this.state.currentPendingValueValidIndex);
}
return descendantText;
}

/**
* Get the aria autocomplete value for the Combobox
* @returns 'inline' if auto-complete automatically dynamic, 'both' if we have a list of possible values to pick from and can
* dynamically populate input, and 'none' if auto-complete is not enabled as we can't give user inputs.
*/
private _getAriaAutoCompleteValue(): string {
let autoComplete = !this.props.disabled && this.props.autoComplete === 'on';
if (autoComplete && this.props.allowFreeform) {
return 'inline';
} else if (autoComplete && !this.props.allowFreeform) {
return 'both';
} else {
return 'none';
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider changing this to a ternary opertation like: autoComplete ? allFreeform ? 'inline' : 'both' : 'none' or autoComplete ? (allFreeform ? 'inline' : 'both') : 'none' (if you want to be explicit about it). This will make the statements cleaner and remove a duplicate autoComplete check

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will do. I was once told to avoid it, but if you think it's fine, then I'll make the change.

Copy link
Contributor

@jspurlin jspurlin Jan 23, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah if it's a complicated ternary statement or you're nesting more than two statements don't do it, is how I usually think about it

}
}
3 changes: 2 additions & 1 deletion packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
>
<input
aria-activedescendant={null}
aria-autocomplete={true}
aria-autocomplete="both"
aria-describedby="ComboBox0-option"
aria-disabled={undefined}
aria-expanded={false}
Expand Down Expand Up @@ -112,6 +112,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
readOnly={true}
role="combobox"
spellCheck={false}
title={undefined}
type="text"
value=""
/>
Expand Down