Fluentui: No keypress equivalent to column header click on detailslist

[JoshuaLamusga]

Actual behavior:

Some browsers allow the enter button to trigger onColumnClick in DetailsColumn.base.tsx when focus is on a column header in a DetailsList, e.g. Chrome. (ev.button is undefined because no mouse button was used to trigger it.)

Expected behavior:

All browsers should have this behavior explicitly, to support accessibility. This is currently implicitly occurring and there is no keydown handler in DetailsColumn.base.tsx. keyDown should be specified under render() in that file for the Enter button.

Documentation describing expected behavior

2.1.1 Keyboard: https://www.w3.org/WAI/WCAG21/quickref/#keyboard, actionable elements must allow each action to be triggered by keyboard

[aftab-hassan]

@JoshuaLamusga Thanks for reporting the issue. I am able to see this, and looks like an Accessibility bug. We are looking into it and will report back.

[JoshuaLamusga]

To test, use IE and go to https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist, then tab to the column called Name and press enter. Nothing will happen, though you can click the column to sort it / change sort direction.

[aftab-hassan]

I am still looking in to this.

I believe the root cause is that, in this line, IE does not detect keyboard press as a MouseEvent, whereas, other browsers do. I will look for a way to invoke this function on both KeyBoard as well as MouseEvent, and not break the behavior on other browsers. https://github.com/OfficeDev/office-ui-fabric-react/blob/7fb25fe44a8b5d35f08ffd2384921f006cbf170d/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx#L197

[aftab-hassan]

Update on this. This is failing at

at this line
https://github.com/OfficeDev/office-ui-fabric-react/blob/bf912f0679f7c54bfd6864c6e8b7a9dfc2de128b/packages/utilities/src/dom/raiseClick.ts#L3

because the Event() constructor is not supported in IE

I am looking for ways to get around this.

EDIT : I have a solution. Will raise a PR