Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add aria-label attribute to navigation drawer button. #3157

Merged
merged 4 commits into from
Nov 8, 2021

Conversation

grimmdude
Copy link
Contributor

Changes proposed in this pull request:
Adds aria-label attribute to navigation drawer button to improve accessibility and satisfy this warning in Chrome.

Screen Shot 2021-11-08 at 8 12 14 AM

Reviewers should focus on:
Affects every page that the navigation drawer button is visible.

Necessity

  • Has the problem that is being solved here been clearly explained?
  • If applicable, have various options for solving this problem been considered?
  • For core PRs, does this need to be in core, or could it be in an extension?
  • Are we willing to maintain this for years / potentially forever?

Confirmed

  • Frontend changes: tested on a local Flarum installation.
  • Backend changes: tests are green (run composer test).
  • Core developer confirmed locally this works as intended.
  • Tests have been added, or are not appropriate here.

Copy link
Member

@davwheat davwheat left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the PR!

We'll need to use Flarum's translator for this.

Could you add a key in the core.yml file inside the locale folder (make sure it's added in the correct place alphabetically), then get the text with app.translator.trans('core.<key>') in the JS.

The best place would be under core.lib:

https://github.com/flarum/core/blob/2daee924c56a258a651697f7af2cf12f6a3d50f5/locale/core.yml#L501

@grimmdude
Copy link
Contributor Author

Got it, thanks @davwheat

Copy link
Member

@davwheat davwheat left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, ariaLabel also needs to be aria-label. Missed that when looking on my phone.

locale/core.yml Outdated Show resolved Hide resolved
js/src/common/components/Navigation.js Outdated Show resolved Hide resolved
grimmdude and others added 2 commits November 8, 2021 09:10
Co-authored-by: David Wheatley <hi@davwheat.dev>
…tion.js

Co-authored-by: David Wheatley <hi@davwheat.dev>
@askvortsov1 askvortsov1 merged commit 0957cca into flarum:master Nov 8, 2021
@askvortsov1 askvortsov1 added this to the 1.2 milestone Nov 8, 2021
@grimmdude grimmdude deleted the nav_drawer_aria_label branch November 8, 2021 18:41
@SychO9 SychO9 added the type/accessibility Issues relating to accessibility (keyboard navigation, screenreaders, text contrast, etc.) label Nov 11, 2021
@SychO9 SychO9 linked an issue Nov 11, 2021 that may be closed by this pull request
@SychO9 SychO9 removed this from the 1.2 milestone Nov 11, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type/accessibility Issues relating to accessibility (keyboard navigation, screenreaders, text contrast, etc.)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[A11Y] Toggle drawer button has no accessible label
4 participants