Discussion on: Fixing dev.to accessibility [part 1] - 4 fixes that would take less than 10 minutes!

View post

For number 4 did you know there are keyboard shortcuts? You can press j and k to navigate between articles more easily. But tabbing with take you to each area within the post tile (this is also how twitter does it).

GrahamTheDev • Mar 25 '21

Yes but only through mashing buttons! It was only when you just said it then I realised you followed twitter pattern (or should I say the gmail pattern taken from some old editor in the 80s!), didn't even click 🤣

Also discovered the shortcut to search with ? but I have not discovered anything else?

Is there a page with shortcuts on as I could not find it? If there is then I will include that in my next article!

Also I feel there there is some key combination to change the number of articles jumped at a time with j and k hidden somewhere as I have managed to make it jump by 2 articles and 5 articles at a time but only by accident! Or is that some strange bug I discovered!

I approach everything as if I do not know any key combinations, hence the arrow key suggestion (which will also have a toggle) as that would be logical for 99% of people.

However perhaps that approach is not correct for a site that is likely to attract an unusually high proportion of power users, so I may need to curb my general thoughts on things.

I look forward to any input you have on my suggestions for anything that is best judgement!

Andrew Bone • Mar 25 '21

There is currently a bug that caused the the shortcuts to compound. It's actually a side effect of this issue

Preact Components not unmounting due to InstantClick page lifecycle events. #11458

nickytonline posted on Nov 17, 2020

Describe the bug

I know how to fix it @reobin . I will create an issue and put a PR up for it. We need to explicitly call unmountComponentAtNode in an InstantClick.on('change', () => {}) event. This is something that normally we wouldn't have to do, but because we use InstantClick, it's necessary. It also explains why I saw components repeated in the Preact dev tools.

I need to do it for pretty much all out components that get mounted via render. e.g.

import { h, render } from 'preact';
import { unmountComponentAtNode } from 'preact/compat';
import { Search } from '../Search';
import 'focus-visible';

document.addEventListener('DOMContentLoaded', () => {
  const root = document.getElementById('header-search');

  render(<Search />, root);

  InstantClick.on('change', () => {
    unmountComponentAtNode(root);
  });
});

To Reproduce

You will not see this behaviour as it's something under the hood. It manifests itself in an issue like #11371

Expected behavior

Preact components should be unmounted when an InstantClick even changes the page.

Screenshots

Desktop (please complete the following information):

OS, version:
Browser, version:

Smartphone (please complete the following information):

Device:
OS, version:
Browser, version:

Additional context

View on GitHub

I wrote an article asking how we can get better discoverability the other day but as of yet there is not a list of shortcuts.

Just press / should take you to the search, I think shift + / is still calling / functions though, I'd like ? to open a list of shortcuts one day 😅

forem.dev/link2twenty/keyboard-sho...

GrahamTheDev • Mar 25 '21

You know I should really look through all the bugs in the repo shouldn’t I lol!

Saying that it is way more fun having you “swat me down” on things that are already known 🤣🤣😜

Andrew Bone • Mar 26 '21

? no longer initiates search. That's one step closer