Improve Coach tabs accessibility for quiz report page #11588

KshitijThareja · 2023-12-05T16:14:35Z

Summary

This PR aims to improve the coach tabs accessibility for the quiz report page with the use of KDS tabs (KTabsList and KTabsPanel) in the QUIZZES tab which is inside Coach->Reports->Quizzes->Select a quiz. The new constants for the quiz tab are defined in tabsConstants.js.

WorkingSample.mp4

References

Closes #10253

Reviewer guidance

Go to Coach->Reports-Quizzes-Select a quiz
For accessibility, use the keyboard and go to the Report tab and then press the right arrow to move focus to the Difficult Questions tab. Press enter to open the focused tab.
For normal, use the mouse to click the respective tab to open.

Testing checklist

Contributor has fully tested the PR manually
If there are any front-end changes, before/after screenshots are included
Critical user journeys are covered by Gherkin stories
Critical and brittle code paths are covered by unit tests

PR process

PR has the correct target branch and milestone
PR has 'needs review' or 'work-in-progress' label
If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
If this is an important user-facing change, PR or related issue has a 'changelog' label
If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

Automated test coverage is satisfactory
PR is fully functional
PR has been tested for accessibility regressions
External dependency files were updated if necessary (yarn and pip)
Documentation is updated
Contributor is in AUTHORS.md

github-actions · 2023-12-05T16:49:39Z

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.16.0b10.dev0_git.3.g79fe65d4.pex
Windows Installer (EXE)	kolibri-0.16.0b10.dev0+git.3.g79fe65d4-unsigned.exe
Debian Package	kolibri_0.16.0b10.dev0+git.3.g79fe65d4-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0b10.dev0+git.3.g79fe65d4-0.3.0.dmg
Android Package (APK)	kolibri-0.16.0b10.dev0+git.3.g79fe65d4-0.1.0-debug.apk
TAR file	kolibri-0.16.0b10.dev0+git.3.g79fe65d4.tar.gz
WHL file	kolibri-0.16.0b10.dev0+git.3.g79fe65d4-py2.py3-none-any.whl

KshitijThareja · 2023-12-06T15:35:00Z

Hi @MisRob. I've made the PR targeting the release-v0.16.x branch, as discussed earlier. After the review is done, I can rebase it to the develop branch if required.
Thanks :)

MisRob · 2023-12-07T13:46:38Z

Thanks @KshitijThareja, great! I will review some time next week.

MisRob · 2023-12-13T14:36:23Z

kolibri/plugins/coach/assets/src/views/reports/ReportsQuizBaseListPage.vue

@@ -113,6 +157,12 @@
        }
      },
    },
+    $trs: {
+      coachReportsQuizzes: {


@radinamatic This a string that's used as aria-label for this tablist

I was thinking if "Coach reports quiz tabs" would make more sense?

Also I think we could improve the string context to say something like "Labels the quiz page tabs in the Coach > Reports > Quizzes"

I'd be grateful to hear from you before making a final suggestion to @KshitijThareja.

Bigger issue here is that since the intention is to merge this into the 0.16 release, we cannot add new strings at this point, as there will be no translations for them available for this release.

Ideally the tablist aria-label should say something like Report details, but we have nothing similar on Crowdin. Maybe just reusing the string Details that we do have in our code already, since this tablist is so deep into Coach and reports features that it would be specific enough.

Ah okay, I didn't realize this. Thanks @radinamatic. Yes, then let's go with the existing 'Details' string for now and I will open a follow-up issue for us to replace it with something better. @KshitijThareja The existing string is saved as detailsLabel defined in commonCoachStrings.js. Please use it instead of adding a new one. Thank you.

And just as a reminder: when writing strings to use in aria-labels for interactive elements, there is no need to include the type of the element as the screen reader already announces it. For example the tablist on the Coach home has the label Coach reports, and the NVDA screen reader announces it as:

Coach reports tab control

If you write the string for aria-label Coach reports quiz tabs as suggested above, NVDA would announce it as:

Coach reports quiz tabs tab control

To sum it up, no need to put the element type inside its aria-label, it is redundant 🙂

❤️🙏🏻

I've changed the aria-label to use the detailsLabel from commonCoachStrings.js as asked 👍🏻

MisRob · 2023-12-13T14:39:09Z

Hi @KshitijThareja, thanks, great work. I haven't notice any issues in code and I manually tested it as well. All worked as expected for me. Just leaving one note about a string. I'd like to hear from @radinamatic before we make the final tweak. I think that we can target the release branch if our QA team can test it out, please :)? @radinamatic @pcenov

KshitijThareja · 2023-12-13T15:32:45Z

Thanks @MisRob :)
I'll be happy to work on any further suggestions by the team.

