fix(validation-messages): DLT-3430 fix VoiceOver silent on validation messages

[Paulo Reis (paulojreis-dialpad)]

Obligatory GIF (super important!)

🛠️ Type Of Change

• Fix

📖 Jira Ticket

https://dialpad.atlassian.net/browse/DLT-3430

📖 Description

1. Always-present live region. DtValidationMessages previously used v-if on the outer container, removing it from the DOM when there were no messages. Screen readers register live regions at
   insertion time, so inserting the container and its first message simultaneously caused VoiceOver to miss the mutation. The v-if was moved inward to guard only the message content, keeping the
   outer container always in the DOM.

2. Removed role="status". Adding this role appears to cause Safari/VoiceOver to drop announcements. Root cause is unconfirmed, but removing it resolved the issue.

3. aria-invalid on native controls. DtInput, DtSelectMenu, DtRadio, DtCheckbox, and the <fieldset> in DtInputGroup (inherited by DtRadioGroup/DtCheckboxGroup) now set
   aria-invalid="true" when the validation state is critical. This improves semantics and ensures VoiceOver announces the field as invalid when the user focuses it, even before the messages are read.

4. aria-describedby linking controls to messages. Each control now points to the validation messages container via a stable generated ID, giving screen readers a direct association between the
   field and its error text.

5. Interactive form story. A new Storybook story (InteractiveForm) covers all input types — DtInput, DtSelectMenu, DtRadioGroup, and DtCheckboxGroup — with live validation triggered on
   blur/change, for manual VoiceOver testing.

💡 Context

VoiceOver was silently ignoring validation messages on all form inputs. Two issues combined to cause this:

1. Live region not in the DOM at the right time. DtValidationMessages previously used v-if on the outer container, so the entire element — including the aria-live region — was inserted into the DOM at the same time as the first message. Screen readers register live regions when they first appear in the DOM; inserting the container and its content simultaneously means the reader has no prior awareness of the region and misses the mutation. The fix removes the v-if from the outer container so the aria-live region is always present. Only the inner message content is conditionally rendered, so VoiceOver observes mutations on a stable, pre-registered node.

2. role="status" preventing announcement in Safari/VoiceOver. Adding role="status" to the live-region container appears to cause VoiceOver on Safari to silently drop announcements. The root cause is not fully confirmed, but removing the role resolved the issue.

📝 Checklist

• I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
• I have reviewed my changes.
• I have added all relevant documentation.
• I have considered the performance impact of my change.
• I have added / updated unit tests.
• I have validated components with a screen reader.
• I have validated components keyboard navigation.

🔮 Next Steps

• I have only tested with VoiceOver (on macOS); I believe NVDA and JAWS are more widely used so it would be great if we could test with other screenreaders.
• This PR slightly improves accessibility when filling in a form; we might still need to address form submission

📷 Screenshots / GIFs

Enable audio in the video player. Notice on the "after" videos that 1) validation messages are announced on blur and on focus; and 2) fields are described as "invalid" when relevant

Before

Before.mov

After (Chrome + VO)

Chrome.mov

After (Safari + VO)

Safari.mov

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

Walkthrough

This PR refactors ValidationMessages to render a persistent live-region container with stable ids and updates form controls (Input, InputGroup, SelectMenu, ComboboxMultiSelect, Radio, Checkbox) and tests to bind aria-invalid and aria-describedby using generated messagesId and computed helpers.

Changes

Form Control ARIA Validation Messaging

