diff --git a/common/changes/office-ui-fabric-react/master_2018-02-12-21-15.json b/common/changes/office-ui-fabric-react/master_2018-02-12-21-15.json new file mode 100644 index 00000000000000..760c8144a8dac3 --- /dev/null +++ b/common/changes/office-ui-fabric-react/master_2018-02-12-21-15.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Fix aria-owns in contextual menu items, and add appropriate aria properties to CommandBar items.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "trgau@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.test.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.test.tsx index ac810998684d0c..5626722982de89 100644 --- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.test.tsx +++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.test.tsx @@ -43,6 +43,52 @@ describe('CommandBar', () => { expect(tree).toMatchSnapshot(); }); + it('adds the correct aria-setsize and -posinset attributes to the command bar items.', () => { + const items: IContextualMenuItem[] = [ + { + name: 'TestText 1', + key: 'TestKey1', + className: 'item1', + subMenuProps: { + items: [ + { + name: 'SubmenuText 1', + key: 'SubmenuKey1', + className: 'SubMenuClass' + } + ] + } + }, + { + name: 'TestText 2', + key: 'TestKey2', + className: 'item2', + }, + { + name: 'TestText 3', + key: 'TestKey3', + className: 'item3', + }, + ]; + + const renderedContent = ReactTestUtils.renderIntoDocument( + + ) as React.Component; + document.body.appendChild(ReactDOM.findDOMNode(renderedContent)); + + console.log(document.body.innerHTML); + + const [item1, item2, item3] = ['.item1', '.item2', '.item3'].map(i => document.querySelector(i)!.children[0]); + expect(item1.getAttribute('aria-setsize')).toBe('3'); + expect(item2.getAttribute('aria-setsize')).toBe('3'); + expect(item3.getAttribute('aria-setsize')).toBe('3'); + expect(item1.getAttribute('aria-posinset')).toBe('1'); + expect(item2.getAttribute('aria-posinset')).toBe('2'); + expect(item3.getAttribute('aria-posinset')).toBe('3'); + }); + it('opens a menu with deprecated IContextualMenuItem.items property', () => { const items: IContextualMenuItem[] = [ { diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx index a40a2bb30501ea..380c19195a352c 100644 --- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx +++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx @@ -110,14 +110,17 @@ export class CommandBar extends BaseComponent ); } + // Total # of menu items is regular items + far items + 1 for the ellipsis, if necessary + const setSize = renderedItems!.length + renderedFarItems!.length + (renderedOverflowItems && renderedOverflowItems.length > 0 ? 1 : 0); + let posInSet = 1; return (
{ searchBox }
- { renderedItems!.map((item, index) => ( - this._renderItemInCommandBar(item, index, expandedMenuItemKey!) + { renderedItems!.map(item => ( + this._renderItemInCommandBar(item, posInSet++, setSize, expandedMenuItemKey!) )).concat((renderedOverflowItems && renderedOverflowItems.length) ? [