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

Fixing keyboard focus issues to new layout

Browse source
This commit is contained in:
Jonathan Kingston 2017-06-14 11:41:28 +01:00
parent fc789a49ac
commit c2ed5420a4
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: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'); background-image: url('/img/container-newtab.svg');
fill: #979797; fill: #979797;
filter: url('/img/filters.svg#fill'); filter: url('/img/filters.svg#fill');

9
webextension/js/popup.js
View file

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