fix:Added aria description to EditableInput

Author: Nishthajain7

client/modules/IDE/components/EditableInput.jsx

@@ -13,6 +13,7 @@ function EditableInput({
   inputProps,
   onChange,
   disabled,
+  description,
   'aria-label': ariaLabel
 }) {
   const [isEditing, setIsEditing] = React.useState(false);
@@ -26,6 +27,14 @@ function EditableInput({
   }`;
   const inputRef = React.useRef();
   const { t } = useTranslation();
+  const inputLabel =
+    description ??
+    ariaLabel ??
+    t('EditableInput.EditValue', { display: displayValue });
+  const buttonLabel =
+    ariaLabel ??
+    description ??
+    t('EditableInput.EditValue', { display: displayValue });
   React.useEffect(() => {
     if (isEditing) {
       const inputElement = inputRef.current;
@@ -78,9 +87,7 @@ function EditableInput({
       <button
         className="editable-input__label"
         onClick={beginEditing}
-        aria-label={
-          ariaLabel ?? t('EditableInput.EditValue', { display: displayValue })
-        }
+        aria-label={buttonLabel}
         aria-hidden={isEditing}
         disabled={disabled}
       >
@@ -98,6 +105,7 @@ function EditableInput({
         {...inputProps}
         disabled={!isEditing}
         aria-hidden={!isEditing}
+        aria-label={inputLabel}
         onBlur={doneEditing}
         onChange={updateValue}
         onKeyDown={checkForKeyAction}
@@ -115,6 +123,7 @@ EditableInput.defaultProps = {
   validate: () => true,
   value: '',
   disabled: false,
+  description: undefined,
   'aria-label': undefined
 };
 
@@ -127,6 +136,7 @@ EditableInput.propTypes = {
   validate: PropTypes.func,
   value: PropTypes.string,
   disabled: PropTypes.bool,
+  description: PropTypes.string,
   'aria-label': PropTypes.string
 };
 

client/modules/IDE/components/Header/ProjectName.jsx

@@ -16,10 +16,10 @@ export default function ProjectName() {
     <EditableInput
       value={projectName}
       disabled={!canEditProjectName}
+      description={t('Toolbar.NewSketchNameARIA')}
       aria-label={t('Toolbar.EditSketchARIA')}
       inputProps={{
-        maxLength: 128,
-        'aria-label': t('Toolbar.NewSketchNameARIA')
+        maxLength: 128
       }}
       validate={(text) => text.trim().length > 0}
       onChange={changeSketchName}

client/modules/User/components/CollectionMetadata.jsx

@@ -63,6 +63,7 @@ function CollectionMetadata({ collectionId }) {
               <EditableInput
                 value={name}
                 onChange={handleEditCollectionName}
+                aria-label={t('Collection.NameARIA')}
                 validate={(value) => value !== ''}
               />
             ) : (
@@ -76,6 +77,7 @@ function CollectionMetadata({ collectionId }) {
                 InputComponent="textarea"
                 value={description}
                 onChange={handleEditCollectionDescription}
+                aria-label={t('Collection.DescriptionARIA')}
                 emptyPlaceholder={t('Collection.DescriptionPlaceholder')}
               />
             ) : (

translations/locales/en-US/translations.json

@@ -509,6 +509,8 @@
   },
   "Collection": {
     "Title": "p5.js Web Editor | My collections",
+    "NameARIA": "Collection Name",
+    "DescriptionARIA": "Collection Description",
     "AnothersTitle": "p5.js Web Editor | {{anotheruser}}'s collections",
     "Share": "Share",
     "URLLink": "Link to Collection",
@@ -566,6 +568,7 @@
     "HeaderCreatedAt": "Date Created",
     "HeaderCreatedAt_mobile": "Created",
     "HeaderUpdatedAt": "Date Updated",
+    "EditCollectionARIA": "Edit Collection name",
     "HeaderUpdatedAt_mobile": "Updated",
     "HeaderNumItems": "# sketches",
     "HeaderNumItems_mobile": "# sketches",