Add ariaLabel to TextField for accessibility (#3387)

* Add ariaLabel to TextField for accessibility

* Refactor label handling in InputDialogItem component

Author: mattlind

packages/roosterjs-react/lib/inputDialog/component/InputDialogItem.tsx

@@ -37,6 +37,7 @@ export function InputDialogItem<Strings extends string, ItemNames extends string
     const { itemName, strings, items, currentValues, onChanged, onEnterKey, rows } = props;
     const { labelKey, unlocalizedLabel, autoFocus } = items[itemName];
     const value = currentValues[itemName];
+    const label = labelKey ? getLocalizedString(strings, labelKey, unlocalizedLabel) : undefined;
     const onValueChange = React.useCallback(
         (_, newValue) => {
             onChanged(itemName, newValue);
@@ -55,11 +56,12 @@ export function InputDialogItem<Strings extends string, ItemNames extends string
 
     return (
         <div>
-            {labelKey ? <div>{getLocalizedString(strings, labelKey, unlocalizedLabel)}</div> : null}
+            {label ? <div>{label}</div> : null}
             <div>
                 <TextField
                     role="textbox"
                     type="text"
+                    ariaLabel={label}
                     className={classNames.inputBox}
                     value={value}
                     onChange={onValueChange}