Propose improvements to the report page

[ccanash]

The objective of this task is to propose improvement to the report page to ensure its scalability. As we add more screen readers, it will make columns wider and make it harder to understand. Current layout makes comparison across combinations easy but it is not scalable for mobile and other screen readers like Narrator. 

[howard-e]

Option 1

To align with initial thoughts of getting the design somewhat close to how Interop reports are displayed in APG's Assistive Technology support section. I've drafted reports_1.html for what this could be along with accompanying notes:

• At the top of the page, there are Assistive Technology and Browser filters that allows a viewer to specifically target the Assistive Technologies, Browsers or a combination of both.
• Under that, there are sections dedicated the collected combinations of Assistive Technologies and Browsers. For eg. "JAWS - Chrome", "NVDA - Firefox", "VoiceOver for macOS - Safari", etc.
• In each section, there is a table outlining the test plans in the same way it is currently presented on the reports page. The columns are "Test Plan", "Assistive Technology Version" and "Result".
  • Test Plan will be the same as it is today -- the pattern's name + the review phase (Candidate or Recommended).
  • Assistive Technology Version will only have a value if the Test Plan is "Recommended".
  • Result is the progress bar showing the passing value and it will continue to link in the same way it currently does.

Option 2

A more complex change which aligns with the current Test Queue's design involves having the test plan's listed out as pattern disclosures to be expanded to reveal the latest updated version(s) of the test plan. A plus to this suggestion is that if there is a Recommended version of the Test Plan, the disclosure will also display the latest Candidate version (if more recent than the Recommended version). I've drafted reports_2.html for what this could be along with accompanying notes:

• The reports page is now separated by disclosures, where each is for a test plan. The disclosure title will also still have the "latest" status showing "Recommended" or "Candidate".
• When the disclosure is expanded, if there is a current "Candidate" report, a table will we displayed for it with a heading that reads:
  • VERSION_STRING - CANDIDATE since MONTH DAY, YEAR (PERCENTAGE passing), where "PERCENTAGE passing" is the average calculation of the percentage passing results of the finalized reports for the Test Plan Version.
  • VERSION_STRING will link to the appropriate test review page (/test-review/<id>)
  • PERCENTAGE> passing will link to the appropriate Test Plan Version’s report page. (/report/<id>)
• The table itself will have the following columns:
  • Assistive Technology 
  • Browser
  • Result, which continues to display a progress bar with the percentage passing result and is clickable and still links to the detailed report page for the combination (/report/<id>/targets/<id>)
• When the disclosure is expanded, if there is a RECOMMENDED report, everything above applies, but the table will also have an Assistive Technology Version column, which comes from the first required or latest Assistive Technology version that was used when the report was finalized or updated.
• Additionally, to make it clearer to viewers that work is currently being done while there is a RECOMMENDED version. If there is a CANDIDATE version that has been promoted after the time the RECOMMENDED version was promoted, both tables should be shown in the disclosure. When that CANDIDATE version is promoted to RECOMMENDED, only that newly promoted version will now be shown in the disclosure.

@mcking65 when you get a chance to review, please let me know if any of these approaches aligns with your previous thoughts. If so, we could begin iterating on whichever is selected.