radinamatic · 2023-12-14T09:48:13Z

And I missed to confirm that the keyboard navigability on this page is working as intended 🙂
Good job, will approve! 👍🏽

MisRob · 2023-12-14T09:49:01Z

Great! @KshitijThareja so the only required update is to re-use the existing string. We will then proceed to merge. Good work!

radinamatic

Yey for more accessible tab controls in coach pages! 👏🏽

As soon as the label is corrected, this will be good to merge! 💯

KshitijThareja · 2023-12-14T11:37:13Z

Thanks a lot @radinamatic @MisRob 😊
Will work on the suggested changes and update it as soon as possible.

MisRob

Thanks @KshitijThareja and @radinamatic!

Improve Coach tabs accessibility for quiz report page

c612313

github-actions bot added APP: Coach Re: Coach App (lessons, quizzes, groups, reports, etc.) SIZE: medium labels Dec 5, 2023

MisRob self-requested a review December 7, 2023 13:45

MisRob reviewed Dec 13, 2023

View reviewed changes

MisRob requested review from radinamatic and pcenov December 13, 2023 14:39

radinamatic approved these changes Dec 14, 2023

View reviewed changes

Change aria-label string for coach tabs

1981adf

MisRob approved these changes Dec 14, 2023

View reviewed changes

MisRob merged commit c59891c into learningequality:release-v0.16.x Dec 14, 2023
33 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve Coach tabs accessibility for quiz report page #11588

Improve Coach tabs accessibility for quiz report page #11588

KshitijThareja commented Dec 5, 2023

github-actions bot commented Dec 5, 2023 •

edited

Loading

KshitijThareja commented Dec 6, 2023

MisRob commented Dec 7, 2023 •

edited

Loading

MisRob Dec 13, 2023

radinamatic Dec 14, 2023

radinamatic Dec 14, 2023

MisRob Dec 14, 2023

radinamatic Dec 14, 2023

MisRob Dec 14, 2023

KshitijThareja Dec 14, 2023

MisRob commented Dec 13, 2023

KshitijThareja commented Dec 13, 2023

radinamatic commented Dec 14, 2023

MisRob commented Dec 14, 2023

radinamatic left a comment

KshitijThareja commented Dec 14, 2023

MisRob left a comment

Improve Coach tabs accessibility for quiz report page #11588

Improve Coach tabs accessibility for quiz report page #11588

Conversation

KshitijThareja commented Dec 5, 2023

Summary

References

Reviewer guidance

Testing checklist

PR process

Reviewer checklist

github-actions bot commented Dec 5, 2023 • edited Loading

KshitijThareja commented Dec 6, 2023

MisRob commented Dec 7, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MisRob commented Dec 13, 2023

KshitijThareja commented Dec 13, 2023

radinamatic commented Dec 14, 2023

MisRob commented Dec 14, 2023

radinamatic left a comment

Choose a reason for hiding this comment

KshitijThareja commented Dec 14, 2023

MisRob left a comment

Choose a reason for hiding this comment

github-actions bot commented Dec 5, 2023 •

edited

Loading

MisRob commented Dec 7, 2023 •

edited

Loading