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

NestedContent DoctyperPicker view: Various a11y fixes (#9049)

Browse Source 
* Add buttons and convert icons to use the umb-icon directive

* removes class attribute from umb-icon, fixes self-closing th elements (th is non-void)

Co-authored-by: Nathan Woulfe <nathan@nathanw.com.au>
This commit is contained in:
Jan Skovgaard
2020-12-05 00:00:35 +01:00
committed by GitHub
parent a655fba948
commit 81e3798595
3 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
View File

@@ -240,17 +240,17 @@
}
.umb-nested-content__doctypepicker table td.icon-navigation,
.umb-nested-content__doctypepicker i.umb-nested-content__help-icon {
.umb-nested-content__doctypepicker .umb-nested-content__help-icon {
vertical-align: middle;
color: @gray-7;
}
.umb-nested-content__doctypepicker table td.icon-navigation:hover,
.umb-nested-content__doctypepicker i.umb-nested-content__help-icon:hover {
.umb-nested-content__doctypepicker .umb-nested-content__help-icon:hover {
color: @gray-2;
}
.umb-nested-content__doctypepicker i.umb-nested-content__help-icon {
.umb-nested-content__doctypepicker .umb-nested-content__help-action {
margin-left: 10px;
}

5
src/Umbraco.Web.UI.Client/src/less/navs.less
View File

@@ -12,7 +12,10 @@
padding-right: 7px;
}
.icon.handle{color: @gray-8;}
.umb-icon.handle,
.icon.handle {
color: @gray-8;
}
// BASE CLASS

18
src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.doctypepicker.html
View File

@@ -3,7 +3,7 @@
<table class="table table-striped">
<thead>
<tr>
<th />
<th></th>
<th>
<localize key="contentTypeEditor_elementType">Element Type</localize>
</th>
@@ -13,20 +13,20 @@
<th>
<localize key="template_template">Template</localize>
</th>
<th />
<th></th>
</tr>
</thead>
<tbody ui-sortable="sortableOptions" ng-model="model.value">
<tr ng-repeat="config in model.value">
<td>
<i class="icon icon-navigation handle"></i>
<umb-icon icon="icon-navigation" class="handle"></umb-icon>
</td>
<td>
{{ph = placeholder(config);""}}
<div class="umb-nested-content__placeholder" ng-class="{'umb-nested-content__placeholder--selected':ph}" ng-click="openElemTypeModal($event, config)">
<button type="button" class="btn-reset umb-nested-content__placeholder" ng-class="{'umb-nested-content__placeholder--selected':ph}" ng-click="openElemTypeModal($event, config)">
<umb-node-preview ng-if="ph" icon="ph.icon" name="ph.name"></umb-node-preview>
<localize key="content_nestedContentAddElementType" ng-if="!ph">Add element type</localize>
</div>
</button>
</td>
<td>
@@ -49,17 +49,19 @@
<button type="button" class="btn" ng-click="add()" ng-disabled="!canAdd()">
<localize key="general_add">Add</localize>
</button>
<i class="icon icon-help-alt medium umb-nested-content__help-icon" ng-click="showHelpText = !showHelpText"></i>
<button type="button" class="btn-reset umb-nested-content__help-action" ng-click="showHelpText = !showHelpText">
<umb-icon icon="icon-help-alt" class="medium umb-nested-content__help-icon"></umb-icon>
</button>
</div>
</div>
<br />
<div class="umb-nested-content__help-text" ng-show="showHelpText">
<p>
<b><localize key="general_group">Group</localize>:</b><br />
<strong><localize key="general_group">Group</localize>:</strong><br />
<localize key="content_nestedContentGroupHelpText">Select the group whose properties should be displayed. If left blank, the first group on the element type will be used.</localize>
</p>
<p>
<b><localize key="template_template">Template</localize>:</b><br />
<strong><localize key="template_template">Template</localize>:</strong><br />
<localize key="content_nestedContentTemplateHelpTextPart1">Enter an angular expression to evaluate against each item for its name. Use</localize>
<code ng-non-bindable>{{$index}}</code>
<localize key="content_nestedContentTemplateHelpTextPart2">to display the item index</localize>