fix(number-input): removes role from icon and adds conditional aria l…

…abel (#4816)
carbon-design-system · Dec 5, 2019 · 155ebed · 155ebed
1 parent 80e573c
commit 155ebed
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 23 deletions.
diff --git a/packages/react/src/components/NumberInput/NumberInput-test.js b/packages/react/src/components/NumberInput/NumberInput-test.js
@@ -22,26 +22,27 @@ describe('NumberInput', () => {
     let formItem;
     let icons;
     let helper;
+    let mockProps;
 
     beforeEach(() => {
-      wrapper = mount(
-        <NumberInput
-          min={0}
-          max={100}
-          id="test"
-          label="Number Input"
-          className="extra-class"
-          invalidText="invalid text"
-          helperText="testHelper"
-          translateWithId={
-            /*
-              Simulates a condition where up/down button's hover over text matches `iconDescription` in `v10`,
-              which is, when the translation for up/down button are not there
-            */
-            () => undefined
-          }
-        />
-      );
+      mockProps = {
+        min: 0,
+        max: 100,
+        id: 'test',
+        label: 'Number Input',
+        ariaLabel: 'Number Input',
+        className: 'extra-class',
+        invalidText: 'invalid text',
+        helperText: 'testHelper',
+        translateWithId:
+          /*
+          Simulates a condition where up/down button's hover over text matches `iconDescription` in `v10`,
+          which is, when the translation for up/down button are not there
+        */
+          () => undefined,
+      };
+
+      wrapper = mount(<NumberInput {...mockProps} />);
 
       const iconTypes = [CaretDownGlyph, CaretUpGlyph];
       label = wrapper.find('label');
@@ -103,6 +104,16 @@ describe('NumberInput', () => {
         );
       });
 
+      it('should apply aria-label based on the label', () => {
+        const getInputRegion = () => wrapper.find('input');
+        expect(getInputRegion().prop('aria-label')).toEqual(null);
+
+        wrapper.setProps({ label: '' });
+        expect(getInputRegion().prop('aria-label')).toEqual(
+          mockProps.ariaLabel
+        );
+      });
+
       it('should set invalidText as expected', () => {
         expect(wrapper.find(`.${prefix}--form-requirement`).length).toEqual(0);
         wrapper.setProps({ invalid: true });

diff --git a/packages/react/src/components/NumberInput/NumberInput.js b/packages/react/src/components/NumberInput/NumberInput.js
@@ -299,7 +299,7 @@ class NumberInput extends Component {
           ? value
           : this.state.value,
       readOnly,
-      'aria-label': ariaLabel,
+      'aria-label': label ? null : ariaLabel,
     };
 
     const buttonProps = {
@@ -396,10 +396,7 @@ class NumberInput extends Component {
                     ref={mergeRefs(ref, this._handleInputRef)}
                   />
                   {invalid && (
-                    <WarningFilled16
-                      className={`${prefix}--number__invalid`}
-                      role="img"
-                    />
+                    <WarningFilled16 className={`${prefix}--number__invalid`} />
                   )}
                   <div className={`${prefix}--number__controls`}>
                     <button