Better keyboard support for JS-powered links

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Better keyboard support on JS-powered links (delete/cancel upload buttons)
+ - rather than make the `keypress` event trigger the `click` event, just set an `href` and `click` magically works
+
 ## [v0.2.1] - 2022-01-21
 
 ### Added

bobashare-web/static/js/upload.js

@@ -69,9 +69,6 @@ window.onload = () => {
  req.onreadystatechange = null;
  req.abort();
  }
- cancelElem.onkeypress = event => {
- if (event.key === "Enter") cancelElem.click();
- }
  req.onabort = () => {
  const cancelTmpl = fileCancelledTemplate.content.cloneNode(true);
  cancelTmpl.querySelector(".upload-filename").innerText = file.name;
@@ -116,9 +113,6 @@ window.onload = () => {
  }
  }
  }
- deleteLink.onkeypress = event => {
- if (event.key === "Enter") deleteLink.click();
- }
  } else {
  const failTmpl = fileFailTemplate.content.cloneNode(true);
  failTmpl.querySelector(".upload-filename").innerText = file.name;

bobashare-web/templates/upload.html.jinja

@@ -18,15 +18,15 @@
  <div class="upload-filename"></div>
  <div class="upload-progress-right">
  <div class="upload-progress"></div>
- <a class="upload-cancel" tabindex="0">Cancel</a>
+ <a href="javascript:void(0)" class="upload-cancel">Cancel</a>
  </div>
  <div class="upload-progress-bar"></div>
  </div>
  </template>
  <template id="upload-success-template">
  <div class="upload-file success">
- <a class="upload-filename" target="_blank"></a>
- <a class="upload-delete" tabindex="0">Delete</a>
+ <a class="upload-filename" target="_blank"></a> {# will be given an href by JS #}
+ <a href="javascript:void(0)" class="upload-delete">Delete</a>
  </div>
  </template>
  <template id="upload-deleted-template">