From 48bcc0a57190863e874710139a46420f53b98726 Mon Sep 17 00:00:00 2001
From: Micah Godbolt <micahgodbolt@gmail.com>
Date: Tue, 25 Apr 2017 08:28:31 -0700
Subject: [PATCH 1/3] Added focus zone around navigation to make it more
 keyboard accessible

---
 apps/fabric-website/src/components/Nav/Nav.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/fabric-website/src/components/Nav/Nav.tsx b/apps/fabric-website/src/components/Nav/Nav.tsx
index b3b9b6990c9606..c1cb5b2c1d7f6e 100644
--- a/apps/fabric-website/src/components/Nav/Nav.tsx
+++ b/apps/fabric-website/src/components/Nav/Nav.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
+import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
 import * as stylesImport from './Nav.module.scss';
 const styles: any = stylesImport;
 import {
@@ -24,9 +25,11 @@ export class Nav extends React.Component<INavProps, INavState> {
       : null;
 
     return (
-      <nav className={ styles.nav } role='navigation'>
-        { links }
-      </nav>
+      <FocusZone ref='focusZone' direction={ FocusZoneDirection.vertical } role='menubar' >
+        <nav className={ styles.nav } role='navigation'>
+          { links }
+        </nav>
+      </FocusZone>
     );
   }
 

From fcc901dde476b19d52a8b17a606f46b8ab74003c Mon Sep 17 00:00:00 2001
From: Micah Godbolt <micahgodbolt@gmail.com>
Date: Tue, 25 Apr 2017 09:09:43 -0700
Subject: [PATCH 2/3] Remove ref and change role to menu

---
 apps/fabric-website/src/components/Nav/Nav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/fabric-website/src/components/Nav/Nav.tsx b/apps/fabric-website/src/components/Nav/Nav.tsx
index c1cb5b2c1d7f6e..b9e00cab4a68a9 100644
--- a/apps/fabric-website/src/components/Nav/Nav.tsx
+++ b/apps/fabric-website/src/components/Nav/Nav.tsx
@@ -25,7 +25,7 @@ export class Nav extends React.Component<INavProps, INavState> {
       : null;
 
     return (
-      <FocusZone ref='focusZone' direction={ FocusZoneDirection.vertical } role='menubar' >
+      <FocusZone direction={ FocusZoneDirection.vertical } role='menu' >
         <nav className={ styles.nav } role='navigation'>
           { links }
         </nav>

From 7f74148dbc66f33e90bb99d575993bf710f5ce0d Mon Sep 17 00:00:00 2001
From: Micah Godbolt <micahgodbolt@gmail.com>
Date: Tue, 25 Apr 2017 09:41:38 -0700
Subject: [PATCH 3/3] removed redundant role attribute

---
 apps/fabric-website/src/components/Nav/Nav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/fabric-website/src/components/Nav/Nav.tsx b/apps/fabric-website/src/components/Nav/Nav.tsx
index b9e00cab4a68a9..fab1b9c0da8ad8 100644
--- a/apps/fabric-website/src/components/Nav/Nav.tsx
+++ b/apps/fabric-website/src/components/Nav/Nav.tsx
@@ -25,7 +25,7 @@ export class Nav extends React.Component<INavProps, INavState> {
       : null;
 
     return (
-      <FocusZone direction={ FocusZoneDirection.vertical } role='menu' >
+      <FocusZone direction={ FocusZoneDirection.vertical } >
         <nav className={ styles.nav } role='navigation'>
           { links }
         </nav>