From 7c0af72376335ee2241b1d25091da1a507272a85 Mon Sep 17 00:00:00 2001
From: Daniel Cho <chosww@gmail.com>
Date: Tue, 8 Mar 2022 16:38:32 -0500
Subject: [PATCH] C2LC-605: Add aria-label for the LoopIterationsInput's input
 element

---
 src/CommandBlock.js             | 6 +++++-
 src/LoopIterationsInput.js      | 3 ++-
 src/LoopIterationsInput.test.js | 1 +
 src/ProgramBlockEditor.js       | 8 ++++++++
 src/messages.json               | 1 +
 5 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/CommandBlock.js b/src/CommandBlock.js
index 93ecf0f2..26818290 100644
--- a/src/CommandBlock.js
+++ b/src/CommandBlock.js
@@ -25,6 +25,7 @@ type CommandBlockProps = {
     disabled: boolean,
     loopLabel?: string,
     loopIterations?: ?number,
+    loopIterationsAriaLabel?: ?string,
     stepNumber?: number,
     className?: string,
     runningState?: RunningState,
@@ -57,6 +58,7 @@ export default React.forwardRef<CommandBlockProps, Button>(
             disabled,
             loopLabel,
             loopIterations,
+            loopIterationsAriaLabel,
             stepNumber,
             className,
             runningState,
@@ -74,7 +76,8 @@ export default React.forwardRef<CommandBlockProps, Button>(
                     </div>
                     {commandName === 'startLoop' && disabled &&
                         <input
-                            // TODO: ARIA label
+                            aria-disabled={disabled}
+                            aria-label={loopIterationsAriaLabel}
                             className='command-block-loop-iterations'
                             maxLength='2'
                             size='2'
@@ -91,6 +94,7 @@ export default React.forwardRef<CommandBlockProps, Button>(
                             && onChangeLoopIterations != null
                             &&
                         <LoopIterationsInput
+                            loopIterationsAriaLabel={loopIterationsAriaLabel}
                             loopIterationsStr={loopIterations != null ? loopIterations.toString() : ''}
                             loopLabel={loopLabel}
                             stepNumber={stepNumber}
diff --git a/src/LoopIterationsInput.js b/src/LoopIterationsInput.js
index 21c6b5be..51904bf5 100644
--- a/src/LoopIterationsInput.js
+++ b/src/LoopIterationsInput.js
@@ -4,6 +4,7 @@ import type { RunningState } from './types';
 import React from 'react';
 
 type LoopIterationsInputProps = {
+    loopIterationsAriaLabel: ?string,
     loopIterationsStr: string,
     loopLabel: string,
     stepNumber: number,
@@ -66,7 +67,7 @@ export default class LoopIterationsInput extends React.Component<LoopIterationsI
     render() {
         return (
             <input
-                // TODO: ARIA label
+                aria-label={this.props.loopIterationsAriaLabel}
                 className='command-block-loop-iterations'
                 maxLength='2'
                 size='2'
diff --git a/src/LoopIterationsInput.test.js b/src/LoopIterationsInput.test.js
index 867166e2..62c376ab 100644
--- a/src/LoopIterationsInput.test.js
+++ b/src/LoopIterationsInput.test.js
@@ -8,6 +8,7 @@ import LoopIterationsInput from './LoopIterationsInput';
 configure({ adapter: new Adapter() });
 
 const defaultLoopIterationsInputProps = {
+    loopIterationsAriaLabel: 'Number of iterations for loop A',
     loopIterationsStr: '2',
     loopLabel: 'A',
     stepNumber: 2,
diff --git a/src/ProgramBlockEditor.js b/src/ProgramBlockEditor.js
index 19dba8b7..b2cdc0db 100644
--- a/src/ProgramBlockEditor.js
+++ b/src/ProgramBlockEditor.js
@@ -476,6 +476,13 @@ export class ProgramBlockEditor extends React.Component<ProgramBlockEditorProps,
             );
         }
 
+        const loopIterationsAriaLabel = this.props.intl.formatMessage(
+            { id: 'ProgramBlockEditor.loopIterations' },
+            {
+                loopLabel: loopLabel
+            }
+        );
+
         let loopIterations = programBlock.iterations;
 
         // Show loopItertionsLeft when program is not stopped, or else, show iterations
@@ -503,6 +510,7 @@ export class ProgramBlockEditor extends React.Component<ProgramBlockEditorProps,
                 className={classes}
                 loopLabel={programBlock.label}
                 loopIterations={loopIterations}
+                loopIterationsAriaLabel={loopIterationsAriaLabel}
                 stepNumber={programStepNumber}
                 aria-label={ariaLabel}
                 aria-controls={hasActionPanelControl ? 'ActionPanel' : undefined}
diff --git a/src/messages.json b/src/messages.json
index 9abd1291..cf4fd4cc 100644
--- a/src/messages.json
+++ b/src/messages.json
@@ -227,6 +227,7 @@
         "ProgramBlockEditor.lastBlock": "Add selected action {command} to the end of the program",
         "ProgramBlockEditor.blocks.noCommandSelected": "Make sure an action is selected",
         "ProgramBlockEditor.command": "{command}, position {index} of current program",
+        "ProgramBlockEditor.loopIterations": "Number of iterations for loop {loopLabel}",
         "ProgramBlockEditor.nestedCommand": "{command}, position {index} of Loop {parentLoopLabel}",
         "ProgramBlockEditor.program.deleteAll": "Delete all steps of your program",
         "ProgramBlockEditor.programHeading": "Program",