Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improvements to grid accessibility #6804

Merged
merged 11 commits into from
Jan 16, 2020
Merged

Improvements to grid accessibility #6804

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6bd73a3
feat: update umb-confirm-action to work with keyboard navigation
MMasey Jul 21, 2019
c68a2fe
wip: updating controls in grid.html to use button elements
MMasey Jul 21, 2019
818f55e
Fix "infinityMode" typo
kjac Aug 8, 2019
f4723a9
Merge branch 'v8/dev' into v8/feature/a11y-issue-60
MMasey Oct 21, 2019
75a441e
improvement: update item picker to use correct button markup
MMasey Oct 21, 2019
19a2a68
feat: focus on the new row when created in grid
MMasey Oct 21, 2019
6017a11
feat: add screen reader only text to add new row button in grid editor
MMasey Oct 21, 2019
c4adde9
Merge branch 'v8/dev' into pr/6804
nul800sebastiaan Oct 31, 2019
75550f0
Merge branch 'v8/dev' into pr/6804
nul800sebastiaan Nov 7, 2019
bb29bd4
Merge branch 'v8/contrib' into pr/6084
emmaburstow Jan 16, 2020
e5fbd9f
Merge branch 'v8/feature/a11y-issue-60' of https://github.com/MMasey/…
emmaburstow Jan 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlay.directive.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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)"></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)"></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
Loading