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

Accessibility: Adding label fors and control ids for the macro picker (#10101)

Browse Source 
* Added support for screeen reader alerts on the embed so that assitive technology knows when a url retrieve has been succesfull.
Added labels for the controls
Preview reload only triggered if the values for height and width change

* Added support for label fors for the macro picker and also gave the ,acro search box a title

* Now displays a count of the matching macros returned. Please note the language file amends shared with #10100

* Removed src-only class for the display of the count of messages
This commit is contained in:
Rachel Breeze
2021-04-10 01:34:18 +01:00
committed by GitHub
parent b0592f1126
commit e21cc6f97e
2 changed files with 40 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.controller.js
View File

@@ -1,12 +1,13 @@
function MacroPickerController($scope, entityResource, macroResource, umbPropEditorHelper, macroService, formHelper, localizationService) {
$scope.macros = [];
$scope.a11yInfo = "";
$scope.model.selectedMacro = null;
$scope.model.macroParams = [];
$scope.displayA11YMessageForFilter = displayA11YMessageForFilter;
$scope.wizardStep = "macroSelect";
$scope.noMacroParams = false;
$scope.model.searchTerm = "";
function onInit() {
if (!$scope.model.title) {
localizationService.localize("defaultdialogs_selectMacro").then(function (value) {
@@ -49,6 +50,7 @@ function MacroPickerController($scope, entityResource, macroResource, umbPropEdi
$scope.model.submit($scope.model);
} else {
$scope.wizardStep = 'macroSelect';
displayA11yMessages($scope.macros);
}
} else {
@@ -95,6 +97,28 @@ function MacroPickerController($scope, entityResource, macroResource, umbPropEdi
});
}
function displayA11yMessages(macros) {
if ($scope.noMacroParams || !macros || macros.length === 0)
localizationService.localize("general_searchNoResult").then(function (value) {
$scope.a11yInfo = value;
});
else if (macros) {
if (macros.length === 1) {
localizationService.localize("treeSearch_searchResult").then(function(value) {
$scope.a11yInfo = "1 " + value;
});
} else {
localizationService.localize("treeSearch_searchResults").then(function (value) {
$scope.a11yInfo = macros.length + " " + value;
});
}
}
}
function displayA11YMessageForFilter() {
var macros = _.filter($scope.macros, v => v.name.toLowerCase().includes($scope.model.searchTerm.toLowerCase()));
displayA11yMessages(macros);
}
//here we check to see if we've been passed a selected macro and if so we'll set the
//editor to start with parameter editing
if ($scope.model.dialogData && $scope.model.dialogData.macroData) {
@@ -141,10 +165,11 @@ function MacroPickerController($scope, entityResource, macroResource, umbPropEdi
//we don't have a pre-selected macro so ensure the correct step is set
$scope.wizardStep = 'macroSelect';
}
displayA11yMessages($scope.macros);
});
onInit();
}
angular.module("umbraco").controller("Umbraco.Overlays.MacroPickerController", MacroPickerController);

24
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html
View File

@@ -16,18 +16,18 @@
<div ng-switch="wizardStep">
<div ng-switch-when="macroSelect" class="macro-select">
<umb-search-filter
input-id="macro-search"
model="searchTerm"
label-key="placeholders_filter"
text="Type to filter..."
css-class="w-100 mb-15"
auto-focus="true">
<label for="macro-search" class="sr-only">{{model.title}}</label>
<umb-search-filter input-id="macro-search"
model="model.searchTerm"
label-key="placeholders_filter"
text="Type to filter..."
css-class="w-100 mb-15"
on-change="displayA11YMessageForFilter()"
auto-focus="true">
</umb-search-filter>
<p ng-bind="a11yInfo" role="alert"></p>
<ul class="umb-card-grid -three-in-row">
<li ng-repeat="availableItem in macros | orderBy:'name' | filter:searchTerm">
<li ng-repeat="availableItem in macros | orderBy:'name' | filter:model.searchTerm">
<button class="btn-reset umb-card-grid-item" title="{{availableItem.name}}" ng-click="selectMacro(availableItem)">
<span>
<i class="icon-settings-alt" aria-hidden="true"></i>
@@ -38,7 +38,7 @@
</ul>
<umb-empty-state ng-if="nomacros"
position="center">
position="center">
<localize key="defaultdialogs_noMacros">
There are no macros available to insert
</localize>
@@ -53,7 +53,7 @@
<li ng-repeat="param in model.macroParams">
<ng-form name="parameterForm">
<umb-control-group label="{{param.name}}">
<umb-control-group label="{{param.name}}" alias="{{param.alias}}">
<umb-property-editor model="param"></umb-property-editor>
</umb-control-group>
</ng-form>