[A11Y] Missing label on Google reCaptcha form triggering accessibility non-compliance issue

[israelcefrin]

Issue Description

// What is the nature of the issue? How does it impact users?
Google reCaptcha form is missing a label to the invisible textarea. It triggers an accessibility issue compliance when running automated accessibility audit tools. Despite of it may be a false positive since hidden elements are removed from the Accessibility tree, it is annoying and might become overwhelming for those running different tools.

How to reproduce / Current behavior

// Step-by-step instructions explaining how to reproduce the problem. The environment required, explicit identification of the component in question

1. Click on the "Register" in a journal with Google reCaptcha enabled
2. Run an automated accessibility audit tool (e.g. WAVE)
3. See the issue

What application are you using?

OJS, OMP or OPS version X.X.X
OJS 3.3

Stack used

• Device: Laptop
• OS: MacOS
• Browser: Chrome
• Version: 117

Testing method

• Automated test: WAVE extension

Action

// Describe action that can be taken to remediate the issue.
Adding a hidden label to the form will fix the error.
<label for="g-recaptcha-response" style="display:none;" >Recaptcha response</label>

Additional information

// Please add any screenshots, code snippets, or other information we can use to investigate this issue.

[israelcefrin]

Hi @jonasraoni

There are 2 PRs open, one for each OJS version:
OJS 3.3 - #9387
OJS 3.4 - #9389

On the second one I've added the hidden property as you have suggested, but I had to keep thedisplay:none;just as a fallback for older browsers.

[jonasraoni]

Great, I've merged both and cherry-picked the commit from stable-3_4_0 into main (now we're supporting 3 branches/releases: LTS + current + next) 😁