fix: add aria-label for description field

[gosiexon-zen]

Description

The WYSIWYG editor (CKEditor) is likely overriding the label association with its own aria-label="Editor editing area...", which violates WCAG 1.3.1. I tried using aria-labelledby but it was also overridden by Garden's default label ID. So I decided to use aria-label for textarea. I needed to update help-center-wysiwyg AriaAttributesPlugin so it copies ARIA attributes from the original textarea element. Now when you focus on the editor, it will maintain "Description editing area" instead of being overridden with "Editor editing area: main. Press ⌥0 for help."

Screenshots

When not focused:

When focused:

Screen.Recording.2025-11-04.at.16.19.22.mov

[Jira issue] https://zendesk.atlassian.net/browse/GA11YFIX-454

Checklist

• 📗 all commit messages follow the conventional commits standard
• ⬅️ changes are compatible with RTL direction
• ♿ Changes to the UI are tested for accessibility and compliant with WCAG 2.1.
• 📝 changes are tested in Chrome, Firefox, Safari and Edge
• 📱 changes are responsive and tested in mobile
• 👍 PR is approved by @zendesk/vikings

[jgorfine-zendesk]

Hey @gosiexon-zen, thanks for doing this work!

I'm requesting changes because I'm noticing that, as is, we're dropping the instructional text that lets screen reader users know about the keyboard shortcuts menu: Press ⌥0 for help. Since we have no other text on screen that gives these same instructions — or even lets someone know about the shortcuts dialog, in the first place — it's important that we keep this text in.

For context, this is what appears when someone presses ⌥0:

[jgorfine-zendesk]

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/..."

[Fredx87]

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:

• We would need to provide the right keyboard shortcut for each OS. From a quick search, CKEditor is already doing that: https://github.com/ckeditor/ckeditor5/blob/d6107233a8c1762c3285fbf2847a93f2e859c9d7/packages/ckeditor5-utils/src/keyboard.ts#L16-L27
• What if, in a future version, CKEditor changes the shortcut?

[gosiexon-zen]

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.

[SirishaNeduri]

@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.

[jgorfine-zendesk]

Let's make sure screen reader users are still able to access the Press ⌥0 for keyboard shortcuts dialog instruction. (See my other comment about improving the wording a little.) We can do this in 2 steps:

1. Render the instructions inside of a visually-hidden element, which would be provided by the Garden Span component: <Span hidden>{text}</Span>
2. Create an association between the <Textarea> and the <Span> via the aria-describedby attribute.

Here's how this might look, in the code:

import { useId } from '@zendeskgarden/container-utilities';
import { Span } from '@zendeskgarden/react-typography';

const descriptionId = useId();

<StyledField>
  ...
  <Textarea
    ...
    aria-label={ariaLabel}
    aria-describedby={descriptionId}
  />
  {error && <StyledMessage validation="error">{error}</StyledMessage>}
  {ariaDescribedby && <Span id={descriptionId} hidden>{ariaDescribedby}</Span>}
</StyledField>

[gosiexon-zen]

With that change the screen reader will read something like this, so probably we don't want this:

[jgorfine-zendesk]

Hey @gosiexon-zen — I see what you mean: our aria-describedby value is overriding the the hint text ID.

But! This doesn't have to be a problem. The aria-describedby attribute accepts multiple IDs as a value. So, we could do something like this:

<Textarea aria-describedby={`${hintId} ${instructionsId}`}>