No Code Attached Yet a11y J4 Issue bug
avatar unknown-sudo
unknown-sudo
15 Sep 2019

If you call the login page with a screenreader and click into the login field, the screenreader reports that the input is invalid.

This is because the field is required and has not yet received any input. This can be quite tedious for limited people. To avoid this error, it is best to give the required field the value aria-invalid="false" before the first input.

avatar unknown-sudo unknown-sudo - open - 15 Sep 2019
avatar joomla-cms-bot joomla-cms-bot - change - 15 Sep 2019
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 15 Sep 2019
avatar brianteeman
brianteeman - comment - 15 Sep 2019

This is a well known screen reader issue and not specific to joomla

Your suggestion only partially solves it
https://developer.paciellogroup.com/blog/2019/02/required-attribute-requirements/

avatar unknown-sudo
unknown-sudo - comment - 15 Sep 2019

Yes, and it's better than doing nothing about it.

avatar brianteeman
brianteeman - comment - 15 Sep 2019

Sorry but you didnt read that post.

using aria-invalid on its own is not a solution as you still want/need the ability to validate the field

When its time to mark a form control as invalid, the attribute’s value should be set to “true”. Ideally, a control should be set to invalid only after a required control has been focused, and then blurred, without a proper string being entered.

avatar franz-wohlkoenig franz-wohlkoenig - change - 15 Sep 2019
Labels Added: J4 Issue ?
avatar franz-wohlkoenig franz-wohlkoenig - labeled - 15 Sep 2019
avatar franz-wohlkoenig franz-wohlkoenig - labeled - 15 Sep 2019
avatar franz-wohlkoenig franz-wohlkoenig - change - 15 Sep 2019
Title
Joomla 4 Login Page - login field required / aria-invalid
[4.0] Login Page - login field required / aria-invalid
avatar franz-wohlkoenig franz-wohlkoenig - edited - 15 Sep 2019
avatar franz-wohlkoenig franz-wohlkoenig - change - 15 Sep 2019
Status New Discussion
avatar brianteeman
brianteeman - comment - 24 Sep 2019

I have been looking at this again and I can see I was confusing this with another issue

You correctly quoted

This is because the field is required and has not yet received any input. This can be quite tedious for limited people. To avoid this error, it is best to give the required field the value aria-invalid="false" before the first input.

My apologies as I did not appreciate that the aria-invalid was being added and changed by js. Looking at the code in media\system\js\fields\validate.es6.js it looks like the intention of the code is to do exactly what you say BUT it is being triggered before the control has been focussed - hence the bug that you correctly report.

Sorry I don't really understand enough of javascript to resolve it myself but I am sure someone can.

Once again my apologies for getting confused on this issue

avatar Hackwar Hackwar - change - 19 Feb 2023
Labels Added: No Code Attached Yet a11y bug
Removed: ?
avatar Hackwar Hackwar - labeled - 19 Feb 2023

Add a Comment

Login with GitHub to post a comment