diff --git a/common/changes/office-ui-fabric-react/jspurlin-SplitButtonAddAriaRoleDescription_2018-06-01-18-07.json b/common/changes/office-ui-fabric-react/jspurlin-SplitButtonAddAriaRoleDescription_2018-06-01-18-07.json new file mode 100644 index 0000000000000..eb54be0391847 --- /dev/null +++ b/common/changes/office-ui-fabric-react/jspurlin-SplitButtonAddAriaRoleDescription_2018-06-01-18-07.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "SplitButton: Hook up aria-roledescription to splitButtons so that they can leverage that markup if it gets passed in to the component.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "jspurlin@microsoft.com" +} diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx index 2a26c7f48849d..e5e603517e656 100644 --- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx @@ -541,6 +541,7 @@ export class BaseButton extends BaseComponent { onClick={ alertClicked } split={ true } splitButtonAriaLabel={ 'See 2 sample options' } + aria-roledescription={ 'split button' } style={ { height: '35px' } } menuProps={ { items: [ @@ -60,6 +61,7 @@ export class ButtonSplitExample extends React.Component { text='Create account' onClick={ alertClicked } split={ true } + aria-roledescription={ 'split button' } style={ { height: '35px' } } menuProps={ { items: [ @@ -88,6 +90,7 @@ export class ButtonSplitExample extends React.Component { text='Create account' onClick={ alertClicked } split={ true } + aria-roledescription={ 'split button' } style={ { height: '35px' } } menuProps={ { items: [ @@ -115,6 +118,7 @@ export class ButtonSplitExample extends React.Component { text='Create account' onClick={ alertClicked } split={ true } + aria-roledescription={ 'split button' } style={ { height: '35px' } } menuProps={ { items: [ @@ -154,6 +158,7 @@ export class ButtonSplitCustomExample extends React.Component { text='Create account' onClick={ alertClicked } split={ true } + aria-roledescription={ 'split button' } styles={ customSplitButtonStyles } menuProps={ { items: [ diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx index e53d8170da402..08d61fe446a31 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx @@ -79,6 +79,7 @@ export class ContextualMenuSplitButton extends ContextualMenuItemWrapper { onTouchStart={ this._onTouchStart } tabIndex={ 0 } data-is-focusable={ true } + aria-roledescription={ item['aria-roledescription'] } > { this._renderSplitPrimaryButton(item, classNames, index, hasCheckmarks!, hasIcons!) } { this._renderSplitDivider(item) } diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuSplitButton.deprecated.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuSplitButton.deprecated.test.tsx.snap index c23ca49d8ef22..8abebd8a4361f 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuSplitButton.deprecated.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuSplitButton.deprecated.test.tsx.snap @@ -9,6 +9,7 @@ exports[`ContextualMenuSplitButton creates a normal split button renders the con aria-haspopup={true} aria-label={undefined} aria-posinset={1} + aria-roledescription={undefined} aria-setsize={1} className="splitContainer" data-is-focusable={true} diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuSplitButton.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuSplitButton.test.tsx.snap index c23ca49d8ef22..8abebd8a4361f 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuSplitButton.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuSplitButton.test.tsx.snap @@ -9,6 +9,7 @@ exports[`ContextualMenuSplitButton creates a normal split button renders the con aria-haspopup={true} aria-label={undefined} aria-posinset={1} + aria-roledescription={undefined} aria-setsize={1} className="splitContainer" data-is-focusable={true} diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx index 83b156d817fad..fb4d2b24bd548 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx @@ -85,6 +85,7 @@ export class ContextualMenuSubmenuExample extends React.Component alert('Split buttons!'), split: true, + 'aria-roledescription': 'split button', subMenuProps: { items: [ {