[REF] Fix accessiblity issue on drupal menu toggle button

[monishdeb]

Overview

Fix accessiblity issue on drupal menu toggle button

Before

Very low contrast on toggle menu:

After

fixed

Comments

ping @colemanw @eileenmcnaughton @seamuslee001

[civibot]

🤖 Thank you for contributing to CiviCRM! ❤️ We will need to test and review this PR. 👷

Introduction for new contributors...

• If this is your first PR, an admin will greenlight automated testing with the command ok to test or add to whitelist.
• A series of tests will automatically run. You can see the results at the bottom of this page (if there are any problems, it will include a link to see what went wrong).
• A demo site will be built where anyone can try out a version of CiviCRM that includes your changes.
• If this process needs to be repeated, an admin will issue the command test this please to rerun tests and build a new demo site.
• Before this PR can be merged, it needs to be reviewed. Please keep in mind that reviewers are volunteers, and their response time can vary from a few hours to a few weeks depending on their availability and their knowledge of this particular part of CiviCRM.
• A great way to speed up this process is to "trade reviews" with someone - find an open PR that you feel able to review, and leave a comment like "I'm reviewing this now, could you please review mine?" (include a link to yours). You don't have to wait for a response to get started (and you don't have to stop at one!) the more you review, the faster this process goes for everyone 😄
• To ensure that you are credited properly in the final release notes, please add yourself to contributor-key.yml
• For more information about contributing, see CONTRIBUTING.md.

Quick links for reviewers...

• ➡️ PR Demo site (can be rebuilt with the command test this please).
• 📖 Review standards
• 🗒️ Review template (brief or verbose)

➡️ Online demo of this PR 🔗

[monishdeb]

Jenkins test this please

[eileenmcnaughton]

@monishdeb can you ping @vingle on any PRs that touch css / theming. He is pretty much our guru on this front now

[vingle]

I can see this fixes an a11y error, but I think it creates a UI issue as a result. Are you able to screengrab before and after? When I tested I got this after:

vs this before:

ie the transparent text colour is being used to hide the button label. Perhaps a better fix would be to wrap the text in .sr-only as you have elsewhere? ie

<label class="crm-menubar-toggle-btn" for="crm-menubar-state">
  <span class="crm-menu-logo"></span>
  <span class="crm-menubar-toggle-btn-icon"></span>
  <span class="sr-only">Toggle main menu</span>
</label>

[monishdeb]

Thanks @vingle for your feedback, I have updated the PR as per your suggestion and it worked for me. Can you please verify the patch?

[vingle]

Thanks @monishdeb - looks good to me.

As the button text is still transparent does it show a WAVE/etc error still? In which case should both this and your previous PR stand? Or does the fact the text is wrapped in sr-only negate that?

[monishdeb]

@vingle oops I missed your comment. Yes WAVE doesn't complain about the error now and can't notice any html break for adding sr-only span. I have tested this on d9 site and looks good to me.

[vingle]

Great - good to go.