Improvements to grid accessibility (#6804)
Happy to merge this one. It's a nice improvement. Great work Mmmmmmasey ;)
This commit is contained in:
Mike Masey
@@ -213,7 +213,6 @@ Opens an overlay to show a custom YSOD. </br>
|
||||
var unsubscribe = [];
|
||||
|
||||
function activate() {
|
||||
|
||||
setView();
|
||||
|
||||
setButtonText();
|
||||
@@ -247,10 +246,20 @@ Opens an overlay to show a custom YSOD. </br>
|
||||
|
||||
setOverlayIndent();
|
||||
|
||||
focusOnOverlayHeading()
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Ideally this would focus on the first natively focusable element in the overlay, but as the content can be dynamic, it is focusing on the heading.
|
||||
function focusOnOverlayHeading() {
|
||||
var heading = el.find(".umb-overlay__title");
|
||||
|
||||
if(heading) {
|
||||
heading.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function setView() {
|
||||
|
||||
if (scope.view) {
|
||||
|
||||
@@ -162,6 +162,8 @@
|
||||
}
|
||||
|
||||
.umb-grid .umb-row .umb-cell-placeholder {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 88px;
|
||||
border-width: 1px;
|
||||
border-style: dashed;
|
||||
@@ -226,6 +228,7 @@
|
||||
|
||||
.umb-grid .cell-tools-add.-bar {
|
||||
display: block;
|
||||
width: calc(100% - 20px);
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
border: 1px dashed @ui-action-discreet-border;
|
||||
|
||||
@@ -19,14 +19,13 @@
|
||||
</div>
|
||||
|
||||
<ul class="umb-card-grid" ng-class="{'-three-in-row': model.availableItems.length < 7, '-four-in-row': model.availableItems.length >= 7}">
|
||||
<li ng-repeat="pasteItem in model.pasteItems | filter:searchTerm"
|
||||
ng-click="model.clickPasteItem(pasteItem)">
|
||||
<a class="umb-card-grid-item" href="" title="{{ pasteItem.name }}">
|
||||
<li ng-repeat="pasteItem in model.pasteItems | filter:searchTerm">
|
||||
<button class="umb-card-grid-item btn-reset" ng-click="model.clickPasteItem(pasteItem)">
|
||||
<span>
|
||||
<i class="{{ pasteItem.icon }}"></i>
|
||||
{{ pasteItem.name | truncate:true:36 }}
|
||||
</span>
|
||||
</a>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -35,15 +34,13 @@
|
||||
</div>
|
||||
|
||||
<ul class="umb-card-grid" ng-class="{'-three-in-row': model.availableItems.length < 7, '-four-in-row': model.availableItems.length >= 7}">
|
||||
<li ng-repeat="availableItem in model.availableItems | compareArrays:model.selectedItems:'alias' | orderBy:model.orderBy | filter:searchTerm"
|
||||
ng-click="selectItem(availableItem)">
|
||||
<a class="umb-card-grid-item" href="" title="{{ availableItem.name }}">
|
||||
<li ng-repeat="availableItem in model.availableItems | compareArrays:model.selectedItems:'alias' | orderBy:model.orderBy | filter:searchTerm">
|
||||
<button class="umb-card-grid-item btn-reset" ng-click="selectItem(availableItem)">
|
||||
<span>
|
||||
<i class="{{ availableItem.icon }}"></i>
|
||||
{{ availableItem.name }}
|
||||
</span>
|
||||
</a>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -6,11 +6,11 @@
|
||||
'-left': direction === 'left'}"
|
||||
on-outside-click="clickCancel()">
|
||||
|
||||
<a class="umb_confirm-action__overlay-action -confirm" href="" ng-click="clickConfirm()" localize="title" title="@buttons_confirmActionConfirm">
|
||||
<button class="umb_confirm-action__overlay-action -confirm btn-reset" ng-click="clickConfirm()" localize="title" title="@buttons_confirmActionConfirm" type="button">
|
||||
<i class="icon-check"></i>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<a class="umb_confirm-action__overlay-action -cancel" href="" ng-click="clickCancel()" localize="title" title="@buttons_confirmActionCancel">
|
||||
<button class="umb_confirm-action__overlay-action -cancel btn-reset" ng-click="clickCancel()" localize="title" title="@buttons_confirmActionCancel" type="button">
|
||||
<i class="icon-delete"></i>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -402,6 +402,15 @@ angular.module("umbraco")
|
||||
|
||||
eventsService.emit("grid.rowAdded", { scope: $scope, element: $element, row: row });
|
||||
|
||||
// TODO: find a nicer way to do this without relying on setTimeout
|
||||
setTimeout(function () {
|
||||
var newRowEl = $element.find("[data-rowid='" + row.$uniqueId + "']");
|
||||
|
||||
if(newRowEl !== null) {
|
||||
newRowEl.focus();
|
||||
}
|
||||
}, 0);
|
||||
|
||||
};
|
||||
|
||||
$scope.removeRow = function (section, $index) {
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
</div>
|
||||
|
||||
<div class="cell-tools-remove row-tool">
|
||||
<i class="icon-trash" ng-click="togglePrompt(row)" localize="title" title="@delete"></i>
|
||||
<button class="icon-trash btn-reset" ng-click="togglePrompt(row)" type="button"></button>
|
||||
<umb-confirm-action
|
||||
ng-if="row.deletePrompt"
|
||||
direction="left"
|
||||
@@ -161,12 +161,12 @@
|
||||
<div class="umb-cell-inner" ui-sortable="sortableOptionsCell" umb-grid-hack-scope ng-model="area.controls">
|
||||
|
||||
<!-- Control placeholder -->
|
||||
<div class="umb-cell-placeholder" ng-if="area.controls.length === 0" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);">
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<!-- for each control in areas -->
|
||||
<div class="umb-control"
|
||||
@@ -196,11 +196,11 @@
|
||||
<div class="umb-tools" ng-if="control === active">
|
||||
|
||||
<div class="umb-control-tool" ng-if="control.editor.config.settings">
|
||||
<i class="umb-control-tool-icon icon-settings" ng-click="editGridItemSettings(control, 'control')"></i>
|
||||
<button class="umb-control-tool-icon icon-settings btn-reset" ng-click="editGridItemSettings(control, 'control')" type="button"></button>
|
||||
</div>
|
||||
|
||||
<div class="umb-control-tool">
|
||||
<i class="umb-control-tool-icon icon-trash" ng-click="togglePrompt(control)" localize="title" title="@delete"></i>
|
||||
<button class="umb-control-tool-icon icon-trash btn-reset" ng-click="togglePrompt(control)" type="button"></button>
|
||||
<umb-confirm-action ng-if="control.deletePrompt"
|
||||
direction="left"
|
||||
on-confirm="removeControl(area, $index)"
|
||||
@@ -226,7 +226,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)">
|
||||
<div class="cell-tools-add -bar newbtn" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);"><localize key="grid_addElement" /></div>
|
||||
<button class="cell-tools-add -bar newbtn btn-reset" type="button" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);"><localize key="grid_addElement" /></button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -249,14 +249,16 @@
|
||||
|
||||
<div class="umb-add-row" ng-if="!sortMode">
|
||||
|
||||
<a href=""
|
||||
class="iconBox"
|
||||
<button
|
||||
class="iconBox btn-reset"
|
||||
ng-click="toggleAddRow()"
|
||||
ng-if="!showRowConfigurations">
|
||||
|
||||
<i class=" icon icon-add" title="@general_add" localize="title"></i>
|
||||
|
||||
</a>
|
||||
<i class="icon icon-add" ></i>
|
||||
<span class="sr-only">
|
||||
<localize key="visuallyHiddenTexts_addNewRow">Add new role</localize>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -264,10 +266,11 @@
|
||||
|
||||
<p ng-hide="section.rows.length > 0"><strong><localize key="grid_addRows" /></strong></p>
|
||||
|
||||
<div class="preview-rows columns"
|
||||
<button class="preview-rows columns btn-reset"
|
||||
ng-repeat="layout in section.$allowedLayouts"
|
||||
ng-show="layout.areas.length > 0"
|
||||
ng-click="addRow(section, layout)">
|
||||
ng-click="addRow(section, layout)"
|
||||
type="button">
|
||||
|
||||
<div class="preview-row">
|
||||
|
||||
@@ -285,7 +288,7 @@
|
||||
|
||||
<small>{{layout.label || layout.name}}</small>
|
||||
|
||||
</div> <!-- .templates-preview-rows -->
|
||||
</button> <!-- .templates-preview-rows -->
|
||||
|
||||
</div> <!-- .templates-preview -->
|
||||
<!-- column tools end -->
|
||||
|
||||
Reference in New Issue
Block a user