Layer / File(s)	Summary
ValidationMessages live-region container refactoring packages/dialtone-vue/components/ValidationMessages/ValidationMessages.vue, packages/dialtone-vue/components/ValidationMessages/ValidationMessages.test.js	ValidationMessages now renders a persistent live-region container with aria-live="assertive" and stable :id. The per-message list is moved under <template v-if="showMessages">. Tests assert container presence, aria-live value, element stability across updates, and id binding.
Checkbox and Radio ARIA wiring packages/dialtone-vue/components/Checkbox/Checkbox.vue, packages/dialtone-vue/components/Radio/Radio.vue, packages/dialtone-vue/components/Checkbox/Checkbox.test.js, packages/dialtone-vue/components/CheckboxGroup/CheckboxGroup.test.js, packages/dialtone-vue/components/Radio/Radio.test.js	Checkbox and Radio add messagesId and computed ariaInvalid/ariaDescribedBy, bind aria-invalid and aria-describedby on their native <input> elements, and separate description rendering from validation messaging. Tests verify message element counts, preserve the description/messages container when empty, and include ARIA assertions.
SelectMenu and ComboboxMultiSelect ARIA wiring packages/dialtone-vue/components/SelectMenu/SelectMenu.vue, packages/dialtone-vue/components/ComboboxMultiSelect/ComboboxMultiSelect.vue, packages/dialtone-vue/components/SelectMenu/SelectMenu.test.js, packages/dialtone-vue/components/CheckboxGroup/CheckboxGroup.test.js	SelectMenu binds aria-invalid and aria-describedby to <select> using computed helpers and messagesId. ComboboxMultiSelect assigns an explicit id to dt-validation-messages. Tests assert zero validation-message elements when hidden and check ARIA attributes when shown.
Input component ARIA and message wiring packages/dialtone-vue/components/Input/Input.vue, packages/dialtone-vue/components/Input/Input.test.js	<textarea> and <input> bind aria-invalid and aria-describedby from computed helpers. Adds messagesId and ariaInvalid/ariaDescribedBy computed props. Reorders dt-validation-messages prop spread. Tests add Accessibility suite asserting ARIA wiring.
InputGroup fieldset ARIA and validation packages/dialtone-vue/components/InputGroup/InputGroup.vue, packages/dialtone-vue/components/InputGroup/InputGroup.test.js	<fieldset> binds aria-invalid and aria-describedby using computed helpers. Component adds unique messagesId and computes ariaInvalid (true when critical) and ariaDescribedBy (points to messagesId when messages shown). Tests locate ValidationMessages component directly and assert ARIA attributes.
ValidationMessages interactive form story packages/dialtone-vue/components/ValidationMessages/ValidationMessages.stories.js	New InteractiveForm Storybook story demonstrating multi-field validation with synchronous validators, an async username availability check (with loading), and a clearAll action that resets state and cancels pending timers.

Sequence Diagram

sequenceDiagram
  participant FormInput as Form Input (Checkbox/Radio/Select/Input)
  participant Component as Component Instance
  participant ValidationMessages as ValidationMessages Container
  participant Assistive as Assistive Technology

  FormInput->>Component: component computes validation state
  Component->>FormInput: bind aria-invalid (if critical)
  Component->>FormInput: bind aria-describedby to messagesId (if shown)
  Component->>ValidationMessages: pass id=messagesId
  ValidationMessages->>ValidationMessages: render with aria-live=assertive
  ValidationMessages->>Assistive: announce message updates
  FormInput->>Assistive: assistive reads aria-invalid and referenced messages

Loading

Possibly Related PRs

• dialpad/dialtone#1274: Adds info validation type to VALIDATION_MESSAGE_TYPES / getValidationState, which affects ARIA aria-invalid computation.

Suggested Labels

no-visual-test

Suggested Reviewers

• francisrupert
• iropolo

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch DLT-3430-fix-validation-messages-accessible-announcement

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[wiz-inc-55b470eb7e]

Wiz Scan Summary

Scanner	Findings
Vulnerabilities	-
Sensitive Data	-
Secrets	-
IaC Misconfigurations	-
SAST Findings	-
Software Management Findings	-
Total	-

View scan details in Wiz

To detect these findings earlier in the dev lifecycle, try using Wiz Code VS Code Extension.

[github-actions]

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

[Francis Rupert (francisrupert)]

I know you're still in draft mode, but here's a quick reaction...

[Francis Rupert (francisrupert)]

Nesting structure changed. Was there a reason for that?

Screen.Recording.2026-05-19.at.10.14.25.AM.mov

[Paulo Reis (paulojreis-dialpad)]

Good catch, I missed the visual implications of that change. 🤦

