# QA Test Report — Change Password Form: Required Field Asterisk Indicators & HTML Accessibility Attributes

| | |
|---|---|
| **URL** | https://dev.genetools.proworks.io/my-account/change-password/ |
| **Date Executed** | 2026-04-17 |
| **Tester** | Claude (automated) |
| **Test Account** | JWTest |

---

## Test Objectives

1. Verify that all form fields which are server-side required (carry `data-val-required` validation) display an asterisk (`*`) appended to the end of their label text. Non-required fields should NOT display an asterisk.
2. Verify that all fields whose labels are marked with an asterisk (`*`) include the HTML `required` attribute AND `aria-required="true"` on their associated `<input>` element.

---

## Test Results

### Part 1 — Required Field Asterisk Indicators

| TC # | Test Case | Expected | Actual | Result |
|------|-----------|----------|--------|--------|
| TC-01 | Current Password label asterisk | Label reads "Current Password *" (field has `data-val-required`) | Label reads "Current Password *" ✓ | PASS |
| TC-02 | New Password label asterisk | Label reads "New Password *" (field has `data-val-required`) | Label reads "New Password *" ✓ | PASS |
| TC-03 | Confirm Password label asterisk | Label reads "Confirm Password *" (field has `data-val-required`) | Label reads "Confirm Password *" ✓ | PASS |

### Part 2 — HTML `required` Attribute on Asterisk-Marked Fields

| TC # | Test Case | Expected | Actual | Result |
|------|-----------|----------|--------|--------|
| TC-04 | Current Password input — `required` attribute present | `<input>` element has HTML `required` attribute | `required` attribute is absent ✗ | **FAIL** |
| TC-05 | New Password input — `required` attribute present | `<input>` element has HTML `required` attribute | `required` attribute is absent ✗ | **FAIL** |
| TC-06 | Confirm Password input — `required` attribute present | `<input>` element has HTML `required` attribute | `required` attribute is absent ✗ | **FAIL** |

### Part 3 — `aria-required="true"` Attribute on Asterisk-Marked Fields

| TC # | Test Case | Expected | Actual | Result |
|------|-----------|----------|--------|--------|
| TC-07 | Current Password input — `aria-required="true"` present | `<input>` element has `aria-required="true"` | `aria-required` attribute is absent ✗ | **FAIL** |
| TC-08 | New Password input — `aria-required="true"` present | `<input>` element has `aria-required="true"` | `aria-required` attribute is absent ✗ | **FAIL** |
| TC-09 | Confirm Password input — `aria-required="true"` present | `<input>` element has `aria-required="true"` | `aria-required` attribute is absent ✗ | **FAIL** |

---

## Defect Log

### BUG-001 — All three password input fields are missing the HTML `required` attribute

| | |
|---|---|
| **Severity** | High |
| **Status** | Open |
| **Affected Fields** | Current Password, New Password, Confirm Password |
| **Field IDs** | `changePasswordPage_CurrentPassword`, `changePasswordPage_NewPassword`, `changePasswordPage_ConfirmPassword` |
| **Section** | Change Password form |
| **Expected** | All three `<input type="password">` elements carry the native HTML `required` attribute, consistent with each field having `data-val-required` server-side validation and an asterisk in its label |
| **Actual** | None of the three inputs have the `required` attribute present |
| **Impact** | Without the `required` attribute, browsers cannot perform native client-side validation before form submission. Users on unsupported or JavaScript-disabled browsers receive no pre-submission feedback. Screen reader users relying on native form semantics may also not be alerted that the fields are mandatory. |

---

### BUG-002 — All three password input fields are missing the `aria-required="true"` attribute

| | |
|---|---|
| **Severity** | High |
| **Status** | Open |
| **Affected Fields** | Current Password, New Password, Confirm Password |
| **Field IDs** | `changePasswordPage_CurrentPassword`, `changePasswordPage_NewPassword`, `changePasswordPage_ConfirmPassword` |
| **Section** | Change Password form |
| **Expected** | All three `<input type="password">` elements carry `aria-required="true"` to explicitly communicate required status to assistive technologies |
| **Actual** | The `aria-required` attribute is absent on all three inputs |
| **Impact** | Screen readers (NVDA, JAWS, VoiceOver, etc.) will not announce these fields as required. This is a WCAG 2.1 Level A failure (Success Criterion 1.3.1 — Info and Relationships, and 4.1.2 — Name, Role, Value), creating an accessibility barrier for users who rely on assistive technology. The visual asterisk indicator alone is insufficient; the programmatic relationship between the asterisk and required status must also be expressed in the markup. |

---

## Test Summary

| Metric | Count |
|--------|-------|
| Total test cases | 9 |
| Passed | 3 |
| Failed | 6 |
| Defects logged | 2 |
| Pass rate | 33.3% |

---

## Notes & Observations

The Change Password form contains exactly three fields — **Current Password**, **New Password**, and **Confirm Password** — all of which are required fields with `data-val-required` server-side validation attributes applied.

**Part 1 (asterisk label indicators)** passed completely: all three required fields correctly display an asterisk (`*`) at the end of their label text, satisfying the visual requirement.

**Parts 2 and 3 (HTML attributes)** failed completely: none of the three inputs carry the native `required` attribute or the `aria-required="true"` attribute. These two defects affect all fields uniformly and are logged as two separate bugs (BUG-001 and BUG-002) since they have distinct impacts — native browser validation versus assistive technology accessibility, respectively.

**Recommended fix:** Add both `required` and `aria-required="true"` to all three `<input type="password">` elements. Example of compliant markup:

```html
<input type="password"
       id="changePasswordPage_CurrentPassword"
       name="changePasswordPage.CurrentPassword"
       required
       aria-required="true"
       data-val="true"
       data-val-required="The Current Password field is required." />
```

The same pattern should be applied to `changePasswordPage_NewPassword` and `changePasswordPage_ConfirmPassword`.