fix(NumberInput): add aria-label on increase and decrease buttons

webex · Mar 18, 2022 · 6c5af2e · 6c5af2e
1 parent 44f118b
commit 6c5af2e
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git a/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot b/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot
@@ -457,6 +457,7 @@ Array [
                   className="wxc-number-input__controls"
                 >
                   <button
+                    aria-label="Increase value"
                     autoFocus={false}
                     className="wxc wxc-button wxc-number-input__increment-button wxc-button--ghost"
                     disabled={false}
@@ -484,6 +485,7 @@ Array [
                   </button>
 
                   <button
+                    aria-label="Decrease value"
                     autoFocus={false}
                     className="wxc wxc-button wxc-number-input__decrement-button wxc-button--ghost"
                     disabled={false}

diff --git a/.../adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Actions.stories.storyshot b/.../adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Actions.stories.storyshot
@@ -646,6 +646,7 @@ Array [
               className="wxc-number-input__controls"
             >
               <button
+                aria-label="Increase value"
                 autoFocus={false}
                 className="wxc wxc-button wxc-number-input__increment-button wxc-button--ghost"
                 disabled={false}
@@ -673,6 +674,7 @@ Array [
               </button>
 
               <button
+                aria-label="Decrease value"
                 autoFocus={false}
                 className="wxc wxc-button wxc-number-input__decrement-button wxc-button--ghost"
                 disabled={false}

diff --git a/...s/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot b/...s/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot
@@ -735,6 +735,7 @@ Array [
               className="wxc-number-input__controls"
             >
               <button
+                aria-label="Increase value"
                 autoFocus={false}
                 className="wxc wxc-button wxc-number-input__increment-button wxc-button--ghost"
                 disabled={false}
@@ -762,6 +763,7 @@ Array [
               </button>
 
               <button
+                aria-label="Decrease value"
                 autoFocus={false}
                 className="wxc wxc-button wxc-number-input__decrement-button wxc-button--ghost"
                 disabled={false}

diff --git a/src/components/inputs/NumberInput/NumberInput.jsx b/src/components/inputs/NumberInput/NumberInput.jsx
@@ -8,6 +8,8 @@ import Icon from '../../generic/Icon/Icon';
 
 const HINTS = {
   clearButton: 'Clear input',
+  increaseButton: 'Increase value',
+  decreaseButton: 'Decrease value',
 };
 
 /**
@@ -59,10 +61,22 @@ export default function NumberInput({
 
   const rightControls = (
     <div className={sc('controls')}>
-      <Button type="ghost" className={sc('increment-button')} onClick={handleIncrement} onMouseDown={(event) => event.stopPropagation()}>
+      <Button
+        ariaLabel={HINTS.increaseButton}
+        className={sc('increment-button')}
+        onClick={handleIncrement}
+        onMouseDown={(event) => event.stopPropagation()}
+        type="ghost"
+      >
         <Icon name="control-up" size={13} />
       </Button>
-      <Button type="ghost" className={sc('decrement-button')} onClick={handleDecrement} onMouseDown={(event) => event.stopPropagation()}>
+      <Button
+        ariaLabel={HINTS.decreaseButton}
+        className={sc('decrement-button')}
+        onClick={handleDecrement}
+        onMouseDown={(event) => event.stopPropagation()}
+        type="ghost"
+      >
         <Icon name="control-down" size={13} />
       </Button>
     </div>