Skip to content

Commit

Permalink
Improvements to grid accessibility (#6804)
Browse files Browse the repository at this point in the history 
Happy to merge this one. It's a nice improvement. Great work Mmmmmmasey ;)
  • Loading branch information
@MMasey @emmaburstow
MMasey authored and emmaburstow committed Jan 16, 2020
1 parent ed53369 commit 1b3f809
Show file tree
Hide file tree
Showing 6 changed files with 49 additions and 28 deletions.
11 changes: 10 additions & 1 deletion src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlay.directive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,6 @@ Opens an overlay to show a custom YSOD. </br>
var unsubscribe = [];

function activate() {

setView();

setButtonText();
Expand Down Expand Up @@ -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) {
Expand Down
3 changes: 3 additions & 0 deletions src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,8 @@
}

.umb-grid .umb-row .umb-cell-placeholder {
display: block;
width: 100%;
min-height: 88px;
border-width: 1px;
border-style: dashed;
Expand Down Expand Up @@ -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;
Expand Down
15 changes: 6 additions & 9 deletions src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,13 @@ <h5><localize key="content_createFromClipboard">Paste from clipboard</localize><
</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>

Expand All @@ -35,15 +34,13 @@ <h5><localize key="content_createEmpty">Create new</localize></h5>
</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>
8 changes: 4 additions & 4 deletions src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
9 changes: 9 additions & 0 deletions src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
31 changes: 17 additions & 14 deletions src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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)"
Expand All @@ -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>
Expand All @@ -249,25 +249,28 @@

<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>

<div class="templates-preview" ng-if="showRowConfigurations">

<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">

Expand All @@ -285,7 +288,7 @@

<small>{{layout.label || layout.name}}</small>

</div> <!-- .templates-preview-rows -->
</button> <!-- .templates-preview-rows -->

</div> <!-- .templates-preview -->
<!-- column tools end -->
Expand Down

0 comments on commit 1b3f809

Please sign in to comment.