rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #581 from jonathanKingston/keyboard-focus

Browse source 
Fixing keyboard focus issues to new layout
This commit is contained in:
luke crouch 2017-06-14 11:27:37 -05:00 • committed by GitHub
commit be8f6bbe7c
2 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
webextension/css/popup.css
View file

@ -597,7 +597,8 @@ span ~ .panel-header-text {
}
.container-panel-row:hover .clickable .usercontext-icon,
.container-panel-row:focus .clickable .usercontext-icon {
.container-panel-row:focus .clickable .usercontext-icon,
.container-panel-row .clickable:focus .usercontext-icon {
background-image: url('/img/container-newtab.svg');
fill: #979797;
filter: url('/img/filters.svg#fill');

9
webextension/js/popup.js
View file

@ -398,13 +398,13 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
function next() {
const nextElement = element.nextElementSibling;
if (nextElement) {
nextElement.focus();
nextElement.querySelector("td[tabindex=0]").focus();
}
}
function previous() {
const previousElement = element.previousElementSibling;
if (previousElement) {
previousElement.focus();
previousElement.querySelector("td[tabindex=0]").focus();
}
}
switch (e.keyCode) {
@ -487,10 +487,9 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
tr.classList.add("container-panel-row");
tr.setAttribute("tabindex", "0");
context.classList.add("userContext-wrapper", "open-newtab", "clickable");
manage.classList.add("show-tabs", "pop-button");
context.setAttribute("tabindex", "0");
context.innerHTML = escaped`
<div class="userContext-icon-wrapper open-newtab">
<div class="usercontext-icon"
@ -539,7 +538,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
however it allows us to have a tabindex before the first selected item
*/
const focusHandler = () => {
list.querySelector("tr").focus();
list.querySelector("tr .clickable").focus();
document.removeEventListener("focus", focusHandler);
};
document.addEventListener("focus", focusHandler);