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.

Sign up for GitHub

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0762edb
Add dicitionary keys for non-visual texts
BatJan Oct 1, 2019
7348a9a
Refactor anchors to be buttons, add sr-only texts, aria-attributes an…
BatJan Oct 1, 2019
3b1a946
Refactor the styling
BatJan Oct 1, 2019
c0f70a3
Move the : out of the language files
BatJan Oct 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 12 additions & 5 deletions src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,20 @@
align-items: center;
justify-content: space-between;
padding: 0 20px;
cursor: pointer;
background: transparent;
border: 0 none;
border-bottom: 1px solid @gray-9;
height: @editorHeaderHeight;
box-sizing: border-box;
color: @ui-option-type;
width: 100%;
}

.umb-language-picker__expand {
font-size: 14px;
}

.umb-language-picker__toggle:focus,
.umb-language-picker__toggle:hover {
background: @ui-option-hover;
color:@ui-option-type-hover;
Expand All @@ -43,20 +46,24 @@
overflow: auto;
}

.umb-language-picker__dropdown a {
.umb-language-picker__dropdown-item {
background: transparent;
border: 0 none;
padding: 8px 20px;
display: block;
font-size: 14px;
width: 100%;
text-align: left;
}

.umb-language-picker__dropdown a:hover,
.umb-language-picker__dropdown a:focus {
.umb-language-picker__dropdown-item:hover,
.umb-language-picker__dropdown-item:focus {
background: @ui-option-hover;
text-decoration: none;
color:@ui-option-type-hover;
}

.umb-language-picker__dropdown a.umb-language-picker__dropdown-item--current {
.umb-language-picker__dropdown .umb-language-picker__dropdown-item.umb-language-picker__dropdown-item--current {
padding-left: 16px;
border-left: 4px solid @ui-light-active-border;
color:@ui-light-active-type;
Expand Down
28 changes: 22 additions & 6 deletions src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,29 @@

<div class="navigation-inner-container">

<div class="umb-language-picker" ng-if="currentSection === 'content' && languages.length > 1" on-outside-click="page.languageSelectorIsOpen = false">
<div class="umb-language-picker__toggle" ng-click="toggleLanguageSelector()">
<div>{{selectedLanguage.name}}</div>
<ins class="umb-language-picker__expand" ng-class="{'icon-navigation-down': !page.languageSelectorIsOpen, 'icon-navigation-up': page.languageSelectorIsOpen}" class="icon-navigation-right">&nbsp;</ins>
</div>
<div class="umb-language-picker" ng-if="currentSection === 'content' && languages.length > 1" deep-blur="page.languageSelectorIsOpen = false" on-outside-click="page.languageSelectorIsOpen = false">
<button type="button" class="umb-language-picker__toggle" ng-click="toggleLanguageSelector()" aria-haspopup="true" aria-expanded="{{page.languageSelectorIsOpen}}">
<span>
<span class="sr-only">
<localize key="visuallyHiddenTexts_currentLanguage">Current language: </localize>
</span>
{{selectedLanguage.name}}
</span>
<i class="umb-language-picker__expand" ng-class="{'icon-navigation-down': !page.languageSelectorIsOpen, 'icon-navigation-up': page.languageSelectorIsOpen}" class="icon-navigation-right" aria-hidden="true"></i>
</button>
<div class="umb-language-picker__dropdown" ng-if="page.languageSelectorIsOpen">
<a class="umb-language-picker__dropdown-item" ng-class="{'umb-language-picker__dropdown-item--current': language.active}" ng-click="selectLanguage(language)" ng-repeat="language in languages" href="">{{language.name}}</a>
<button
type="button"
class="umb-language-picker__dropdown-item"
ng-class="{'umb-language-picker__dropdown-item--current': language.active}"
ng-click="selectLanguage(language)"
ng-repeat="language in languages"
>
<span class="sr-only">
<localize key="visuallyHiddenTexts_switchLanguage">Switch language to: </localize>
</span>
{{language.name}}
</button>
</div>
</div>

Expand Down
2 changes: 2 additions & 0 deletions src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 👍

</area>
</language>
2 changes: 2 additions & 0 deletions src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2150,5 +2150,7 @@ To manage your website, simply open the Umbraco back office and start adding con
<key alias="openBackofficeSearch">Open backoffice search</key>
<key alias="openCloseBackofficeHelp">Open/Close backoffice help</key>
<key alias="openCloseBackofficeProfileOptions">Open/Close your profile options</key>
<key alias="currentLanguage">Current language:</key>
<key alias="switchLanguage">Switch language to:</key>
</area>
</language>
2 changes: 2 additions & 0 deletions src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2164,5 +2164,7 @@ To manage your website, simply open the Umbraco back office and start adding con
<key alias="openBackofficeSearch">Open backoffice search</key>
<key alias="openCloseBackofficeHelp">Open/Close backoffice help</key>
<key alias="openCloseBackofficeProfileOptions">Open/Close your profile options</key>
<key alias="currentLanguage">Current language:</key>
<key alias="switchLanguage">Switch language to:</key>
</area>
</language>