Accessibility enhancements: catching a11y errors with WAVE (#180)

* Added alt text for all images

* Added aria labels for most buttons that needed them. Added html language label

* Added remaining button labels

* Added remaining missing labels. Tagged <input> where labels made no sense as "aria-hidden=true"

* Fixed some of the low color contrast issues for Light theme

* Replaced broken ARIA link with a new ARIA label

* Fixed skipped heading levels

* Fixed missing fieldset and one orphaned label (combined the two)

* Changed the other orphaned label to a fieldset legend

* Removed color changes

* Added dynamic ARIA label for main Play/Pause button.
Removed the two FIXMEs in index.html

* Added default content to table header

* Changed input type from text to hidden for hidden inputs

* Added proper alt text for cover art

* Final version of the template row

* Added semantic markup to Page Regions

* Missing alt text + truncated alt text
- Added missing alt text for cover images in library and floating player.
- Added JS to truncate alt text for cover images that was too long.

* Sanitize the code

Co-authored-by: Terry Geng <terry@terriex.com>

web/js/util.js

@@ -16,3 +16,20 @@ export function secondsToStr(seconds) {
   const secs = seconds % 60;
   return ('00' + mins).slice(-2) + ':' + ('00' + secs).slice(-2);
 }
+
+export function coverArtString(title) {
+
+  let nameOfSong = "";
+  // The maximum length before we start truncating
+  const maxLength = 50;
+
+  if (title.length > maxLength) {
+    // Name = longTitleTooLongToBeAGoodAltTex...
+    nameOfSong = title.substr(0, maxLength) + "\u2026";
+  } else {
+    // Name = shortTitle
+    nameOfSong = title;
+  }
+
+  return 'Cover art for ' + nameOfSong;
+}