The reasoning was to avoid the "anti-pattern" of adding/removing the ARIA live region from the DOM too frequently/too close to rendering the validation messages. This is risky because screenreaders might not pick up the live region in time to watch for changes (and announce them). The nesting change makes sure the messages aren't conditionally-rendered based on the parent's v-if="$slots.description || description".

That being said, I think we can keep the existing structure and move the v-if instead: 48226a8

This seems to fix the alignment regression:

However, it leaves an ever-present <div> (which often will be empty) in the DOM as a container for descriptions and validation messages:

Notice the empty .d-checkbox__messages. I think this is a bit of a code smell, but also necessary for the ARIA live region to work. WDYT?

[coderabbitai]

Actionable comments posted: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (4)

packages/dialtone-vue/components/ValidationMessages/ValidationMessages.test.js (1)

67-77: 🧹 Nitpick | 🔵 Trivial | ⚡ Quick win

Consider verifying container presence when showMessages=false.

The existing test checks that messages aren't visible, but doesn't verify the live-region container remains mounted. Per coding guidelines, accessibility tests should assert observable ARIA behavior. Adding a container presence check would confirm the stable live-region pattern holds when messages are hidden.

✨ Suggested enhancement

 describe('When validation messages are hidden', () => {
   describe('When the radio group renders', () => {
-    it('should not have any visible validation messages', () => {
+    it('should not have any visible validation messages', () => {
       mockProps = { validationMessages: MOCK_VALIDATION_MESSAGES, showMessages: false };
 
       updateWrapper();
 
       expect(messages.length).toBe(0);
     });
+
+    it('should keep the live-region container mounted', () => {
+      mockProps = { validationMessages: MOCK_VALIDATION_MESSAGES, showMessages: false };
+
+      updateWrapper();
+
+      expect(wrapper.find('[data-qa="validation-messages-container"]').exists()).toBe(true);
+    });
   });
 });

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@packages/dialtone-vue/components/ValidationMessages/ValidationMessages.test.js`
around lines 67 - 77, The test currently asserts no visible messages when
mockProps = { validationMessages: MOCK_VALIDATION_MESSAGES, showMessages: false
} but doesn't confirm the live-region container still exists; update the test
around the describe block using the same setup (mockProps, updateWrapper,
messages) to also query for the container element (the component's live-region
node — e.g., the element selected by messagesContainer or
wrapper.find('[aria-live]') in this file) and assert it is mounted/present even
when showMessages is false, ensuring the ARIA live-region remains in the DOM
while messages length stays 0.

packages/dialtone-vue/components/InputGroup/InputGroup.vue (1)

25-31: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Protect the generated messages id from child-prop override.

With current binding order, messagesChildProps.id can override messagesId, breaking the fieldset aria-describedby reference. Reorder to place :id after v-bind to ensure messagesId takes precedence—Input.vue already uses this safer pattern.

Suggested fix

 <dt-validation-messages
+  v-bind="messagesChildProps"
+  :id="messagesId"
   :validation-messages="formattedMessages"
   :show-messages="showMessages"
   :class="messagesClass"
   :data-qa="dataQaGroupMessages"
-  v-bind="messagesChildProps"
 />

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/dialtone-vue/components/InputGroup/InputGroup.vue` around lines 25 -
31, Child-prop binding currently allows messagesChildProps.id to override the
generated messagesId, breaking aria-describedby; in InputGroup.vue update the
binding order on the messages element so that v-bind="messagesChildProps" comes
before the explicit :id="messagesId" (keep other props like
:validation-messages="formattedMessages", :show-messages="showMessages",
:class="messagesClass", :data-qa="dataQaGroupMessages" as-is) so messagesId
always takes precedence and cannot be overridden by messagesChildProps.

packages/dialtone-vue/components/SelectMenu/SelectMenu.vue (1)

79-85: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Preserve stable id/aria-describedby coupling.

In Vue 3, attribute binding order matters—the last binding wins. Currently, v-bind="messagesChildProps" comes after :id="messagesId", so if messagesChildProps contains an id property, it will override the intended messagesId and break the aria-describedby reference on the select element. Input.vue already uses the correct order: v-bind before :id.

Suggested fix

 <dt-validation-messages
+  v-bind="messagesChildProps"
   :id="messagesId"
   :validation-messages="formattedMessages"
   :show-messages="showMessages"
   :class="messagesClass"
-  v-bind="messagesChildProps"
   data-qa="dt-select-messages"
 />

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/dialtone-vue/components/SelectMenu/SelectMenu.vue` around lines 79 -
85, The id for the validation messages can be overridden because
v-bind="messagesChildProps" is currently placed after the explicit
:id="messagesId"; move v-bind="messagesChildProps" so it comes before the
explicit attribute bindings (e.g., place v-bind="messagesChildProps" before
:id="messagesId", :validation-messages="formattedMessages",
:show-messages="showMessages", etc.) on the dt-validation-messages component to
ensure messagesId always takes precedence for stable id/aria-describedby
coupling; update the SelectMenu.vue instance of dt-validation-messages (ref:
messagesChildProps, messagesId, dt-validation-messages) accordingly.

packages/dialtone-vue/components/InputGroup/InputGroup.test.js (1)

47-155: ⚠️ Potential issue | 🟠 Major | 🏗️ Heavy lift

Add Accessibility tests for aria-invalid and aria-describedby on the fieldset.

The InputGroup component implements aria-invalid and aria-describedby bindings on the fieldset, but the test suite does not verify these behaviors. Per coding guidelines, tests must include an Accessibility section asserting observable ARIA attributes.

Add tests to cover:

• aria-invalid="true" when validation state is critical
• aria-describedby linking fieldset to messages container
• Stable messagesId generation

Suggested test addition

describe('Accessibility Tests', () => {
  describe('When validation messages are provided', () => {
    beforeEach(() => {
      mockProps = { messages: ['Error'] };
      updateWrapper();
    });

    it('should set aria-invalid="true" on the fieldset', () => {
      expect(inputGroup.attributes('aria-invalid')).toBe('true');
    });

    it('should link fieldset to messages container via aria-describedby', () => {
      const messagesId = inputGroupMessages.attributes('id');
      expect(inputGroup.attributes('aria-describedby')).toBe(messagesId);
    });

    it('should generate stable messagesId', () => {
      const firstId = inputGroupMessages.attributes('id');
      updateWrapper();
      const secondId = inputGroupMessages.attributes('id');
      expect(firstId).toBe(secondId);
    });
  });

  describe('When no validation messages are provided', () => {
    it('should not set aria-invalid on the fieldset', () => {
      expect(inputGroup.attributes('aria-invalid')).toBeUndefined();
    });
  });
});

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/dialtone-vue/components/InputGroup/InputGroup.test.js` around lines
47 - 155, Add an "Accessibility Tests" block to InputGroup.test.js that, using
the existing helpers (mockProps, updateWrapper, wrapper, inputGroup,
inputGroupMessages), verifies the fieldset aria attributes: assert
aria-invalid="true" when mockProps.messages includes an error, assert
inputGroup.attributes('aria-describedby') equals
inputGroupMessages.attributes('id'), and assert the messages id is stable across
re-renders by calling updateWrapper() and comparing the two ids; also add a case
where no messages are provided to assert aria-invalid is undefined.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/dialtone-vue/components/Checkbox/Checkbox.vue`:
- Around line 58-64: The dt-validation-messages element binds consumer props
after setting :id which allows messagesChildProps to override messagesId; move
v-bind="messagesChildProps" before :id="messagesId" so the component-controlled
messagesId (used for aria-describedby) cannot be overridden by consumer
props—update the dt-validation-messages usage (the element using props
messagesId, formattedMessages, showMessages, messagesClass, messagesChildProps)
to bind messagesChildProps first, then set :id and the remaining explicit props.

In `@packages/dialtone-vue/components/Radio/Radio.vue`:
- Around line 57-63: The dt-validation-messages component's :id binding is
currently before v-bind="messagesChildProps" which allows an id inside
messagesChildProps to override messagesId; update the attribute order in
Radio.vue so that v-bind="messagesChildProps" comes first and then
:id="messagesId" (match the pattern used in Input.vue), and apply the same
change in Checkbox.vue if present so the aria-describedby id cannot be
overridden by messagesChildProps.

In `@packages/dialtone-vue/components/SelectMenu/SelectMenu.test.js`:
- Around line 94-95: Update the test around the messages assertion to also
verify ARIA wiring on the dt-select: when validation messages are shown assert
that the dt-select element has aria-invalid="true" and that its aria-describedby
contains the id(s) of the rendered validation message elements (query the
rendered messages by [data-qa="validation-message"] to get their id attributes);
when messages are hidden assert aria-invalid is "false" or absent and
aria-describedby does not reference the validation message ids. Apply the same
pattern to the other case mentioned (lines 292-293) so every validation-related
test includes these ARIA assertions for dt-select.

---

Outside diff comments:
In `@packages/dialtone-vue/components/InputGroup/InputGroup.test.js`:
- Around line 47-155: Add an "Accessibility Tests" block to InputGroup.test.js
that, using the existing helpers (mockProps, updateWrapper, wrapper, inputGroup,
inputGroupMessages), verifies the fieldset aria attributes: assert
aria-invalid="true" when mockProps.messages includes an error, assert
inputGroup.attributes('aria-describedby') equals
inputGroupMessages.attributes('id'), and assert the messages id is stable across
re-renders by calling updateWrapper() and comparing the two ids; also add a case
where no messages are provided to assert aria-invalid is undefined.

In `@packages/dialtone-vue/components/InputGroup/InputGroup.vue`:
- Around line 25-31: Child-prop binding currently allows messagesChildProps.id
to override the generated messagesId, breaking aria-describedby; in
InputGroup.vue update the binding order on the messages element so that
v-bind="messagesChildProps" comes before the explicit :id="messagesId" (keep
other props like :validation-messages="formattedMessages",
:show-messages="showMessages", :class="messagesClass",
:data-qa="dataQaGroupMessages" as-is) so messagesId always takes precedence and
cannot be overridden by messagesChildProps.

In `@packages/dialtone-vue/components/SelectMenu/SelectMenu.vue`:
- Around line 79-85: The id for the validation messages can be overridden
because v-bind="messagesChildProps" is currently placed after the explicit
:id="messagesId"; move v-bind="messagesChildProps" so it comes before the
explicit attribute bindings (e.g., place v-bind="messagesChildProps" before
:id="messagesId", :validation-messages="formattedMessages",
:show-messages="showMessages", etc.) on the dt-validation-messages component to
ensure messagesId always takes precedence for stable id/aria-describedby
coupling; update the SelectMenu.vue instance of dt-validation-messages (ref:
messagesChildProps, messagesId, dt-validation-messages) accordingly.

In
`@packages/dialtone-vue/components/ValidationMessages/ValidationMessages.test.js`:
- Around line 67-77: The test currently asserts no visible messages when
mockProps = { validationMessages: MOCK_VALIDATION_MESSAGES, showMessages: false
} but doesn't confirm the live-region container still exists; update the test
around the describe block using the same setup (mockProps, updateWrapper,
messages) to also query for the container element (the component's live-region
node — e.g., the element selected by messagesContainer or
wrapper.find('[aria-live]') in this file) and assert it is mounted/present even
when showMessages is false, ensuring the ARIA live-region remains in the DOM
while messages length stays 0.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: dfddc2d8-2a54-473f-943d-5b2cfd97bd10

📥 Commits

Reviewing files that changed from the base of the PR and between daace31 and ba0df68.

📒 Files selected for processing (12)

• packages/dialtone-vue/components/Checkbox/Checkbox.vue
• packages/dialtone-vue/components/CheckboxGroup/CheckboxGroup.test.js
• packages/dialtone-vue/components/ComboboxMultiSelect/ComboboxMultiSelect.vue
• packages/dialtone-vue/components/Input/Input.vue
• packages/dialtone-vue/components/InputGroup/InputGroup.test.js
• packages/dialtone-vue/components/InputGroup/InputGroup.vue
• packages/dialtone-vue/components/Radio/Radio.vue
• packages/dialtone-vue/components/SelectMenu/SelectMenu.test.js
• packages/dialtone-vue/components/SelectMenu/SelectMenu.vue
• packages/dialtone-vue/components/ValidationMessages/ValidationMessages.stories.js
• packages/dialtone-vue/components/ValidationMessages/ValidationMessages.test.js
• packages/dialtone-vue/components/ValidationMessages/ValidationMessages.vue

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: ba0df6802c

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "Codex (@codex) review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "Codex (@codex) address that feedback".

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/dialtone-vue/components/Checkbox/Checkbox.test.js`:
- Around line 206-208: The test currently checks
descriptionMessagesContainer.exists() but lacks ARIA assertions; update the test
to read the container's id (use descriptionMessagesContainer.attributes('id') or
ensure it has an id) and assert the checkbox input's aria-describedby equals
that id (use checkboxInput.attributes('aria-describedby')), and also assert
aria-invalid behavior by toggling the invalid state or using the rendered
input's attributes to expect aria-invalid === "true" when appropriate; reference
the existing descriptionMessagesContainer and the checkbox input wrapper (e.g.,
checkboxInput) to locate where to add these assertions.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: e3646c11-8996-4996-939c-dd8a4a7fac02

📥 Commits

Reviewing files that changed from the base of the PR and between ba0df68 and 48226a8.

📒 Files selected for processing (3)

• packages/dialtone-vue/components/Checkbox/Checkbox.test.js
• packages/dialtone-vue/components/Checkbox/Checkbox.vue
• packages/dialtone-vue/components/Radio/Radio.vue

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/dialtone-vue/components/Input/Input.test.js`:
- Around line 832-863: The Accessibility ARIA tests only assert the input path;
add the same assertions for the textarea path by invoking updateWrapper with
mockProps including type: 'textarea' and the same messages (USE
VALIDATION_MESSAGE_TYPES.CRITICAL), then locate the rendered textarea (parallel
to nativeInput) and assert aria-invalid === 'true' and aria-describedby matches
the messages container when messages are present, and assert both attributes are
undefined when no messages are provided; extend the existing describe blocks to
duplicate the two cases using type: 'textarea' and reuse the same selectors
(data-qa="dt-input-messages") and helper functions (updateWrapper, mockProps) so
DtInput's textarea ARIA wiring is covered.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: 4973b769-2f6b-4b8b-9b2d-bab495f89cbc

📥 Commits

Reviewing files that changed from the base of the PR and between a8e29b4 and 2ce46d8.

📒 Files selected for processing (10)

• packages/dialtone-vue/components/Checkbox/Checkbox.test.js
• packages/dialtone-vue/components/Checkbox/Checkbox.vue
• packages/dialtone-vue/components/Input/Input.test.js
• packages/dialtone-vue/components/InputGroup/InputGroup.test.js
• packages/dialtone-vue/components/InputGroup/InputGroup.vue
• packages/dialtone-vue/components/Radio/Radio.test.js
• packages/dialtone-vue/components/Radio/Radio.vue
• packages/dialtone-vue/components/SelectMenu/SelectMenu.test.js
• packages/dialtone-vue/components/SelectMenu/SelectMenu.vue
• packages/dialtone-vue/components/ValidationMessages/ValidationMessages.test.js

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/dialtone-vue/components/ValidationMessages/ValidationMessages.test.js (1)

68-68: 🧹 Nitpick | 🔵 Trivial | ⚡ Quick win

Fix misleading describe block description.

The parent describe block says "When the radio group renders" but this file tests DtValidationMessages, not a radio group component. This appears to be a copy-paste error from another test file.

📝 Suggested fix

-      describe('When the radio group renders', () => {
+      describe('When the component renders', () => {
         it('should not have any visible validation messages', () => {

Note: The same issue exists in other describe blocks (lines 51, 98, 125) but those are outside the scope of this PR.

Also applies to: 77-83

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@packages/dialtone-vue/components/ValidationMessages/ValidationMessages.test.js`
at line 68, The describe block text is misleading — it mentions "When the radio
group renders" but the tests are for DtValidationMessages; update the describe
strings (e.g., the block starting at the line with "When the radio group
renders") to correctly reference DtValidationMessages (or a neutral phrase like
"When DtValidationMessages renders") so the test descriptions accurately reflect
the component under test; also scan nearby describe blocks (other occurrences
noted) and fix their titles similarly to match DtValidationMessages.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/dialtone-vue/components/Input/Input.test.js`:
- Around line 872-896: Tests are querying the textarea via tag selectors
(wrapper.find('textarea')) which is brittle; update the four assertions that use
wrapper.find('textarea') (in the textarea validation test blocks) to use a
stable data-qa selector instead (e.g.
wrapper.find('[data-qa="dt-input-textarea"]') or whatever textarea data-qa the
component exposes), or add such a data-qa to the Input component if missing, and
then assert aria-invalid and aria-describedby against that data-qa target; keep
the existing messages container lookup via '[data-qa="dt-input-messages"]'
unchanged.

---

Outside diff comments:
In
`@packages/dialtone-vue/components/ValidationMessages/ValidationMessages.test.js`:
- Line 68: The describe block text is misleading — it mentions "When the radio
group renders" but the tests are for DtValidationMessages; update the describe
strings (e.g., the block starting at the line with "When the radio group
renders") to correctly reference DtValidationMessages (or a neutral phrase like
"When DtValidationMessages renders") so the test descriptions accurately reflect
the component under test; also scan nearby describe blocks (other occurrences
noted) and fix their titles similarly to match DtValidationMessages.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: b82253f2-cdeb-4aa1-a936-bad394e15d65

📥 Commits

Reviewing files that changed from the base of the PR and between 2ce46d8 and 9ad5e37.

📒 Files selected for processing (10)

• packages/dialtone-vue/components/Checkbox/Checkbox.test.js
• packages/dialtone-vue/components/Checkbox/Checkbox.vue
• packages/dialtone-vue/components/Input/Input.test.js
• packages/dialtone-vue/components/InputGroup/InputGroup.test.js
• packages/dialtone-vue/components/InputGroup/InputGroup.vue
• packages/dialtone-vue/components/Radio/Radio.test.js
• packages/dialtone-vue/components/Radio/Radio.vue
• packages/dialtone-vue/components/SelectMenu/SelectMenu.test.js
• packages/dialtone-vue/components/SelectMenu/SelectMenu.vue
• packages/dialtone-vue/components/ValidationMessages/ValidationMessages.test.js

[github-actions]

✔️ Deploy previews ready!
😎 Dialtone documentation preview: https://dialtone.dialpad.com/deploy-previews/pr-1285/
😎 Dialtone-vue preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-1285/

[Francis Rupert (francisrupert)]

Without directly hitting the approve button, I do approve from design perspective. Defer to Dialtone Engineer for official approval.

[Belu Montoya (belumontoya)]

no a11y expert here but i dont see anything worth noticing, just a couple of questions that are no blockers

1. aria-live="assertive" — Did you test polite with the always-present container? The stable-node fix and the politeness change are independent. If polite was tested in that combination and still failed → settled. If not → quick re-test would let you stay closer to the WCAG polite recommendation for form validation.
2. ComboboxMultiSelect inconsistency — It only gets :id on ; the input doesn't receive aria-invalid / aria-describedby like the other components. Intentional, or a follow-up?

[Paulo Reis (paulojreis-dialpad)]

Thanks for checking Belu Montoya (@belumontoya)

1. aria-live="assertive" — Did you test polite with the always-present container? The stable-node fix and the politeness change are independent. If polite was tested in that combination and still failed → settled. If not → quick re-test would let you stay closer to the WCAG polite recommendation for form validation.

I did test this, and unfortunately polite messages are sometimes (though not always) dropped by Safari.

2. ComboboxMultiSelect inconsistency — It only gets :id on ; the input doesn't receive aria-invalid / aria-describedby like the other components. Intentional, or a follow-up?

Good catch — addressed in 9b607a5

[Belu Montoya (belumontoya)]

Paulo Reis (@paulojreis-dialpad) seen ok to me, merge away

[Paulo Reis (paulojreis-dialpad)]

Thanks Belu Montoya (@belumontoya) , I'm very happy to click merge!