Browse Source

[Glitch] Fix and refactor keyboard navigation in dropdown menus

Port 80182eda62 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
master^2
ThibG Thibaut Girka 1 year ago
parent
commit
ce33822e2c
2 changed files with 19 additions and 45 deletions
  1. +9
    -20
      app/javascript/flavours/glitch/components/dropdown_menu.js
  2. +10
    -25
      app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js

+ 9
- 20
app/javascript/flavours/glitch/components/dropdown_menu.js View File

@@ -68,20 +68,14 @@ class DropdownMenu extends React.PureComponent {
handleKeyDown = e => {
const items = Array.from(this.node.getElementsByTagName('a'));
const index = items.indexOf(document.activeElement);
let element;
let element = null;

switch(e.key) {
case 'ArrowDown':
element = items[index+1];
if (element) {
element.focus();
}
element = items[index+1] || items[0];
break;
case 'ArrowUp':
element = items[index-1];
if (element) {
element.focus();
}
element = items[index-1] || items[items.length-1];
break;
case 'Tab':
if (e.shiftKey) {
@@ -89,28 +83,23 @@ class DropdownMenu extends React.PureComponent {
} else {
element = items[index+1] || items[0];
}
if (element) {
element.focus();
e.preventDefault();
e.stopPropagation();
}
break;
case 'Home':
element = items[0];
if (element) {
element.focus();
}
break;
case 'End':
element = items[items.length-1];
if (element) {
element.focus();
}
break;
case 'Escape':
this.props.onClose();
break;
}

if (element) {
element.focus();
e.preventDefault();
e.stopPropagation();
}
}

handleItemKeyPress = e => {


+ 10
- 25
app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js View File

@@ -106,7 +106,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
const index = items.findIndex(item => {
return (item.name === name);
});
let element;
let element = null;

switch(e.key) {
case 'Escape':
@@ -117,18 +117,10 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
this.handleClick(e);
break;
case 'ArrowDown':
element = this.node.childNodes[index + 1];
if (element) {
element.focus();
this.handleChange(element.getAttribute('data-index'));
}
element = this.node.childNodes[index + 1] || this.node.firstChild;
break;
case 'ArrowUp':
element = this.node.childNodes[index - 1];
if (element) {
element.focus();
this.handleChange(element.getAttribute('data-index'));
}
element = this.node.childNodes[index - 1] || this.node.lastChild;
break;
case 'Tab':
if (e.shiftKey) {
@@ -136,28 +128,21 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
} else {
element = this.node.childNodes[index + 1] || this.node.firstChild;
}
if (element) {
element.focus();
this.handleChange(element.getAttribute('data-index'));
e.preventDefault();
e.stopPropagation();
}
break;
case 'Home':
element = this.node.firstChild;
if (element) {
element.focus();
this.handleChange(element.getAttribute('data-index'));
}
break;
case 'End':
element = this.node.lastChild;
if (element) {
element.focus();
this.handleChange(element.getAttribute('data-index'));
}
break;
}

if (element) {
element.focus();
this.handleChange(element.getAttribute('data-index'));
e.preventDefault();
e.stopPropagation();
}
}

setFocusRef = c => {


Loading…
Cancel
Save