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

Grid editors: Accessibility improvements (#9051)

Browse Source 
* Change div and img with ng-click events to be buttons and add a label for the caption input field

* Change back to old way of inserting icon

* Fix semantics and adjust styling

* Fix a11y and semantics

Co-authored-by: Nathan Woulfe <nathan@nathanw.com.au>
This commit is contained in:
Jan Skovgaard
2020-12-03 00:42:39 +01:00
committed by GitHub
parent 8d681f14c0
commit 9e6b2f7449
6 changed files with 33 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
View File

@@ -392,7 +392,7 @@
// EDITOR PLACEHOLDER
// -------------------------
.umb-grid .umb-editor-placeholder {
min-height: 65px;
min-height: 110px;
padding: 20px;
padding-bottom: 30px;
position: relative;
@@ -400,7 +400,7 @@
border: 4px dashed @gray-8;
text-align: center;
text-align: -moz-center;
cursor: pointer;
width: 100%;
}
.umb-grid .umb-editor-placeholder i {
@@ -413,6 +413,7 @@
.umb-grid .umb-editor-preview {
position: relative;
width: 100%;
.umb-editor-preview-overlay {
cursor: pointer;

14
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.html
View File

@@ -1,13 +1,13 @@
<div ng-controller="Umbraco.PropertyEditors.Grid.EmbedController">
<div class="umb-editor-placeholder" ng-click="setEmbed()" ng-if="trustedValue === null">
<button type="button" class="btn-reset umb-editor-placeholder" ng-click="setEmbed()" ng-if="trustedValue === null">
<i class="icon icon-movie-alt"></i>
<div class="help-text"><localize key="grid_clickToEmbed">Click to embed</localize></div>
</div>
<span class="help-text"><localize key="grid_clickToEmbed">Click to embed</localize></span>
</button>
<div class="umb-editor-preview" ng-if="control.value" ng-click="setEmbed()">
<div class="umb-editor-preview-overlay"></div>
<div ng-bind-html="trustedValue"></div>
</div>
<button type="button" class="btn-reset umb-editor-preview" ng-if="control.value" ng-click="setEmbed()">
<span class="umb-editor-preview-overlay"></span>
<span ng-bind-html="trustedValue"></span>
</button>
</div>

21
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.html
View File

@@ -1,16 +1,13 @@
<div ng-controller="Umbraco.PropertyEditors.Grid.MacroController">
<div class="umb-editor-placeholder" ng-click="setMacro()">
<div ng-if="!preview">
<button type="button" class="btn-reset umb-editor-placeholder" ng-click="setMacro()">
<span ng-if="!preview">
<i class="icon icon-settings-alt"></i>
<div class="help-text">{{title}}</div>
</div>
<div ng-if="preview">
<div
ng-if="preview" style="text-align: left; pointer-events: none; cursor: default;"
ng-bind-html="preview">
</div>
</div>
</div>
<span class="help-text">{{title}}</span>
</span>
<span ng-if="preview" style="text-align: left; pointer-events: none; cursor: default;"
ng-bind-html="preview">
</span>
</button>
</div>

21
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.html
View File

@@ -1,16 +1,19 @@
<div ng-controller="Umbraco.PropertyEditors.Grid.MediaController">
<div class="umb-editor-placeholder" ng-click="setImage()" ng-if="control.value === null">
<button type="button" class="btn-reset umb-editor-placeholder" ng-click="setImage()" ng-if="control.value === null">
<i class="icon icon-picture"></i>
<div ng-id="!control.$inserted" class="help-text"><localize key="grid_clickToInsertImage">Click to insert image</localize></div>
</div>
<span ng-id="!control.$inserted" class="help-text">
<localize key="grid_clickToInsertImage">Click to insert image</localize>
</span>
</button>
<div ng-if="thumbnailUrl !== null">
<img
ng-click="setImage()"
ng-src="{{thumbnailUrl}}"
class="fullSizeImage" />
<input type="text" class="caption" ng-model="control.value.caption" localize="placeholder" placeholder="@grid_placeholderImageCaption" />
<button type="button" class="btn-reset" ng-click="setImage()">
<img ng-src="{{thumbnailUrl}}" class="fullSizeImage" alt="" />
</button>
<label class="sr-only" for="grid-media-{{control.value.id}}">
<localize key="visuallyHiddenTexts_addImageCaption">Add image caption</localize>
</label>
<input id="grid-media-{{control.value.id}}" type="text" class="caption" ng-model="control.value.caption" localize="placeholder" placeholder="@grid_placeholderImageCaption" />
</div>
</div>