a11y: Make 'Scroll to bottom' button accessible

Make sure a screen reader recognizes the button and can read a
descriptive name.

* add `aria-hidden` to the SVG element so it is igronred
* add a `span` with a readable text
* style the `span` to be invisible to eyes

At first, it seems like we should have a better way to do this kind of
accessibility, but this convoluted way of implementing it is indeed
the best-practice.

Author: borisyankov

src/webview/css/css.js

@@ -414,6 +414,13 @@ blockquote {
   border-radius: 50%;
   background: rgba(82, 194, 175, 0.5);
 }
+#scroll-bottom .text {
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+  position: absolute;
+  height: 1px;
+  width: 1px;
+}
 #scroll-bottom svg {
   width: 32px;
   height: 32px;

src/webview/html/htmlScrollToBottom.js

@@ -3,8 +3,9 @@ import template from './template';
 
 export default template`
 <div id="scroll-bottom" class="scroll-bottom hidden">
-  <a href="" class="scroll-bottom">
-    <svg class="scroll-bottom" width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <a href="" class="scroll-bottom" aria-hidden>
+    <span class="text">Scroll to bottom</span>
+    <svg class="scroll-bottom" width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg" aria-hidden>
       <path class="scroll-bottom" d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"/>
     </svg>
   </a>