Upgrade KDS to v5.0.0-rc1, introduce KDS live region and use it at one place

[MisRob]

Summary

• Upgrades KDS from 4.3.2 to 5.0.0-rc1
  • No breaking changes
  • Related release notes
    • https://github.com/learningequality/kolibri-design-system/releases/tag/v4.4.0
    • https://github.com/learningequality/kolibri-design-system/releases/tag/v5.0.0-rc1
• Utilizes useKLiveRegion at one place
• Also fixes a bug when the storage notification banner wasn't visible in cases when the problem it was supposed to communicate was present from the very beginning of loading Kolibri (not sure if that could actually happen, but the fix at least removes the dependency on how other parts of logic work)

References

• Kolibri counterpart of Add live regions logic kolibri-design-system#687
• Related Migrate live regions to KDS useKLiveRegion #12326
  • I will close this issue but not in the scope of this PR. I'd rather work on remaining regions gradually. Quite frequently, they currently don't work like expected and some clarifications will be needed - I don't have bandwith to do it in the scope of this work.

Reviewer guidance

Aug 7 update: below won't work as I cleaned up temporary changes that allowed for testing.

Code review

• Skip reviewing 6a573c8, it's just nonsense changes to allow for testing and will be removed

QA

• As a learner, navigate to Learn > Home. You should see the banner with "You do not have enough storage for new resources. Ask your coach or administrator for help." message right away. Hear it being announced by the screen reader after all other initial announcements, such as Kolibri was loaded.
  • Note that the banner will be displayed under any circumstances, even wrong ones - just for the purpose of testing
  • Note that the screen reader will also announce the number of points if you have any in a way that is rather confusing, just saying 500 without any context (at least my Orca does this) - not in the scope of this PR.
• After 15 seconds, the banner message changes to "Updated storage notification banner message that should be announced by screen readers." This too should be announced.
• Also observe browser console, particularly see if you spot any [useKLiveRegion] Could not send the message: ... error

Note that it's better to use screen reader to test this, rather than just observing

because the content of region's elements gets cleared up really fast (deliberate and recommended behavior), making it nearly impossible to spot it.

• @radinamatic I also welcome your input on guidance on when to use live regions and polite/assertive messages https://deploy-preview-687--kolibri-design-system.netlify.app/usekliveregion/

---

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')
• IIf this is an important user-facing change, PR or related issue has a 'changelog' labelI
• IIf this includes an internal dependency change, a link to the diff is providedI

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]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.17.0a0.dev0_git.67.g0251fa37.pex
Windows Installer (EXE)	kolibri-0.17.0a0.dev0+git.67.g0251fa37-windows-setup-unsigned.exe
Debian Package	kolibri_0.17.0a0.dev0+git.67.g0251fa37-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.17.0a0.dev0+git.67.g0251fa37.dmg
Android Package (APK)	kolibri-0.17.0a0.dev0+git.67.g0251fa37-0.1.4-debug.apk
TAR file	kolibri-0.17.0a0.dev0+git.67.g0251fa37.tar.gz
WHL file	kolibri-0.17.0a0.dev0+git.67.g0251fa37-py2.py3-none-any.whl

[AlexVelezLl]

Code changes make sense to me :)

[radinamatic]

As per the reviewer guidance, NVDA output on Windows 10 was as expected:

Kolibri  busy
graphic    Kolibri loader

You do not have enough storage for new resources 

After 15 seconds, NVDA outputs the update:
Updated storage notification banner message that should be announced by screen readers.

(Outside of scope) NVDA also announces the points flat (when earned):

Kolibri  busy

You do not have enough storage for new resources. Ask your coach or administrator for help. 
Learn
500  
Updated storage notification banner message that should be announced by screen readers. 

We should investigate this further, maybe the quickest solution would be to remove the role="presentation" from the the leaf SVG because it invalidates its aria-label="Poins earned".

The documentation page at https://deploy-preview-687--kolibri-design-system.netlify.app/usekliveregion/ reads as a good foundation. I'm unaware of a more specific guidance around the use of polite vs assertive than what you already included: the latter is always recommended only for status messages that require an immediate attention by the user, like error messages.

The only thing that could potentially be also included in the guidance is the reminder that when the assertive status notification is used, and there is an actionable element like a button that goes with it, that button should be the next in the focus order after the notification is presented to the user.

[radinamatic]

Live region performing as per specification, looking forward to seeing these implemented across Kolibri! 👍🏽 💯

[MisRob]

Thanks @radinamatic!

The points issue logged here - #12326 (comment)
Docs update follow-up here - learningequality/kolibri-design-system#716

[MisRob]

Cleaned up temporary commits and installed the latest KDS release. Ready for final review and merge. @AlexVelezLl would you give it one last look?

[AlexVelezLl]

This looks good to me! Would be ready to go after removing the extra space of the version in the package.json 👐.

[AlexVelezLl]

Seems like there is an extra space, I dont think this could cause a problem, but just in case.

Suggested change

	"kolibri-design-system": "5.0.0-rc1 ",
	"kolibri-design-system": "5.0.0-rc1",

[MisRob]

Thanks, yes better to fix. Done

[MisRob]

Check failure not related, resolved in #12549