Developer Portal Drupal 8 Out-of-the-Box Section 508 tab sequence and focus loss issue in DHS USCIS implementation

[simonxuan]

Description

A clear and concise description of what the bug is.
USCIS is in progress of building up the Internal Developer Portal in Dev and Nonprod environment. Now we are gearing up for production release.
Section 508 Report_3074c253b96046258d949e2647fce010-210921-1332-2742.pdf
Now, we completed the functional testing and received a list of findings from our Section 508 tester that is mainly related to the focus of tabbing on the UI in Drupal 8 structure.
In USCIS, we have a private cloud implementation of Edge v4.5. Drupal 8 is the version we used for Dev Portal.
Per our AE Jason Beattie's recommendation, we are opening this ticket.

Steps to Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'

Please let the list of issue being raised in the attached PDF.

Actual Behavior

What happened after the steps to reproduce.
Most of them if loss focus and tab sequence issues.

Expected Behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Notes

Add any other context about the problem here.

Version Info

This can be the version you can see on admin/modules in Drupal or
the output of this command: composer show. Add Drupal core and
other version information if needed.

[earth2marsh]

Thanks for filing this issue, as making software more accessible is an important goal! Compliance is not something that we specifically warrant today; however, we want to improve the general accessibility of developer portals built with Drupal. As I understand it, Section 508 is specifically about accessibility requirements of the US government?

Where there are accessibility improvements to the Apigee modules, it would help if you can file them as individual issues. That we can better track development progress. For example when changes are checked in, they can reference each item. If you do, it might be useful to refer back this parent bug to collect them together.

And since this is an open source project, we would welcome any improvement that you might contribute as a pull request!

[simonxuan]

Thank you Marsh for the update and suggestion. USCIS team has been working with Gitesh and our Apigee AE over the years on the Developer Portal effort to close the loop for the Apigee private cloud in our ecosystems. The D8 accessibility challenge, per our initial research, is theme-related. Hence we are trying to see if Google/Apigee team may have a solution already to mitigate, such as the site created by Google partner Achieve team at https://developer.experian.com/. We believe the tab sequence and focus-loss issue had been address in the theme they used. Let me check with D8 developer and find out what is the perceived fix.

[raakesh-blokhra]

@simonxuan meanwhile can you also share which tools are you using for testing? I would like to be able to test the site(s) using the same tools that you use for better clarity.

[raakesh-blokhra]

@simonxuan as @giteshk mentioned in #135 if you enable AJAX it will prevent the page refresh, keeping the tab focus where it was when you interact with a block.

[simonxuan]

Thank you @raakesh-blokhra and @giteshk for your input. I have been working with the team on some JavaScript code to try to control the tabbing and focus setting. Ajax enablement sounds like a great feature we can try. Also, to respond to the testing tool question from @earth2marsh, the Section 508 tester used the ANDI and Contrast Analyzer to run accessibility test. Thank you.