From 5935d97d7c251c8e072acdae60b1d83054758168 Mon Sep 17 00:00:00 2001
From: Nishthajain7 <jnishtha305@gmail.com>
Date: Sun, 8 Mar 2026 18:09:55 +0530
Subject: [PATCH] fix:Added aria description to EditableInput

---
 client/modules/IDE/components/EditableInput.jsx     | 13 +++++++++----
 .../modules/IDE/components/Header/ProjectName.jsx   |  4 ++--
 .../modules/User/components/CollectionMetadata.jsx  |  2 ++
 translations/locales/en-US/translations.json        |  3 +++
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/client/modules/IDE/components/EditableInput.jsx b/client/modules/IDE/components/EditableInput.jsx
index a323903e2b..9c37165295 100644
--- a/client/modules/IDE/components/EditableInput.jsx
+++ b/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,10 @@ function EditableInput({
   }`;
   const inputRef = React.useRef();
   const { t } = useTranslation();
+  const label =
+    description ??
+    ariaLabel ??
+    t('EditableInput.EditValue', { display: displayValue });
   React.useEffect(() => {
     if (isEditing) {
       const inputElement = inputRef.current;
@@ -78,9 +83,7 @@ function EditableInput({
       <button
         className="editable-input__label"
         onClick={beginEditing}
-        aria-label={
-          ariaLabel ?? t('EditableInput.EditValue', { display: displayValue })
-        }
+        aria-label={label}
         aria-hidden={isEditing}
         disabled={disabled}
       >
@@ -97,7 +100,7 @@ function EditableInput({
         type="text"
         {...inputProps}
         disabled={!isEditing}
-        aria-hidden={!isEditing}
+        aria-label={label}
         onBlur={doneEditing}
         onChange={updateValue}
         onKeyDown={checkForKeyAction}
@@ -115,6 +118,7 @@ EditableInput.defaultProps = {
   validate: () => true,
   value: '',
   disabled: false,
+  description: undefined,
   'aria-label': undefined
 };
 
@@ -127,6 +131,7 @@ EditableInput.propTypes = {
   validate: PropTypes.func,
   value: PropTypes.string,
   disabled: PropTypes.bool,
+  description: PropTypes.string,
   'aria-label': PropTypes.string
 };
 
diff --git a/client/modules/IDE/components/Header/ProjectName.jsx b/client/modules/IDE/components/Header/ProjectName.jsx
index 489a2105ac..a021bc8d08 100644
--- a/client/modules/IDE/components/Header/ProjectName.jsx
+++ b/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}
diff --git a/client/modules/User/components/CollectionMetadata.jsx b/client/modules/User/components/CollectionMetadata.jsx
index b3811eea44..3fe16d303e 100644
--- a/client/modules/User/components/CollectionMetadata.jsx
+++ b/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')}
               />
             ) : (
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index 7529a1d9ff..18d9be0ccc 100644
--- a/translations/locales/en-US/translations.json
+++ b/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",