OpenSource/mastodon
OpenSource/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2024-12-22 18:45:41 +01:00
Code Issues Projects Releases Packages Wiki Activity

fix: skip empty articles

Browse source 
When using keyboard navigation, the current code will be stumped by HTML
article elements that are empty. We now skip over them.
This commit is contained in:
Your Autistic Life 2023-10-25 12:36:08 -04:00
parent cc3ff66246
commit 3919319863
1 changed files with 21 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
app/javascript/mastodon/components/status_list.jsx
View file

@ -50,13 +50,11 @@ export default class StatusList extends ImmutablePureComponent {
};
handleMoveUp = (id, featured) => {
const elementIndex = this.getCurrentStatusIndex(id, featured) - 1;
this._selectChild(elementIndex, true);
this._selectChild(id, featured, true);
};
handleMoveDown = (id, featured) => {
const elementIndex = this.getCurrentStatusIndex(id, featured) + 1;
this._selectChild(elementIndex, false);
this._selectChild(id, featured, false);
};
handleLoadOlder = debounce(() => {
@ -64,18 +62,29 @@ export default class StatusList extends ImmutablePureComponent {
onLoadMore(lastId || (statusIds.size > 0 ? statusIds.last() : undefined));
}, 300, { leading: true });
_selectChild (index, align_top) {
_selectChild (id, featured, up) {
const align_top = up;
const container = this.node.node;
const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
const elementIndex = this.getCurrentStatusIndex(id, featured);
const increment = up ? -1 : 1
let index = elementIndex;
if (element) {
if (align_top && container.scrollTop > element.offsetTop) {
element.scrollIntoView(true);
} else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
element.scrollIntoView(false);
let element = null;
while (element === null) {
index += increment;
const article = container.querySelector(`article:nth-of-type(${index + 1})`);
if (article === null) {
return;
}
element.focus();
element = article.querySelector(".focusable");
}
if (align_top && container.scrollTop > element.offsetTop) {
element.scrollIntoView(true);
} else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
element.scrollIntoView(false);
}
element.focus();
}
setRef = c => {