fix(#2028): add accessibility features

[syedszeeshan]

Before (the change)

After (the change)

-The code adds appropriate aria-* attributes based on whether a field is required, has helper text and/or error text or both.
-When focused, the screen reader announces the helper text and/or error text

Make sure that you've checked the boxes below before you submit the PR

• I have read and followed the setup steps
• I have created necessary unit tests
• I have tested the functionality in both React and Angular.

Steps needed to test

Playground Test Code

import { Component } from "@angular/core";
import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";

@Component({
  selector: "abgov-radio",
  templateUrl: "./radio.component.html",
  styleUrls: ["./radio.component.css"],
})
export class RadioComponent {
  form: FormGroup;
  inputFormCtrl = new FormControl("");
  radioFormCtrl = new FormControl("");
  chkbox = new FormControl();
  txtArea = new FormControl();
  colorDropdown = new FormControl();

  constructor(private fb: FormBuilder) {
    this.form = new FormGroup({
      inputFormCtrl: this.inputFormCtrl,
      radioFormCtrl: this.radioFormCtrl,
      chkbox: this.chkbox,
      txtArea: this.txtArea,
      colorDropdown: this.colorDropdown,
    });
  }

  onSubmit() {
    this.inputFormCtrl.setValidators([Validators.required]);
    this.inputFormCtrl.updateValueAndValidity();

    this.radioFormCtrl.setValidators([Validators.required]);
    this.radioFormCtrl.updateValueAndValidity();

    this.chkbox.setValidators([Validators.required]);
    this.chkbox.updateValueAndValidity();

    this.txtArea.setValidators([Validators.required]);
    this.txtArea.updateValueAndValidity();

    this.colorDropdown.setValidators([Validators.required]);
    this.colorDropdown.updateValueAndValidity();

    this.form.markAllAsTouched();

    if (this.form.valid) {
      console.log("Form is valid");
    }
  }
}

<form [formGroup]="form" style="margin-top: 100px;">
<goa-form-item
        label="Amount"
        requirement="required"
        helptext="Help Text: This is the amount you want to transfer."
        [error]="form.controls['inputFormCtrl'].invalid && form.controls['inputFormCtrl'].touched ? 'Error Message: You must enter an amount.' : null">

  <goa-input
          name="inputFormCtrl"
          goaValue
          width="398px"
          [formControl]="inputFormCtrl"
          [error]="form.controls['inputFormCtrl'].invalid && form.controls['inputFormCtrl'].touched"
  ></goa-input>
</goa-form-item>

<br>

<goa-form-item
    label="Accounts"
    mb="l"
    helptext="Help Text: Select an account"
    [error]="form.controls['radioFormCtrl'].invalid && form.controls['radioFormCtrl'].touched ? 'Error Message: You must select an account.' : null"
>
<goa-radio-group
    goaValue
    formControlName="radioFormCtrl"
    [error]="form.controls['radioFormCtrl'].invalid && form.controls['radioFormCtrl'].touched"
    >
  <goa-radio-item value="1" label="Account 1"></goa-radio-item>
  <goa-radio-item value="2" label="Account 2"></goa-radio-item>
  <goa-radio-item value="3" label="Account 3"></goa-radio-item>
</goa-radio-group>
</goa-form-item>

<br>

<goa-form-item
  label="Desserts"
  mb="l"
  helptext="Help Text: Select a dessert"
  [error]="form.controls['chkbox'].invalid && form.controls['chkbox'].touched ? 'Error Message: You must select the ice cream.' : null">
  <goa-checkbox
    name="desserts"
    text="Ice Cream"
    value="10"
    goaChecked
    [formControl]="chkbox"
    [error]="form.controls['chkbox'].invalid && form.controls['chkbox'].touched"
  >
</goa-checkbox>
</goa-form-item>


<br>
<goa-form-item
  label="Charges"
  [error]="form.controls['txtArea'].invalid && form.controls['txtArea'].touched ? 'Error Message: You must enter some details.' : null"
  helpText="Help Text: Enter the charges">
  <goa-textarea goaValue
      [formControl]="txtArea" width="944px" countby="character" maxcount="500" countby="character"
      [error]="form.controls['txtArea'].invalid && form.controls['txtArea'].touched" />
</goa-form-item>

<br>
<goa-form-item
  requirement="required"
  mt="l"
  label="Colors Dropdown"
  helpText="Help Text: Select a color from the dropdown list"
  [error]="form.controls['colorDropdown'].invalid && form.controls['colorDropdown'].touched ? 'Error Message: You must pick a color.' : null">
<goa-dropdown [formControl]="colorDropdown" goaValue name="item" value="" width="200px"
              [error]="form.controls['colorDropdown'].invalid && form.controls['colorDropdown'].touched">
  <goa-dropdown-item value="red" label="Red"></goa-dropdown-item>
  <goa-dropdown-item value="green" label="Green"></goa-dropdown-item>
  <goa-dropdown-item value="blue" label="Blue"></goa-dropdown-item>
</goa-dropdown>
</goa-form-item>

</form>
<br><br>
<goa-button (_click)="onSubmit()" type="primary">Submit</goa-button>

[lizhuomeng71]

Helper Text and Error Text Was not read out by NVDA and Narrator

The Requirement of this ticket specified that help text and error text should be ready out, however, even aria-describedby="helptext-akr95iq" exist, NVDA and Narrator does not read it out

Code Example as such

<goa-form-item label="Input Label" requirement="required" labelsize="regular" helptext="This is Basic Helper Text" error="This is Basic Error Text">
  <goa-input width="20ch" error="true" name="item" [value]="value" (_change)="onChange($event)"></goa-input>
</goa-form-item>

[syedszeeshan]

2028-NVDA-ScreenReader-RegFlow.mp4

[syedszeeshan]

2028-NVDA-ScreenReader-Validation.mp4

Video is showing that screen reader announces the 'error' as soon as the validation happens.

[syedszeeshan]

2028-NVDA-ScreenReader-onFocus.mp4

As requested, when an input element is focused, the screen reader announces the helper text (note that there is no validation error yet).

NOTE: I have modified the outline to 1px solid red only for the video.... so that when the radiogroup is focused in using tab button, it is visible.

There is announcement when the Radio group is focused as well as when an individual radio item is focused. I can change if this is not the desired behavior.

[syedszeeshan]

2028-NVDA-ScreenReader-onFocus-Validation.mp4

But when there is validation error, and an input element is focused, the screen reader announces the helper text error text.

NOTE: I have modified the outline to 1px solid red only for the video.... so that when the radiogroup is focused in using tab button, it is visible.

There is announcement when the Radio group is focused as well as when an individual radio item is focused. I can change if this is not the desired behavior.

[lizhuomeng71]

But when there is validation error, and an input element is focused, the screen reader announces the helper text error text.

For this case, the NVDA still announces the helper text in the audio (EVEN the print to screen show it announce the error text)

[tzuge]

🎉 This PR is included in version 1.17.0-alpha.121 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 5.0.0-alpha.13 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 3.0.0-alpha.9 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