C2LC-605: Add aria-label for the LoopIterationsInput's input element

src/CommandBlock.js

@@ -29,6 +29,7 @@ type CommandBlockProps = {
     disabled: boolean,
     loopLabel?: string,
     loopIterations?: ?number,
+    loopIterationsAriaLabel?: ?string,
     stepNumber?: number,
     className?: string,
     runningState?: RunningState,
@@ -65,6 +66,7 @@ export default React.forwardRef<CommandBlockProps, Button>(
             disabled,
             loopLabel,
             loopIterations,
+            loopIterationsAriaLabel,
             stepNumber,
             className,
             runningState,
@@ -83,7 +85,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'
@@ -101,6 +104,7 @@ export default React.forwardRef<CommandBlockProps, Button>(
                             && onChangeLoopIterations != null
                             &&
                         <LoopIterationsInput
+                            loopIterationsAriaLabel={loopIterationsAriaLabel}
                             loopIterationsStr={loopIterations != null ? loopIterations.toString() : ''}
                             loopLabel={loopLabel}
                             stepNumber={stepNumber}

src/LoopIterationsInput.js

@@ -6,6 +6,7 @@ import type { RunningState } from './types';
 import React from 'react';
 
 type LoopIterationsInputProps = {
+    loopIterationsAriaLabel: ?string,
     loopIterationsStr: string,
     loopLabel: string,
     stepNumber: number,
@@ -115,7 +116,7 @@ export default class LoopIterationsInput extends React.Component<LoopIterationsI
     render() {
         return (
             <input
-                // TODO: ARIA label
+                aria-label={this.props.loopIterationsAriaLabel}
                 ref={this.inputRef}
                 className='command-block-loop-iterations'
                 data-command='startLoop'

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,

src/ProgramBlockEditor.js

@@ -401,6 +401,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
@@ -428,6 +435,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}

src/messages.json

@@ -242,6 +242,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",