Skip to content

fix: add aria-label for description field #691

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

Closed
wants to merge 1 commit into from
Closed

fix: add aria-label for description field #691

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
6 changes: 3 additions & 3 deletions assets/ticket-fields-bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions src/modules/new-request-form/translations/en-us.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,3 +292,13 @@ parts:
title: "[A11Y] Aria label value for the close modal button"
value: "Close modal"
screenshot: "https://drive.google.com/file/d/11qwmad1gcWHjtJ6LhyRxk1d9BlREjxwr/view?usp=sharing"
- translation:
key: "new-request-form.description.aria_label"
title: "[A11Y] Aria label value for the description field"
value: "Description editing area"
screenshot: "https://drive.google.com/file/d/1wDm8jmFjlUTkJlPq_OfHeJRCTanf5BOi/view?usp=drive_link"
Comment on lines +295 to +299
Copy link
Contributor

@jgorfine-zendesk jgorfine-zendesk Nov 5, 2025

Choose a reason for hiding this comment

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

It would be great if we could also translate the instructions for viewing CKEditor's "Accessibility help" dialog. Though, I think we can do better than just Press ⌥0 for help, which says nothing about what kind of help we're offering. Why don't we say, instead, Press ⌥0 for keyboard shortcuts dialog?

I'm wondering if we'd also need to do some localization. Doing some quick Googling, it sounds like the Option key is similar to the AltGr key on some European keyboards. Does pressing AltGr + 0 achieve the same result as pressing Option + 0? If so, we might want to consider having the description text say that. 🤔 Let's check in with @olivia-tsao & co., on that.

Suggested change
- translation:
key: "new-request-form.description.aria_label"
title: "[A11Y] Aria label value for the description field"
value: "Description editing area"
screenshot: "https://drive.google.com/file/d/1wDm8jmFjlUTkJlPq_OfHeJRCTanf5BOi/view?usp=drive_link"
- translation:
key: "new-request-form.description.aria_label"
title: "[A11Y] Aria label value for the description field"
value: "Description editing area"
screenshot: "https://drive.google.com/file/d/1wDm8jmFjlUTkJlPq_OfHeJRCTanf5BOi/view?usp=drive_link"
- translation:
key: "new-request-form.description.aria_describedby"
title: "[A11Y] Aria-describedby value for the description field."
value: "Press ⌥0 for keyboard shortcuts dialog"
screenshot: "https://drive.google.com/file/d/..."

Copy link
Contributor

@Fredx87 Fredx87 Nov 6, 2025

Choose a reason for hiding this comment

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

In my opinion, it would be better if we could avoid overriding the default messages from CKEditor, and just add the "Description" label to what is already there.

I agree we could have a better message than "Press ⌥0 for help", on the other hand:

Copy link
Contributor Author

@gosiexon-zen gosiexon-zen Nov 6, 2025

Choose a reason for hiding this comment

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

So if we don't want any override we don't have to do anything in Copenhagen Theme. Wysiwyg will now read label we already have here.

Copy link

@SirishaNeduri SirishaNeduri Nov 6, 2025

Choose a reason for hiding this comment

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

@gosiexon-zen Agree that shortcuts can be different for some langs depending on the keys used/ available in the language. In such cases, extracting the keys and asking translators to change according to the language can be helpful.

- translation:
key: "new-request-form.description.aria_describedby"
title: "[A11Y] Aria-describedby value for the description field"
value: "Press ⌥0 for keyboard shortcuts dialog"
screenshot: "https://drive.google.com/file/d/1wDm8jmFjlUTkJlPq_OfHeJRCTanf5BOi/view?usp=drive_link"
19 changes: 19 additions & 0 deletions src/modules/ticket-fields/fields/textarea/TextArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { Span } from "@zendeskgarden/react-typography";
import { useWysiwyg } from "./useWysiwyg";
import styled from "styled-components";
import type { TicketFieldObject } from "../../data-types/TicketFieldObject";
import { useTranslation } from "react-i18next";
import { useId } from "@zendeskgarden/container-utilities";

interface TextAreaProps {
field: TicketFieldObject;
Expand Down Expand Up @@ -49,6 +51,16 @@ export function TextArea({
userRole,
brandId,
});
const { t } = useTranslation();
const ariaLabel = t(
"new-request-form.description.aria-label",
"Description editing area"
);
const ariaDescribedby = t(
"new-request-form.description.aria_describedby",
"Press ⌥0 for keyboard shortcuts dialog"
);
const descriptionId = useId();

return (
<StyledField>
Expand All @@ -68,8 +80,15 @@ export function TextArea({
onChange={(e) => onChange(e.target.value)}
rows={6}
isResizable
aria-label={ariaLabel}
aria-describedby={descriptionId}
/>
{error && <StyledMessage validation="error">{error}</StyledMessage>}
{ariaDescribedby && (
<Span id={descriptionId} hidden>
{ariaDescribedby}
</Span>
)}
</StyledField>
);
}
2 changes: 1 addition & 1 deletion src/modules/ticket-fields/fields/textarea/useWysiwyg.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,6 @@ export function useWysiwyg({
);
}
},
[hasWysiwyg, baseLocale, hasAtMentions, userRole, brandId]
[hasWysiwyg, hasAtMentions, userRole, brandId, baseLocale]
);
}
Loading