Skip to content

Add aria-describedby prop to Combo Box and Spin Button. Fixes #8045 #8057

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
JasonGore merged 11 commits into from
Feb 22, 2019
Merged

Add aria-describedby prop to Combo Box and Spin Button. Fixes #8045 #8057

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
118be77
Add aria-describedby prop to Combo Box and Spin Button
Feb 20, 2019
ca9649f
Add change file
Feb 20, 2019
45cb50c
Update API
Feb 20, 2019
73dd169
Add unit tests
Feb 21, 2019
9b3a9b7
Add missing space
Dalimil Feb 21, 2019
8064a77
Update unit tests to test word boundary
Dalimil Feb 21, 2019
10d09ff
Update snapshots
Feb 21, 2019
8a7cf57
Add changefile for utilities
Feb 21, 2019
992c4d6
Improve change file note
Feb 21, 2019
91c020c
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
Feb 21, 2019
86b8487
Fix tslint - long line
Feb 21, 2019
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/master_2019-02-20-22-30.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": "Add aria-describedby prop to Combo Box and Spin Button",
"type": "patch"
Comment thread
Dalimil marked this conversation as resolved.
Outdated
}
],
"packageName": "office-ui-fabric-react",
"email": "dahajek@microsoft.com"
}
6 changes: 4 additions & 2 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 @@ -13,7 +13,8 @@ import {
isIOS,
isMac,
KeyCodes,
shallowCompare
shallowCompare,
mergeAriaAttributeValues
} from '../../Utilities';
import { Callout } from '../../Callout';
import { Checkbox } from '../../Checkbox';
Expand Down Expand Up @@ -311,6 +312,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
label,
disabled,
ariaLabel,
ariaDescribedBy,
required,
errorMessage,
onRenderContainer = this._onRenderContainer,
Expand Down Expand Up @@ -383,7 +385,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
readOnly={disabled || !allowFreeform}
aria-labelledby={label && id + '-label'}
aria-label={ariaLabel && !label ? ariaLabel : undefined}
aria-describedby={keytipAttributes['aria-describedby']}
aria-describedby={mergeAriaAttributeValues(ariaDescribedBy, keytipAttributes['aria-describedby'])}
aria-activedescendant={this._getAriaActiveDescentValue()}
aria-disabled={disabled}
aria-owns={isOpen ? id + '-list' : undefined}
Expand Down
5 changes: 5 additions & 0 deletions packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,11 @@ export interface IComboBoxProps extends ISelectableDroppableTextProps<IComboBox>
*/
isButtonAriaHidden?: boolean;

/**
* Optional prop to add a string id that can be referenced inside the aria-describedby attribute
*/
ariaDescribedBy?: string;

/**
* Optional keytip for this combo box
*/
Expand Down
13 changes: 11 additions & 2 deletions packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,15 @@ import * as React from 'react';
import { IconButton } from '../../Button';
import { Label } from '../../Label';
import { Icon } from '../../Icon';
import { BaseComponent, getId, KeyCodes, customizable, calculatePrecision, precisionRound } from '../../Utilities';
import {
BaseComponent,
getId,
KeyCodes,
customizable,
calculatePrecision,
precisionRound,
mergeAriaAttributeValues
} from '../../Utilities';
import { ISpinButton, ISpinButtonProps } from './SpinButton.types';
import { Position } from '../../utilities/positioning';
import { getStyles, getArrowButtonStyles } from './SpinButton.styles';
Expand Down Expand Up @@ -123,6 +131,7 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
decrementButtonAriaLabel,
title,
ariaLabel,
ariaDescribedBy,
styles: customStyles,
upArrowButtonStyles: customUpArrowButtonStyles,
downArrowButtonStyles: customDownArrowButtonStyles,
Expand Down Expand Up @@ -177,7 +186,7 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
aria-valuetext={ariaValueText ? ariaValueText : isNaN(Number(value)) ? value : undefined}
aria-valuemin={min}
aria-valuemax={max}
aria-describedby={keytipAttributes['aria-describedby']}
aria-describedby={mergeAriaAttributeValues(ariaDescribedBy, keytipAttributes['aria-describedby'])}
onBlur={this._onBlur}
ref={this._input}
onFocus={this._onFocus}
Expand Down
5 changes: 5 additions & 0 deletions packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,11 @@ export interface ISpinButtonProps {
*/
ariaLabel?: string;

/**
* Optional prop to add a string id that can be referenced inside the aria-describedby attribute
*/
ariaDescribedBy?: string;

/**
* A title for the SpinButton used for a more descriptive name that's also visible on its tooltip.
*/
Expand Down