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

Refactor language picker to improve accessibility #6538

Merged
merged 4 commits into from
Oct 14, 2019
Merged

Refactor language picker to improve accessibility #6538

merged 4 commits into from
Oct 14, 2019

Conversation

BatJan
Copy link
Contributor

@BatJan BatJan commented Oct 1, 2019

Prerequisites

  • I have added steps to test this contribution in the description below

Description

In this PR I have done the following

  • Changed <div> and <a> to <button> to fix keyboard navigation and semantics
  • Adjusted the styling so the buttons are styled correctly
  • Added the aria-haspopup and aria-expanded attributes
  • Added visual hidden texts for providing better non-visual context so a screen reader announces "Current language: English (United States)" instead of just "English (United States)" for instance
  • Added the deep-blur directive in order to have the dropdown disappear when it looses tab-focus

The visual changes from before and after can be seen below

Before
language-switcher-before

After
language-switcher-after

I look forward to receive any feedback you might have for this 👍

@@ -1636,5 +1636,7 @@ Mange hilsner fra Umbraco robotten
<key alias="openBackofficeSearch">Åben backoffice søgning</key>
<key alias="openCloseBackofficeHelp">Åben/Luk backoffice hjælp</key>
<key alias="openCloseBackofficeProfileOptions">Åben/Luk dine profil indstillinger</key>
<key alias="currentLanguage">Aktivt sprog:</key>
<key alias="switchLanguage">Skift sprog til:</key>
Copy link
Contributor

Choose a reason for hiding this comment

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

@BatJan I would probably just add the colons in the view/controller instead. It would make it easier to reuse these keys in other areas.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, good point - Done now 👍

@nul800sebastiaan
Copy link
Member

Thanks @BatJan - we'll have a look soon!

@nul800sebastiaan
Copy link
Member

Awesome, thanks very much @BatJan !

emmaburstow pushed a commit that referenced this pull request Oct 27, 2019
…ton (#6561)

* Improves accessability of the three dot tree options button

* Updated list view headers styling to have the link/hand cursor visible only if the header is sortable (and hence clicking has an effect)

* Allows members to be ordered by additional system fields (#6575)

* Fix ContentType.Alias matching in PublishedContentExtensions an… (#6577)

* Fixes an error in #6538 by moving the colon character to the sr-only span

* V8: Move misplaced colon in language selector (#6692)

* V8: It should be possible to disallow all types at content root (#6580)

* Pick macro parameters in an infinite editor like content type properties (#6586)

* Reload node children after publishing with descendants

* Correct URL decoding of macro partial view names (#6592)

* Fix semantics for list views (#6595)

* fixes test

* fixing tests

* Improved menu context
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants