Skip to content

fix:Added aria description to EditableInput #3982

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Nishthajain7 wants to merge 1 commit into
base: develop
Choose a base branch
from
+16 −6
Open

fix:Added aria description to EditableInput #3982

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions client/modules/IDE/components/EditableInput.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ function EditableInput({
inputProps,
onChange,
disabled,
description,
'aria-label': ariaLabel
}) {
const [isEditing, setIsEditing] = React.useState(false);
Expand All @@ -26,6 +27,10 @@ function EditableInput({
}`;
const inputRef = React.useRef();
const { t } = useTranslation();
const label =
Copy link
Contributor

@yugalkaushik yugalkaushik Mar 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Nishthajain7 Thanks for the PR. The changes look good overall and the refactoring around EditableInput makes the accessibility handling cleaner. One thing I am not completely sure about is the priority order in the label computation, can you search about it more.

description ??
ariaLabel ??
t('EditableInput.EditValue', { display: displayValue });
React.useEffect(() => {
if (isEditing) {
const inputElement = inputRef.current;
Expand Down Expand Up @@ -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}
>
Expand All @@ -97,7 +100,7 @@ function EditableInput({
type="text"
{...inputProps}
disabled={!isEditing}
aria-hidden={!isEditing}
aria-label={label}
onBlur={doneEditing}
onChange={updateValue}
onKeyDown={checkForKeyAction}
Expand All @@ -115,6 +118,7 @@ EditableInput.defaultProps = {
validate: () => true,
value: '',
disabled: false,
description: undefined,
'aria-label': undefined
};

Expand All @@ -127,6 +131,7 @@ EditableInput.propTypes = {
validate: PropTypes.func,
value: PropTypes.string,
disabled: PropTypes.bool,
description: PropTypes.string,
'aria-label': PropTypes.string
};

Expand Down
4 changes: 2 additions & 2 deletions client/modules/IDE/components/Header/ProjectName.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 2 additions & 0 deletions client/modules/User/components/CollectionMetadata.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ function CollectionMetadata({ collectionId }) {
<EditableInput
value={name}
onChange={handleEditCollectionName}
aria-label={t('Collection.NameARIA')}
validate={(value) => value !== ''}
/>
) : (
Expand All @@ -76,6 +77,7 @@ function CollectionMetadata({ collectionId }) {
InputComponent="textarea"
value={description}
onChange={handleEditCollectionDescription}
aria-label={t('Collection.DescriptionARIA')}
emptyPlaceholder={t('Collection.DescriptionPlaceholder')}
/>
) : (
Expand Down
3 changes: 3 additions & 0 deletions translations/locales/en-US/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down