Aman-Mittal opened a new issue, #483:
URL: https://github.com/apache/fineract-backoffice-ui/issues/483
## What happens
On a fresh load of `/login`, before any interaction at all, the Username and
Password inputs already carry `aria-invalid="true"`. A screen reader announces
both fields as invalid on a form nobody has touched yet.
Measured in a **fresh isolated browser context**, immediately after load,
with no clicks or keystrokes:
```json
{
"tenantId": { "aria-invalid": "false", "value": "default" },
"username": { "aria-invalid": "true", "value": "" },
"password": { "aria-invalid": "true", "value": "" }
}
```
The accessibility tree agrees:
```
textbox "Username" invalid="true"
textbox "Password" invalid="true"
```
## Cause
`src/app/features/login/login.component.ts` binds the attribute straight to
the control's validity, with no check on whether the user has interacted with
it:
```
132: [attr.aria-invalid]="loginForm.get('tenantId')?.invalid"
143: [attr.aria-invalid]="loginForm.get('username')?.invalid"
154: [attr.aria-invalid]="loginForm.get('password')?.invalid"
```
`tenantId` reads `false` only because it ships with a default value of
`default` — it is not validated differently, it simply happens to be non-empty.
That is what confirms the diagnosis: the binding reports "empty required field"
as "invalid", which is true of the model but wrong as a user-facing claim about
a pristine form.
Note there is no visible red styling, so this is purely an
assistive-technology problem: a sighted user sees a normal empty form while a
screen-reader user is told two fields are in an error state.
## Suggested fix
Gate the attribute on the control having been interacted with, and emit
`null` rather than `false` so the attribute is absent instead of explicitly
negative:
```html
[attr.aria-invalid]="
(c.invalid && (c.touched || c.dirty)) ? 'true' : null
"
```
Worth applying to all three fields together, since `tenantId` has the same
binding and would show the same behaviour the moment its default is cleared.
## Environment
Reproduced against a clean checkout of `main` (`a24a06ba`) served with `ng
serve`, Chrome, fresh isolated browsing context.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
