[fixed] Allow overriding aria-label on <SplitButton> toggle

lithiumtech · Jan 24, 2016 · 922ecae · 922ecae
1 parent 9ffcbd2
commit 922ecae
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/src/SplitButton.js b/src/SplitButton.js
@@ -14,6 +14,7 @@ class SplitButton extends React.Component {
       onClick,
       target,
       href,
+      toggleLabel,
       bsSize,
       bsStyle,
       ...props } = this.props;
@@ -37,7 +38,7 @@ class SplitButton extends React.Component {
           {title}
         </Button>
         <SplitToggle
-          aria-label={title}
+          aria-label={toggleLabel || title}
           bsStyle={bsStyle}
           bsSize={bsSize}
           disabled={disabled}
@@ -63,7 +64,11 @@ SplitButton.propTypes = {
   /**
    * The content of the split button.
    */
-  title: React.PropTypes.node.isRequired
+  title: React.PropTypes.node.isRequired,
+  /**
+   * Accessible label for the toggle; the value of `title` if not specified.
+   */
+  toggleLabel: React.PropTypes.string
 };
 
 SplitButton.defaultProps = {

diff --git a/test/SplitButtonSpec.js b/test/SplitButtonSpec.js
@@ -101,4 +101,21 @@ describe('SplitButton', () => {
     assert.equal(linkElement.target, '_blank');
   });
 
+  it('should set aria-label on toggle from title', () => {
+    const instance = ReactTestUtils.renderIntoDocument(simple);
+
+    const toggleNode = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'dropdown-toggle');
+    expect(toggleNode.getAttribute('aria-label')).to.equal('Title');
+  });
+
+  it('should set aria-label on toggle from toggleLabel', () => {
+    const instance = ReactTestUtils.renderIntoDocument(
+      <SplitButton title='Title' id='test-id' toggleLabel='Label'>
+        <MenuItem>Item 1</MenuItem>
+      </SplitButton>
+    );
+
+    const toggleNode = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'dropdown-toggle');
+    expect(toggleNode.getAttribute('aria-label')).to.equal('Label');
+  });
 });