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

Help drawer: Fix accessibility and semantics for help drawer (#6953)

Browse Source 
* Fix accessibility and semantics for help drawer

* Move inline styling external
This commit is contained in:
Jan Skovgaard
2019-12-20 22:08:40 +01:00
committed by Kenn Jacobsen
parent 4adee8b4c7
commit da7dacd6f2
4 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
View File

@@ -86,6 +86,7 @@
}
.umb-help-badge__title {
display: block;
font-size: 15px;
font-weight: bold;
color: @black;
@@ -160,6 +161,9 @@
border-radius: 0;
border-bottom: 1px solid @gray-9;
padding: 10px;
background: transparent;
width:100%;
border: 0 none;
}
.umb-help-list-item:last-child {

1
src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
View File

@@ -5,6 +5,7 @@
.umb-progress-circle__view-box {
position: absolute;
transform: rotate(-90deg);
right: 0;
}
// circle highlight on progressbar

22
src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
View File

@@ -17,17 +17,21 @@
<div class="umb-help-list">
<a href="" class="umb-help-list-item umb-help-list-item__content flex items-center justify-between" ng-click="tourGroup.open = !tourGroup.open">
<h5 class="umb-help-list-item__group-title">
<i ng-class="{'icon-navigation-right': !tourGroup.open, 'icon-navigation-down': tourGroup.open}"></i>
<button
type="button"
class="umb-help-list-item umb-help-list-item__content flex items-center justify-between"
ng-click="tourGroup.open = !tourGroup.open"
aria-expanded="{{tourGroup.open === undefined ? false : tourGroup.open }}">
<span class="umb-help-list-item__group-title bold">
<i ng-class="{'icon-navigation-right': !tourGroup.open, 'icon-navigation-down': tourGroup.open}" aria-hidden="true"></i>
<span ng-if="tourGroup.group !== 'undefined'">{{tourGroup.group}}</span>
<span ng-if="tourGroup.group === 'undefined'">Other</span>
</h5>
</span>
<umb-progress-circle
percentage="{{tourGroup.completedPercentage}}"
size="40">
</umb-progress-circle>
</a>
</button>
<div ng-if="tourGroup.open">
<div data-element="tour-{{tour.alias}}" class="umb-help-list-item" ng-repeat="tour in tourGroup.tours">
@@ -85,9 +89,9 @@
<ul class="umb-help-list">
<li class="umb-help-list-item" ng-repeat="video in vm.videos track by $index">
<a class="umb-help-list-item__content" data-element="help-article-{{video.title}}" target="_blank" ng-href="{{video.link}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
<i class="umb-help-list-item__icon icon-tv-old"></i>
<i class="umb-help-list-item__icon icon-tv-old" aria-hidden="true"></i>
<span class="umb-help-list-item__title">{{video.title}}</span>
<i class="umb-help-list-item__open-icon icon-out"></i>
<i class="umb-help-list-item__open-icon icon-out" aria-hidden="true"></i>
</a>
</li>
</ul>
@@ -96,7 +100,7 @@
<!-- Links -->
<div class="umb-help-section" data-element="help-links" ng-if="vm.hasAccessToSettings">
<a data-element="help-link-umbraco-tv" class="umb-help-badge" target="_blank" href="https://umbraco.tv?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
<i class="umb-help-badge__icon icon-tv-old"></i>
<i class="umb-help-badge__icon icon-tv-old" aria-hidden="true"></i>
<div class="umb-help-badge__title">Visit umbraco.tv</div>
<small>
<localize key="help_theBestUmbracoVideoTutorials">The best Umbraco video tutorials</localize>
@@ -104,7 +108,7 @@
</a>
<a data-element="help-link-our-umbraco" class="umb-help-badge" target="_blank" href="https://our.umbraco.com?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=our">
<i class="umb-help-badge__icon icon-favorite"></i>
<i class="umb-help-badge__icon icon-favorite" aria-hidden="true"></i>
<div class="umb-help-badge__title">Visit our.umbraco.com</div>
<small>

4
src/Umbraco.Web.UI.Client/src/views/components/umb-progress-bar.html
View File

@@ -1,3 +1,3 @@
<div class="umb-progress-bar umb-progress-bar--{{size}}">
<span class="umb-progress-bar umb-progress-bar--{{size}}">
<span class="umb-progress-bar__progress" style="width: {{percentage}}%"></span>
</div>
</span>