- Don't use lambdas to return a function, use directly the function instead.
- Remove a hack for "Chrome 67 and earlier" since it was released in 2018.
- replace a lot of `let` with `const`
- inline some `querySelectorAll` calls
- reduce the scope of some variables
- use some ternaries where it makes sense
- inline one-line functions
Refactor away some trival usages of `.innerHTML`. Unfortunately, there is no way to
enabled trusted-types in report-only mode via `<meta>` tags, see
https://github.com/w3c/webappsec-csp/issues/277
The variable `triggers` is only used to check if in contains a particular
value. Given that the number of keyboard shortcuts is starting to be
significant, let's future-proof the performances and use a `Set` instead of an
`Array` instead.
There are a few things that need to be done, to make this work.
First, we need to register `Enter` as another hotkey that opens the
selected item.
However, by default the `KeyboardHandler` will override all default
actions. That might make sense for any other key, but for the `Enter`
key, we want to keep the default behavior (i.e. follow a selected link
or press a button). So for this single key event, we do not call
`preventDefault()`.
I see this as unproblematic for the following reasons.
1. With the changes from #2348, when we're in a list of items (articles,
categories, feeds), there is no link selected. This is what made the
`Enter` key work _implicitly_ in the past. With nothing selected, the
`Enter` key will do nothing by default.
2. If we have **any** link selected (including when we are in a view
with a list of selectable items), we'll get the default action of
`Enter` (i.e. follow a link), which is exactly what we had before.
Lastly, we need to update the list of keyboard shortcuts displayed when
pressing `?`.
This fixes#2366.
# Change HTML tag to button
Replace the link tag with an HTML button to prevent some screen readers from having confusing announcements. By using the HTML button, users can use the Enter and Space keys to activate actions by default, instead of implementing them in JavaScript.
# Differentiate links and buttons visually
When activating the link element, the user may expect the web page to navigate to the URL and the page will refresh; when activating the button element, the user may expect the web page to still be on the same page, so that their current state, such as: input value, won't disappear.
Links and buttons should have different styles visually, so that users can't expect what will happen when they activate a link or a button.
I added the underline to the links, because that is the common pattern. Buttons have border and background color in a common pattern. But I think that will change the current layout drastically. So I added the focus, hover and active classes to the buttons instead.
When the touchmove listener is registered with passive: false, scrolling
up on Firefox Android only works every other attempt. When scrolling
breaks, the touchmove callback is never invoked.
The passive flag was originally set to false as part of a fix to prevent
vertical scrolling while swiping: 3f31744911.
Setting passive to true doesn't seem to negatively affect that in both
Firefox and Chrome, but fixes the scoll up behavior on Firefox.
Fixes: #2053
Signed-off-by: Andrew Gunnerson <accounts+github@chiller3.com>
