Align metadata dropdown order to the figma spec

[marcellamaki]

Summary

The list order for the accessibility, and (perhaps more relevantly) grade/level dropdown filters had never been implemented to spec. This creates a helper function to

References

Fixes #12057

before	after	reference

Reviewer guidance

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]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.16.2b1.dev0_git.28.g692a671c.pex
Windows Installer (EXE)	kolibri-0.16.2b1.dev0+git.28.g692a671c-windows-setup-unsigned.exe
Debian Package	kolibri_0.16.2b1.dev0+git.28.g692a671c-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.2b1.dev0+git.28.g692a671c-0.4.2.dmg
Android Package (APK)	kolibri-0.16.2b1.dev0+git.28.g692a671c-0.1.2-debug.apk
TAR file	kolibri-0.16.2b1.dev0+git.28.g692a671c.tar.gz
WHL file	kolibri-0.16.2b1.dev0+git.28.g692a671c-py2.py3-none-any.whl

[marcellamaki]

@pcenov @radinamatic this is ready for manual QA. please let me know if you need any additional details

[rtibbles]

Code looks good, manual QA for merge!

[pcenov]

Hi @marcellamaki - LGTM - here's what I am seeing for both Level and Accessibility (having selected all possible options when I created the resources in Studio):

A note that in the Accessibility drop-down some of the options are always displayed truncated with ellipsis while in the spec the text goes on the next line.

Also on closer inspection I noticed that in all browsers the descenders of the letters (specifically the 'g's) are not fully visible - wondering whether that warrants filing a separate issue?

[marcellamaki]

Yes, @pcenov if you could file a follow up that includes both of those points, that would be fantastic! thank you

[radinamatic]

Follow up issues for non-regressions filed, this can is good to go! 👏🏽 💯