Commit a211bfb4 authored by Thomas Greiner's avatar Thomas Greiner

Issue 2410 - Improved accessibility of dialogs in options page

parent 2c41cb6c
......@@ -300,14 +300,14 @@
</div>
<!-- Dialog -->
<div id="dialog">
<div id="dialog" role="dialog" aria-hidden="true">
<header>
<span id="dialog-title">
<span id="dialog-title-custom" class="i18n_options_dialog_custom_title"></span>
<span id="dialog-title-language" class="i18n_options_dialog_language_title"></span>
<span id="dialog-title-predefined" class="i18n_options_dialog_predefined_title"></span>
</span>
<button id="dialog-close" class="i18n_options_close" data-action="close-dialog"></button>
<button id="dialog-close" class="i18n_options_close focus-first" data-action="close-dialog"></button>
</header>
<div id="dialog-body" class="content">
<!-- Add language subscription -->
......@@ -321,9 +321,9 @@
</ul>
</div>
<div id="other-language" class="dialog-content-block">
<h3 class="i18n_options_dialog_language_other"></h3>
<div>
<input type="search" id="find-language" />
<label for="find-language" class="i18n_options_dialog_language_other"></label>
<input type="search" id="find-language" class="default-focus" />
</div>
<ul id="all-lang-table" class="table list">
<template>
......@@ -338,21 +338,15 @@
<!-- Add custom subscription -->
<div id="dialog-content-custom" class="dialog-content">
<div class="dialog-content-block">
<h3 class="i18n_options_dialog_custom_subscription_title"></h3>
<div>
<input id="blockingList-textbox" type="text" placeholder="www.example.com/blockinglist.txt" />
</div>
<div class="button-wrapper" data-action="import-subscription">
<span class="icon icon-arrow"></span>
<span class="i18n_options_dialog_custom_import"></span>
<label for="blockingList-textbox" class="i18n_options_dialog_custom_subscription_title"></label>
<input id="blockingList-textbox" type="text" class="default-focus" placeholder="www.example.com/blockinglist.txt" />
</div>
<button class="i18n_options_dialog_custom_import" data-action="import-subscription"></button>
</div>
<div class="dialog-content-block">
<h3 class="i18n_options_dialog_edit_own_list"></h3>
<div class="button-wrapper" data-action="close-dialog,switch-tab,edit-custom-filters" data-tab="advanced">
<span class="icon icon-arrow"></span>
<span class="i18n_options_dialog_create_own_list"></span>
</div>
<button class="i18n_options_dialog_create_own_list" data-action="close-dialog,switch-tab,edit-custom-filters" data-tab="advanced"></button>
</div>
</div>
<!-- Add predefined subscription -->
......@@ -360,13 +354,12 @@
<div class="dialog-content-block">
<h3></h3>
<div class="url"></div>
<div class="button-wrapper" data-action="add-predefined-subscription">
<span class="icon icon-arrow"></span>
<span class="i18n_options_dialog_predefined_confirm"></span>
</div>
<button class="i18n_options_dialog_predefined_confirm default-focus" data-action="add-predefined-subscription"></button>
</div>
</div>
</div>
<!-- Placeholder element to determine when to wrap focus around -->
<span class="focus-last" tabindex="0"></span>
</div>
</body>
</html>
......@@ -358,7 +358,7 @@
var title = dialog.querySelector("h3").textContent;
var url = dialog.querySelector(".url").textContent;
addEnableSubscription(url, title);
document.body.removeAttribute("data-dialog");
closeDialog();
break;
case "cancel-custom-filters":
E("custom-filters").classList.remove("mode-edit");
......@@ -367,7 +367,7 @@
E("whitelisting-textbox").value = "";
break;
case "close-dialog":
document.body.removeAttribute("data-dialog");
closeDialog();
break;
case "edit-custom-filters":
E("custom-filters").classList.add("mode-edit");
......@@ -376,7 +376,7 @@
case "import-subscription":
var url = E("blockingList-textbox").value;
addEnableSubscription(url);
document.body.removeAttribute("data-dialog");
closeDialog();
break;
case "open-dialog":
openDialog(element.getAttribute("data-dialog"));
......@@ -417,13 +417,18 @@
searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";
}
function isEnterPressed(e)
function getKey(e)
{
// e.keyCode has been deprecated so we attempt to use e.key
if ("key" in e)
return e.key == "Enter";
return e.keyCode == 13; // keyCode "13" corresponds to "Enter"
return e.key;
return getKey.keys[e.keyCode];
}
getKey.keys = {
9: "Tab",
13: "Enter",
27: "Escape"
};
// Initialize navigation sidebar
ext.backgroundPage.sendMessage(
......@@ -454,7 +459,7 @@
E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
E("whitelisting-textbox").addEventListener("keypress", function(e)
{
if (isEnterPressed(e))
if (getKey(e) == "Enter")
addWhitelistedDomain();
}, false);
......@@ -478,11 +483,56 @@
addCustomFilters();
}, false);
var customFilterEditButtons = document.querySelectorAll("#custom-filters-edit-wrapper button");
E("dialog").addEventListener("keydown", function(e)
{
switch (getKey(e))
{
case "Escape":
closeDialog();
break;
case "Tab":
if (e.shiftKey)
{
if (e.target.classList.contains("focus-first"))
{
e.preventDefault();
this.querySelector(".focus-last").focus();
}
}
else if (e.target.classList.contains("focus-last"))
{
e.preventDefault();
this.querySelector(".focus-first").focus();
}
break;
}
}, false);
}
var focusedBeforeDialog = null;
function openDialog(name)
{
var dialog = E("dialog");
dialog.setAttribute("aria-hidden", false);
dialog.setAttribute("aria-labelledby", "dialog-title-" + name);
document.body.setAttribute("data-dialog", name);
var defaultFocus = document.querySelector("#dialog-content-" + name
+ " .default-focus");
if (!defaultFocus)
defaultFocus = dialog.querySelector(".focus-first");
focusedBeforeDialog = document.activeElement;
defaultFocus.focus();
}
function closeDialog()
{
var dialog = E("dialog");
dialog.setAttribute("aria-hidden", true);
dialog.removeAttribute("aria-labelledby");
document.body.removeAttribute("data-dialog");
focusedBeforeDialog.focus();
}
function populateLists()
......
......@@ -479,7 +479,8 @@ div.button
.icon, .table input[type="checkbox"]::before, .table button.delete,
#content-help a::before, #dialog-close::before,
#custom-filters-add button::after
#custom-filters-add button::after,
#dialog-body button::before
{
background-image: url(options-sprite.png);
display: inline-block;
......@@ -509,8 +510,8 @@ div.button
width: 18px;
}
.icon-arrow,
#content-help a::before
#content-help a::before,
#dialog-body button::before
{
background-position: 0px -42px;
content: "";
......@@ -518,6 +519,8 @@ div.button
height: 11px;
vertical-align: middle;
width: 7px;
-moz-margin-end: 12px;
-webkit-margin-end: 12px;
}
.controls
......@@ -1000,9 +1003,11 @@ body[data-dialog] #dialog-background
margin: 4px 24px;
}
#dialog h3
#dialog h3,
#dialog label
{
font-size: 14px;
font-weight: 600;
margin: 0px;
}
......@@ -1045,22 +1050,18 @@ body[data-dialog] #dialog-background
padding: 12px 0px;
}
#dialog .button-wrapper
#dialog-body button
{
background-color: #F5F5F5;
border: none;
color: #3A7BA6;
cursor: pointer;
display: block;
font-family: inherit;
margin-top: 8px;
padding: 10px 16px;
cursor: pointer;
width: auto;
}
#dialog .button-wrapper span:not(.icon)
{
color: #3A7BA6;
display: inline-block;
-moz-margin-start: 15px;
-webkit-margin-start: 15px;
vertical-align: top;
text-align: initial;
width: 100%;
}
#dialog .url
......@@ -1083,6 +1084,10 @@ body:not([data-dialog]) #dialog
#other-language .button-add
{
background-color: transparent;
margin: 0px;
padding: 0px;
width: auto;
-webkit-border-end: 1px solid #CDCDCD;
-moz-border-end: 1px solid #CDCDCD;
-webkit-padding-end: 10px;
......@@ -1091,6 +1096,11 @@ body:not([data-dialog]) #dialog
-moz-padding-start: 0px;
}
#other-language .button-add::before
{
display: none;
}
#other-language .display
{
-webkit-margin-start: 10px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment