Add Keyboard Shortcuts Legend (#5823)

* Add Keyboard Shortcuts Legend

Adds a "Keyboard Shortcuts" legend (displayed in the rightmost column)
which is toggled via a new "?" hotkey. When subsequently pressed from
the Keyboard Shortcuts legend, "?" will navigate back to the previous
location.

* Add hidden table headings.

Makes the headings available for accessibility but hides them visually.

1 files changed, 21 insertions, 0 deletions

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index f4ad66271..80060a00f 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -2099,6 +2099,27 @@
   }
 }
 
+.keyboard-shortcuts {
+  padding: 8px 0 0;
+  overflow: hidden;
+
+  thead {
+    position: absolute;
+    left: -9999px;
+  }
+
+  td {
+    padding: 0 10px 8px;
+  }
+
+  code {
+    display: inline-block;
+    padding: 3px 5px;
+    background-color: lighten($ui-base-color, 8%);
+    border: 1px solid darken($ui-base-color, 4%);
+  }
+}
+
 .setting-text {
   color: $ui-primary-color;
   background: transparent;