fix(community-side-navigation): fix accessibility voice over issue

Andrew-K-Lam · agorovyi · commit c64800afce10 · 2019-06-27T13:00:58.000-04:00
diff --git a/packages/SideNavigation/SubMenu/SubMenu.jsx b/packages/SideNavigation/SubMenu/SubMenu.jsx
@@ -83,7 +83,12 @@ class SubMenu extends React.Component {
 
     return (
       <div>
-        <ButtonSubMenu {...safeRest(rest)} onClick={this.handleClick} active={active}>
+        <ButtonSubMenu
+          {...safeRest(rest)}
+          onClick={this.handleClick}
+          active={active}
+          aria-expanded={isOpen}
+        >
           <SpaceBox vertical={3} inline horizontal={2}>
             <ColoredTextProvider>
               <Text size="medium" bold={active}>
diff --git a/packages/SideNavigation/SubMenu/__tests__/__snapshots__/SubMenu.spec.jsx.snap b/packages/SideNavigation/SubMenu/__tests__/__snapshots__/SubMenu.spec.jsx.snap
@@ -4,6 +4,7 @@ exports[`SideNavigation.SubMenu renders 1`] = `
 <div>
   <styled.button
     active={true}
+    aria-expanded={false}
     id="Three"
     onClick={[Function]}
   >
diff --git a/packages/SideNavigation/__tests__/__snapshots__/SideNavigation.spec.jsx.snap b/packages/SideNavigation/__tests__/__snapshots__/SideNavigation.spec.jsx.snap
@@ -318,6 +318,7 @@ exports[`SideNavigation renders 1`] = `
                       >
                         <div>
                           <button
+                            aria-expanded="false"
                             class="c6"
                             id="TDS-SideNavigation-3"
                           >
@@ -1032,12 +1033,14 @@ exports[`SideNavigation renders 1`] = `
                                 <div>
                                   <styled.button
                                     active={false}
+                                    aria-expanded={false}
                                     handleToggleSubMenu={[Function]}
                                     id="TDS-SideNavigation-3"
                                     onClick={[Function]}
                                   >
                                     <StyledComponent
                                       active={false}
+                                      aria-expanded={false}
                                       forwardedComponent={
                                         Object {
                                           "$$typeof": Symbol(react.forward_ref),
@@ -1066,6 +1069,7 @@ exports[`SideNavigation renders 1`] = `
                                       onClick={[Function]}
                                     >
                                       <button
+                                        aria-expanded={false}
                                         className="c7"
                                         id="TDS-SideNavigation-3"
                                         onClick={[Function]}
@@ -1964,6 +1968,7 @@ exports[`SideNavigation renders without vertical spacing 1`] = `
                       >
                         <div>
                           <button
+                            aria-expanded="true"
                             class="c6"
                             id="TDS-SideNavigation-1"
                           >
@@ -2281,12 +2286,14 @@ exports[`SideNavigation renders without vertical spacing 1`] = `
                                 <div>
                                   <styled.button
                                     active={true}
+                                    aria-expanded={true}
                                     handleToggleSubMenu={[Function]}
                                     id="TDS-SideNavigation-1"
                                     onClick={[Function]}
                                   >
                                     <StyledComponent
                                       active={true}
+                                      aria-expanded={true}
                                       forwardedComponent={
                                         Object {
                                           "$$typeof": Symbol(react.forward_ref),
@@ -2315,6 +2322,7 @@ exports[`SideNavigation renders without vertical spacing 1`] = `
                                       onClick={[Function]}
                                     >
                                       <button
+                                        aria-expanded={true}
                                         className="c7"
                                         id="TDS-SideNavigation-1"
                                         onClick={[Function]}

Original file line number	Diff line number	Diff line change
@@ -4,6 +4,7 @@ exports[`SideNavigation.SubMenu renders 1`] = `
`4`	`4`	`<div>`
`5`	`5`	`<styled.button`
`6`	`6`	`active={true}`
	`7`	`+ aria-expanded={false}`
`7`	`8`	`id="Three"`
`8`	`9`	`onClick={[Function]}`
`9`	`10`	`>`