feat(Accessibility): Make Grid keyboard navigable by adding Grid Behavior

[sophieH29]

This PR adds a possibility to navigate Grid items with arrow buttons.
What was added:

• extended Grid's API, so now it can process accessibility prop. (though, a default value is defaultBehavior)
• added gridBehavior with FocusZone circular bi-directional navigation
• added example of keyboard navigable Grid component, which uses gridBehavior for that purpose.

TODO:

• update CHANGELOG.md

[codecov]

Codecov Report

❗ No coverage uploaded for pull request base (master@74f3e11). Click here to learn what that means.
The diff coverage is 100%.

@@            Coverage Diff            @@
##             master     #398   +/-   ##
=========================================
  Coverage          ?   91.79%           
=========================================
  Files             ?       41           
  Lines             ?     1328           
  Branches          ?      193           
=========================================
  Hits              ?     1219           
  Misses            ?      105           
  Partials          ?        4

Impacted Files	Coverage Δ
src/index.ts	100% <100%> (ø)
src/components/Grid/Grid.tsx	100% <100%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 74f3e11...c22ae4d. Read the comment docs.

[bmdalex]

looks good generally, please see comments

[bmdalex]

can you make this an array to save space?

[sophieH29]

yep, sure, that does make sense. Thank you!

[bmdalex]

can you make this an array to save space?

[bmdalex]

I was trying this in our react conf prototype and it does not behave correctly when the grid items contain focusable items themselves:

As you can see in the screenshot above, the grid items contain a button ("FULL BIO") so navigation works incorrectly:

actual: arrow keys navigate to grid items then to buttons
expected: two level of keyboard navigation:

• arrow keys navigate between grid items;
• enter key navigates inside the grid item (level 2 key nav) that will trap focus;
• esc key navigates back to the grid item (level 1 key nav)

fyi @sophieH29 @jurokapsiar

[sophieH29]

@Bugaa92 You are totally right about having nested navigation. But it is not what expected in current PR. Current PR provides navigation with arrow keys on grid items itself, whether they are focusable elements or have set data-is-focusable=true

[bmdalex]

in the example I provided above, each item contains a button but also data-is-focusable=true at the top item element which causes weird navigation:

<Grid
  <div className="grid item" data-is-focusable="true" >
    <button>FULL BIO</button>
  </div>
  <div className="grid item" data-is-focusable="true" >
    <button>FULL BIO</button>
  </div>
  ...
  <div className="grid item" data-is-focusable="true" >
    <button>FULL BIO</button>
  </div>
/>

let's say the focus is in the Grid; user scenario:

• focus is on first grid item;
• press right arrow key; focus goes to button inside first grid item;
• press right arrow key; focus goes to second grid item;
• press right arrow key; focus goes to button inside second grid item;
• etc.

This looks wrong to me, do we want merge it like this?

LATER EDIT:

Discussed with @sophieH29 and all these complex cases will be handled in future work