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 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; vertical-align: middle;
color: @gray-7; color: @gray-7;
} }
.umb-nested-content__doctypepicker table td.icon-navigation:hover, .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; 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; margin-left: 10px;
} }

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

@@ -12,7 +12,10 @@
padding-right: 7px; padding-right: 7px;
} }
.icon.handle{color: @gray-8;} .umb-icon.handle,
.icon.handle {
color: @gray-8;
}
// BASE CLASS // 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"> <table class="table table-striped">
<thead> <thead>
<tr> <tr>
<th /> <th></th>
<th> <th>
<localize key="contentTypeEditor_elementType">Element Type</localize> <localize key="contentTypeEditor_elementType">Element Type</localize>
</th> </th>
@@ -13,20 +13,20 @@
<th> <th>
<localize key="template_template">Template</localize> <localize key="template_template">Template</localize>
</th> </th>
<th /> <th></th>
</tr> </tr>
</thead> </thead>
<tbody ui-sortable="sortableOptions" ng-model="model.value"> <tbody ui-sortable="sortableOptions" ng-model="model.value">
<tr ng-repeat="config in model.value"> <tr ng-repeat="config in model.value">
<td> <td>
<i class="icon icon-navigation handle"></i> <umb-icon icon="icon-navigation" class="handle"></umb-icon>
</td> </td>
<td> <td>
{{ph = placeholder(config);""}} {{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> <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> <localize key="content_nestedContentAddElementType" ng-if="!ph">Add element type</localize>
</div> </button>
</td> </td>
<td> <td>
@@ -49,17 +49,19 @@
<button type="button" class="btn" ng-click="add()" ng-disabled="!canAdd()"> <button type="button" class="btn" ng-click="add()" ng-disabled="!canAdd()">
<localize key="general_add">Add</localize> <localize key="general_add">Add</localize>
</button> </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>
</div> </div>
<br /> <br />
<div class="umb-nested-content__help-text" ng-show="showHelpText"> <div class="umb-nested-content__help-text" ng-show="showHelpText">
<p> <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> <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>
<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> <localize key="content_nestedContentTemplateHelpTextPart1">Enter an angular expression to evaluate against each item for its name. Use</localize>
<code ng-non-bindable>{{$index}}</code> <code ng-non-bindable>{{$index}}</code>
<localize key="content_nestedContentTemplateHelpTextPart2">to display the item index</localize> <localize key="content_nestedContentTemplateHelpTextPart2">to display the item index</localize>