Improve the accessibility of the cog icon (#8206)

This commit is contained in:
Jan Skovgaard
2020-07-22 20:25:57 +02:00
committed by GitHub
parent 3441200a7f
commit bced145be6

View File

@@ -22,7 +22,7 @@
<div class="templates-preview"
ng-show="!model.value || model.value == ''">
<p><strong><localize key="grid_chooseLayout" /></strong></p>
<p><strong><localize key="grid_chooseLayout">Choose a layout</localize></strong></p>
<div class="preview-rows layout"
ng-repeat="template in model.config.items.templates"
@@ -83,7 +83,7 @@
<div class="umb-row-title">{{row.label || row.name}}</div>
<div class="umb-grid-has-config" ng-if="row.hasConfig && !sortMode">
<localize key="grid_settingsApplied" />
<p><localize key="grid_settingsApplied">Settings applied</localize></p>
</div>
</div>
@@ -138,24 +138,27 @@
<!-- disable drop overlay -->
<div class="drop-overlay -disable" ng-if="area.dropNotAllowed">
<i class="icon-delete drop-icon"></i>
<localize key="grid_contentNotAllowed" />
<i class="icon-delete drop-icon" aria-hidden="true"></i>
<p><localize key="grid_contentNotAllowed">This content is not allowed here</localize></p>
</div>
<!-- allow drop overlay -->
<div class="drop-overlay -allow" ng-if="area.dropOnEmpty">
<i class="icon-download drop-icon"></i>
<localize key="grid_contentAllowed" />
<i class="icon-download drop-icon" aria-hidden="true"></i>
<p><localize key="grid_contentAllowed">This content is allowed here</localize></p>
</div>
<div class="umb-grid-has-config" ng-if="area.hasConfig && !sortMode">
<localize key="grid_settingsApplied" />
<p>
<localize key="grid_settingsApplied">Settings applied</localize>
</p>
</div>
<div class="cell-tools" ng-if="(area === active || area === currentCellWithActiveChild) && !sortMode">
<div class="cell-tool" ng-click="editGridItemSettings(area, 'cell')">
<i class="icon-settings"></i>
</div>
<button type="button" aria-haspopup="true" class="btn-reset cell-tool" ng-click="editGridItemSettings(area, 'cell')">
<i class="icon-settings" aria-hidden></i>
<span class="sr-only">Open column settings</span>
</button>
</div>
<div class="umb-cell-inner" ui-sortable="sortableOptionsCell" umb-grid-hack-scope ng-model="area.controls">
@@ -163,8 +166,10 @@
<!-- Control placeholder -->
<button class="umb-cell-placeholder btn-reset" type="button" ng-if="area.controls.length === 0" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);">
<div class="cell-tools-add -center">
<localize ng-if="!sortMode" key="grid_addElement" />
<localize ng-if="sortMode" key="grid_dropElement" />
<p>
<localize ng-if="!sortMode" key="grid_addElement">Add content</localize>
<localize ng-if="sortMode" key="grid_dropElement">Drop element</localize>
</p>
</div>
</button>
@@ -226,7 +231,7 @@
<!-- if area is empty tools -->
<div class="umb-grid-add-more-content" ng-if="area.controls.length > 0 && !sortMode && (area.maxItems == undefined || area.maxItems == '' || area.maxItems == 0 || area.maxItems > area.controls.length)">
<button class="cell-tools-add -bar newbtn btn-reset" type="button" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);"><localize key="grid_addElement" /></button>
<button class="cell-tools-add -bar newbtn btn-reset" type="button" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);"><localize key="grid_addElement">Add element</localize></button>
</div>
</div>
@@ -266,7 +271,7 @@
<div class="templates-preview" ng-if="showRowConfigurations">
<p ng-hide="section.rows.length > 0"><strong><localize key="grid_addRows" /></strong></p>
<p ng-hide="section.rows.length > 0"><strong><localize key="grid_addRows">Add row</localize></strong></p>
<button class="preview-rows columns btn-reset"
ng-repeat="layout in section.$allowedLayouts"