Chroma FormGroup error message tests

← Index page

This test is to determine if the aria-label associated with the error-message component is over-riding the error message contents.

Example 01: FormGroup component with aria-label on message

• Accessible name: "Full name"
• Description: "error message"

<div class="p-form-group" aria-live="polite">
  <label for="aaa">Full name</label>
  <input id="aaa" type="text" aria-invalid="true" aria-describedby="e1">
  <div role="alert" id="e1" aria-label="error message">
    <i aria-label="error Icon" aria-hidden="true"></i>
    <div class="c-message__content">
      <div>
        <p>This is error message 1</p>
      </div>
    </div>
  </div>
</div>

Dummy link after

Example 02: FormGroup component without aria-label on message

• Accessible name: "Full name"
• Description: "This is error message 2"

<div class="p-form-group" aria-live="polite">
  <label for="bbb">Full name</label>
  <input id="bbb" type="text" aria-invalid="true" aria-describedby="e2">
  <div role="alert" id="e2">
    <i aria-label="error Icon" aria-hidden="true"></i>
    <div class="c-message__content">
      <div>
        <p>This is error message 2</p>
      </div>
    </div>
  </div>
</div>

Dummy link after

Results

In the first case, the input references the message container via the aria-describedby, but the accessible name for the message container is being taken from the aria-label rather than the message container content.

In the second case, the input references the message container via the aria-describedby, and the message container content is used as the accessible name.

← Index page