yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V8: Accessibility improvements for top header (#5544)

Browse Source
This commit is contained in:
Mike
2019-06-23 11:10:16 +01:00
committed by Sebastiaan Janssen
parent 4c443b9e2e
commit 4fca0bb735
5 changed files with 46 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/Umbraco.Web.UI.Client/src/less/accessibility/visually-hidden.less Normal file
View File

@@ -0,0 +1,11 @@
// Visually Hidden - used to remove an element from the view, whilst retaining accessibily for screen readers. More info available at https://a11yproject.com/posts/how-to-hide-content/
// --------------------------------------------------
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}

3
src/Umbraco.Web.UI.Client/src/less/belle.less
View File

@@ -80,6 +80,9 @@
@import "forms/umb-validation-label.less";
// Umbraco Accessibility
@import "accessibility/visually-hidden.less";
// Umbraco Components
@import "components/application/umb-app-header.less";
@import "components/application/umb-app-content.less";

15
src/Umbraco.Web.UI.Client/src/less/buttons.less
View File

@@ -67,6 +67,21 @@
border-color: rgba(0,0,0,0.09);
}
// Button Reset - remove the default browser styles from the button element
// --------------------------------------------------
.btn-reset {
padding: 0;
margin: 0;
border: none;
background: none;
color: currentColor;
font-family: @baseFontFamily;
font-size: @baseFontSize;
line-height: @baseLineHeight;
cursor: pointer;
}
// Button Sizes
// --------------------------------------------------

15
src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less
View File

@@ -16,27 +16,26 @@
margin-right: -10px;
}
.umb-app-header__action a {
.umb-app-header__button {
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
display: flex;
align-items: center;
height: @appHeaderHeight;
}
.umb-app-header__action a {
outline: none;
&:focus {
.tabbing-active & {
.umb-app-header__action-icon::after {
content: '';
position: absolute;
z-index:10000;
top: -7px;
left: -7px;
top: 50%;
left: 50%;
width: 36px;
height: 35px;
transform: translate(-50%, -50%);
border-radius: 3px;
box-shadow: 0 0 2px @pinkLight, inset 0 0 2px 1px @pinkLight;
}
@@ -51,7 +50,7 @@
font-size: 22px;
}
.umb-app-header__action a:hover .umb-app-header__action-icon,
.umb-app-header__action a:focus .umb-app-header__action-icon {
.umb-app-header__button:hover .umb-app-header__action-icon,
.umb-app-header__button:focus .umb-app-header__action-icon {
opacity: 1;
}

16
src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html
View File

@@ -1,3 +1,4 @@
<div>
<div class="umb-app-header">
@@ -10,25 +11,28 @@
<div class="flex items-center">
<ul class="umb-app-header__actions">
<li data-element="global-search" class="umb-app-header__action">
<a href="#" hotkey="ctrl+space" ng-click="searchClick()" ng-mousedown="rememberFocus()" prevent-default style="font-size: 20px;">
<button class="umb-app-header__button btn-reset" hotkey="ctrl+space" ng-click="searchClick()" ng-mousedown="rememberFocus()" prevent-default style="font-size: 20px;">
<span class="visually-hidden">Open/Close backoffice search</span>
<i class="umb-app-header__action-icon icon-search"></i>
</a>
</button>
</li>
<li data-element="global-help" class="umb-app-header__action">
<a href="#" hotkey="ctrl+shift+h" ng-click="helpClick()" prevent-default>
<button class="umb-app-header__button btn-reset" hotkey="ctrl+shift+h" ng-click="helpClick()" prevent-default>
<span class="visually-hidden">Open/Close backoffice help window</span>
<i class="umb-app-header__action-icon icon-help-alt"></i>
</a>
</button>
</li>
<li data-element="global-user" class="umb-app-header__action">
<a href="#" hotkey="ctrl+shift+u" ng-click="avatarClick()" prevent-default title="{{user.name}}" >
<button class="umb-app-header__button btn-reset" ng-click="avatarClick()" hotkey="ctrl+shift+u" title="{{user.name}}" aria-label="Open/Close your profile options window" prevent-default>
<umb-avatar
class="umb-app-header__action-icon"
size="xxs"
color="secondary"
name="{{user.name}}"
img-src="{{avatar[0].value}}"
img-srcset="{{avatar[1].value}} 2x, {{avatar[2].value}} 3x">
</umb-avatar>
</a>
</button>
</li>
</ul>
</div>