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

Port #6244 to remove invalid aria-posinset and aria-setsize attributes in Commandbar #13734

Merged
merged 2 commits into from
Jun 23, 2020
Merged

Port #6244 to remove invalid aria-posinset and aria-setsize attributes in Commandbar #13734

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7c74d33
Port #6244 to remove invalid aria-posinset and aria-setsize attribute…
Phoebe-0319 Jun 22, 2020
eb83a4a
add change log
Phoebe-0319 Jun 22, 2020
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 ...anges/office-ui-fabric-react/hotfix_8-office-ui-fabric-react-5.79.1_2020-06-22-08-36.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": "Commandbar: remove invalid aria-posinset and aria-setsize attributes",
"type": "patch"
}
],
"packageName": "office-ui-fabric-react",
"email": "[email protected]"
}
44 changes: 0 additions & 44 deletions packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,50 +43,6 @@ 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<CommandBar>(
<CommandBar
items={ items }
/>
) as React.Component<CommandBar, {}>;
document.body.appendChild(ReactDOM.findDOMNode(renderedContent));

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[] = [
{
Expand Down
19 changes: 4 additions & 15 deletions packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,17 +114,14 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
</div>
);
}
// 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 (
<div className={ css('ms-CommandBar', styles.root, className) } ref={ this._commandBarRegion }>
{ searchBox }
<FocusZone componentRef={ this._focusZone } className={ styles.container } direction={ FocusZoneDirection.horizontal } role='menubar' >
<div className={ css('ms-CommandBar-primaryCommands', styles.primaryCommands) } ref={ this._commandSurface }>
{ renderedItems!.map(item => (
this._renderItemInCommandBar(item, posInSet++, setSize, expandedMenuItemKey!)
this._renderItemInCommandBar(item, expandedMenuItemKey!)
)).concat((renderedOverflowItems && renderedOverflowItems.length) ? [
<div className={ css('ms-CommandBarItem', styles.item) } key={ OVERFLOW_KEY } ref={ this._overflow }>
<button
Expand All @@ -138,8 +135,6 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
aria-expanded={ this.state.expandedMenuItemKey === OVERFLOW_KEY }
aria-label={ this.props.elipisisAriaLabel || '' }
aria-haspopup={ true }
aria-setsize={ setSize }
aria-posinset={ posInSet++ }
data-automation-id='commandBarOverflow'
>
<Icon className={ css('ms-CommandBarItem-overflow', styles.itemOverflow) } iconName='more' />
Expand All @@ -149,7 +144,7 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
</div>
<div className={ css('ms-CommandBar-sideCommands', styles.sideCommands) } ref={ this._farCommandSurface }>
{ renderedFarItems!.map(item => (
this._renderItemInCommandBar(item, posInSet++, setSize, expandedMenuItemKey!, true)
this._renderItemInCommandBar(item, expandedMenuItemKey!, true)
)) }
</div>
</FocusZone>
Expand All @@ -173,7 +168,7 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
focusZone && focusZone.focus();
}

private _renderItemInCommandBar(item: ICommandBarItemProps, posInSet: number, setSize: number, expandedMenuItemKey: string, isFarItem?: boolean) {
private _renderItemInCommandBar(item: ICommandBarItemProps, expandedMenuItemKey: string, isFarItem?: boolean) {
if (item.onRender) {
return (
<div className={ css('ms-CommandBarItem', styles.item, item.className) } key={ item.key } ref={ item.key }>
Expand All @@ -182,7 +177,7 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
);
}

const itemKey = item.key || String(posInSet);
const itemKey = item.key;
const isLink = item.onClick || hasSubmenu(item);
const className = css(
isLink ? ('ms-CommandBarItem-link ' + styles.itemLink) : ('ms-CommandBarItem-text ' + styles.itemText),
Expand Down Expand Up @@ -217,8 +212,6 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
aria-haspopup={ hasSubmenu(item) }
role='menuitem'
aria-label={ ariaLabel }
aria-setsize={ setSize }
aria-posinset={ posInSet }
>
{ (hasIcon) ? this._renderIcon(item) : (null) }
{ isNameVisible && (
Expand All @@ -244,8 +237,6 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
aria-expanded={ hasSubmenu(item) ? expandedMenuItemKey === item.key : undefined }
role='menuitem'
aria-label={ ariaLabel }
aria-setsize={ setSize }
aria-posinset={ posInSet }
>
{ (hasIcon) ? this._renderIcon(item) : (null) }
{ isNameVisible && (
Expand All @@ -272,8 +263,6 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
data-command-key={ itemKey }
aria-haspopup={ hasSubmenu(item) }
aria-label={ ariaLabel }
aria-setsize={ setSize }
aria-posinset={ posInSet }
>
{ (hasIcon) ? this._renderIcon(item) : (null) }
{ (isNameVisible) && (
Expand Down
2 changes: 0 additions & 2 deletions ...s/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,6 @@ exports[`CommandBar renders CommandBar correctly 1`] = `
aria-expanded={false}
aria-haspopup={true}
aria-label={undefined}
aria-posinset={1}
aria-setsize={1}
className="ms-CommandBarItem-link undefined"
data-command-key="TestKey1"
id="CommandBar0TestKey1"
Expand Down