Fix the accessibility issue in the login page: Labels or instructions not provided when content requires user input

[oussama-taoufiq]

Page / Screen Title Defect Dojo login Page URL / Screen ID https://demo.defectdojo.org Error Title Labels or instructions not provided when content requires user input Error Severity Serious Status Fail Accessibility Issue [Description of issue] The required fields such as "Username" and "Password" are mandatory in order to login. The only visual indicator that a user assume that its required, are the "*".

[Impact on users] User might not know that the fields are required.

[Pattern] On the login page, the 2 label for the input field.

[Steps to reproduce] Please see screenshot

[Sample of code] Username^*

Remediation [Recommendation] Please have the word (required) within the label of the input and put the "*" and required in red.

[Example of Compliant Code]

...

First name (required)

[Additional Resources] https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G184 https://wet-boew.github.io/v4.0-ci/demos/formvalid/formvalid-en.html

Impacted Users Users of Assistive Technologies (AT) Keyboard-only users

Screenshot

[dryrunsecurity[bot]]

DryRun Security Summary

CSS and HTML template updates for form fields and login page were made, with identified security considerations around multiple authentication methods and potential risks in OAuth login URL parameter handling.

Expand for full summary

1. Summary: CSS and HTML template modifications for form fields and login page, adjusting layout, styling, and authentication method display with minor grid and class changes.

2. Security Findings:

• Multiple authentication methods increase potential attack surface
• Passes request.GET.next parameter in OAuth login URLs (potential security risk if not properly validated)
• External authentication methods depend on correct provider configuration
• Multiple OAuth/SSO providers could introduce additional security complexity

Code Analysis

We ran 7 analyzers against 3 files and 1 analyzer had findings. 6 analyzers had no findings.

Analyzer	Findings
Configured Codepaths Analyzer	3 findings

Overall Riskiness

:red_circle: Risk threshold exceeded.

We've notified @mtesauro, @grendel513.

View PR in the DryRun Dashboard.

[github-actions[bot]]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions[bot]]

Conflicts have been resolved. A maintainer will review the pull request shortly.

[github-actions[bot]]

Conflicts have been resolved. A maintainer will review the pull request shortly.

[blakeaowens]

Hello @oussama-taoufiq, would you please migrate this PR to use the aria-required attribute instead of the (required) text? Documentation on aria-required can be found here.

[mtesauro]

Hello @oussama-taoufiq, would you please migrate this PR to use the aria-required attribute instead of the (required) text? Documentation on aria-required can be found here.

+1,000 on using aria-required

[oussama-taoufiq]

Hello @blakeaowens, @mtesauro, could you tell me where the username and password input are injected into the login page to be able to add the area-required attribute?

[Maffooch]

The login for is rendered by the form_fields.html snippet. This change would be in the same place that you added the (required) label

[oussama-taoufiq]

@Maffooch, Regarding the documentation you mentioned above, the aria-required attribute must be applied to the text box element and not to the label. In addition, I get an error when I try to put it on the label in the form_fields.html snippet.

[github-actions[bot]]

This pull request has conflicts, please resolve those before we can evaluate the pull request.