feat(NavbarToggler): add aria-label to NavbarToggler (#1633)

This adds the aria-label to the NavbarToggler as seen in the bootstrap docs. Fixes #1632 Fix breaking tests Change order of aria prop to allow overrides
reactstrap · Sep 28, 2019 · dc0b8ae · dc0b8ae
1 parent de5f482
commit dc0b8ae
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/src/NavbarToggler.js b/src/NavbarToggler.js
@@ -31,7 +31,7 @@ const NavbarToggler = (props) => {
   ), cssModule);
 
   return (
-    <Tag {...attributes} className={classes}>
+    <Tag aria-label="Toggle navigation" {...attributes} className={classes}>
       {children || <span className={mapToCssModules('navbar-toggler-icon', cssModule)} />}
     </Tag>
   );

diff --git a/src/__tests__/NavbarToggler.spec.js b/src/__tests__/NavbarToggler.spec.js
@@ -6,19 +6,20 @@ describe('NavbarToggler', () => {
   it('should render .navbar-toggler markup', () => {
     const wrapper = shallow(<NavbarToggler />);
 
-    expect(wrapper.html()).toBe('<button type="button" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>');
+    expect(wrapper.prop('aria-label')).toBe('Toggle navigation');
+    expect(wrapper.html()).toBe('<button aria-label="Toggle navigation" type="button" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>');
   });
 
   it('should render custom tag', () => {
     const wrapper = shallow(<NavbarToggler tag="div" />);
 
-    expect(wrapper.html()).toBe('<div type="button" class="navbar-toggler"><span class="navbar-toggler-icon"></span></div>');
+    expect(wrapper.html()).toBe('<div aria-label="Toggle navigation" type="button" class="navbar-toggler"><span class="navbar-toggler-icon"></span></div>');
   });
 
   it('should render children instead of navbar-toggler-icon ', () => {
     const wrapper = shallow(<NavbarToggler>Children</NavbarToggler>);
 
-    expect(wrapper.html()).toBe('<button type="button" class="navbar-toggler">Children</button>');
+    expect(wrapper.html()).toBe('<button aria-label="Toggle navigation" type="button" class="navbar-toggler">Children</button>');
   });
 
   it('should pass additional classNames', () => {