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

Fix semantics and accessibility issues

Browse Source
This commit is contained in:
BatJan
2020-05-24 21:30:38 +02:00
committed by Sebastiaan Janssen
parent a70f95b4e5
commit dc5d418477
3 changed files with 58 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/Umbraco.Web.UI.Client/lib/bootstrap/less/type.less
View File

@@ -56,7 +56,7 @@ a.text-success:focus { color: darken(@successText, 10%); }
// Headings
// -------------------------
h1, h2, h3, h4, h5, h6 {
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
margin: (@baseLineHeight / 2) 0;
font-family: @headingsFontFamily;
font-weight: @headingsFontWeight;
@@ -70,21 +70,21 @@ h1, h2, h3, h4, h5, h6 {
}
}
h1,
h2,
h3 { line-height: @baseLineHeight * 2; }
h1, .h1,
h2, .h2,
h3, .h3 { line-height: @baseLineHeight * 2; }
h1 { font-size: @baseFontSize * 2.75; } // ~38px
h2 { font-size: @baseFontSize * 2.25; } // ~32px
h3 { font-size: @baseFontSize * 1.75; } // ~24px
h4 { font-size: @baseFontSize * 1.25; } // ~18px
h5 { font-size: @baseFontSize; }
h6 { font-size: @baseFontSize * 0.85; } // ~12px
h1, .h1 { font-size: @baseFontSize * 2.75; } // ~38px
h2, .h2 { font-size: @baseFontSize * 2.25; } // ~32px
h3, .h3 { font-size: @baseFontSize * 1.75; } // ~24px
h4, .h4 { font-size: @baseFontSize * 1.25; } // ~18px
h5, .h5 { font-size: @baseFontSize; }
h6, .h6 { font-size: @baseFontSize * 0.85; } // ~12px
h1 small { font-size: @baseFontSize * 1.75; } // ~24px
h2 small { font-size: @baseFontSize * 1.25; } // ~18px
h3 small { font-size: @baseFontSize; }
h4 small { font-size: @baseFontSize; }
h1 small, .h1 small { font-size: @baseFontSize * 1.75; } // ~24px
h2 small, .h2 small { font-size: @baseFontSize * 1.25; } // ~18px
h3 small, .h3 small { font-size: @baseFontSize; }
h4 small, .h4 small { font-size: @baseFontSize; }
// Page header

16
src/Umbraco.Web.UI.Client/src/less/main.less
View File

@@ -26,19 +26,29 @@
color: @gray-7;
}
h5{
h5, .h5{
color: @gray-1;
font-weight: bold;
font-size: 15px;
margin-top: 15px;
}
h5.-border-bottom {
h1.-border-bottom,
h2.-border-bottom,
h3.-border-bottom,
h4.-border-bottom,
h5.-border-bottom,
h6.-border-bottom {
border-bottom: 1px solid @gray-9;
padding-bottom: 5px;
}
h5.-black {
h1.-black,
h2.-black,
h3.-black,
h4.-black,
h5.-black,
h6.-black {
color: @black;
}

47
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
View File

@@ -34,16 +34,19 @@
<div ng-if="vm.loading === false && vm.showDataTypes === true">
<div ng-repeat="(key,value) in vm.dataTypes">
<h5>{{key | umbCmsTitleCase}}</h5>
<h2 class="h5">{{key | umbCmsTitleCase}}</h2>
<ul class="umb-card-grid -six-in-row">
<li ng-repeat="dataType in value | orderBy:'name'"
data-element="datatype-{{dataType.name}}">
<a class="umb-card-grid-item" href="" ng-click="vm.viewOptionsForEditor(dataType)" title="{{ dataType.name }}">
<li ng-repeat="dataType in value | orderBy:'name'" data-element="datatype-{{dataType.name}}">
<button
type="button"
class="btn-reset umb-card-grid-item"
ng-click="vm.viewOptionsForEditor(dataType)"
title="{{ dataType.name }}">
<span>
<i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
<i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}" aria-hidden="true"></i>
{{ dataType.name }}
</span>
</a>
</button>
</li>
</ul>
</div>
@@ -51,38 +54,50 @@
<!-- SEARCH RESULTS -->
<div ng-if="vm.loading === false && vm.showDataTypes === false && vm.searchResult !== null">
<h5 class="-border-bottom -black"><localize key="contentTypeEditor_searchResultSettings"></localize></h5>
<h2 class="h5 -border-bottom -black">
<localize key="contentTypeEditor_searchResultSettings">Available configurations</localize>
</h2>
<div ng-repeat="result in vm.searchResult.configs">
<div ng-if="result.entries.length > 0">
<h5>{{result.group | umbCmsTitleCase}}</h5>
<h3 class="h5">{{result.group | umbCmsTitleCase}}</h3>
<ul class="umb-card-grid -six-in-row">
<li ng-repeat="dataType in result.entries | orderBy:'name'"
ng-mouseover="vm.showDetailsOverlay(dataType)">
<div ng-if="dataType.loading" class="umb-card-grid-item__loading">
<div class="umb-button__progress"></div>
</div>
<a class="umb-card-grid-item" href="" ng-click="vm.pickDataType(dataType)" title="{{ dataType.name }}">
<button
type="button"
class="btn-reset umb-card-grid-item"
ng-click="vm.pickDataType(dataType)"
title="{{ dataType.name }}">
<span>
<i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
<i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}" aria-hidden="true"></i>
{{ dataType.name }}
</span>
</a>
</button>
</li>
</ul>
</div>
</div>
<h5 class="-border-bottom -black"><localize key="contentTypeEditor_searchResultEditors"></localize></h5>
<h2 class="h5 -border-bottom -black">
<localize key="contentTypeEditor_searchResultEditors">Create a new configuration</localize>
</h2>
<div ng-repeat="result in vm.searchResult.dataTypes">
<div ng-if="result.entries.length > 0">
<h5>{{result.group | umbCmsTitleCase}}</h5>
<h3 class="h5">{{result.group | umbCmsTitleCase}}</h3>
<ul class="umb-card-grid -six-in-row">
<li ng-repeat="dataType in result.entries | orderBy:'name'">
<a class="umb-card-grid-item" href="" ng-click="vm.pickEditor(dataType)" title="{{ dataType.name }}">
<button
type="button"
class="btn-reset umb-card-grid-item"
ng-click="vm.pickEditor(dataType)"
title="{{ dataType.name }}">
<span>
<i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
<i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}" aria-hidden="true"></i>
{{ dataType.name }}
</span>
</a>
</button>
</li>
</ul>
</div>