Merge pull request #1847 from cryptpad/notification-dismiss-button

Documentation notification can be dismissed via keyboard

customize.dist/messages.js

@@ -134,6 +134,7 @@ define(req, function(AppConfig, Default, Language) {
         }
     };
 
+    Messages.help_close_button = 'Close help notification'; // XXX
     // XXX
     Messages.badges_admin = "Instance administrator";
     Messages.badges_moderator = "Instance moderator";

customize.dist/src/less2/include/help.less

@@ -5,6 +5,7 @@
  */
 
 @import (reference) "./colortheme-all.less";
+@import (reference) "./variables.less";
 
 .help_main () {
     --LessLoader_require: LessLoader_currentFile();
@@ -15,17 +16,21 @@
         position: relative;
         background-color: @cp_help-bg;
         max-height: 50%;
-        overflow-y: auto;
         &.cp-help-hidden {
             display: none;
         }
 
         .cp-help-close {
+            background: none;
+            border: none;
             position: absolute;
             color: @cryptpad_text_col;
             top: 5px;
             right: 5px;
-            cursor: pointer;
+            &:focus-visible {
+                outline: @variables_focus_style;
+                border-radius: @variables_radius;
+            }
         }
         .cp-help-text {
             color: @cp_help-fg;
@@ -34,6 +39,10 @@
             a {
                 color: @cp_help-link;
                 text-decoration: underline;
+                &:focus-visible {
+                    outline: @variables_focus_style;
+                    border-radius: @variables_radius;
+                }
             }
             h1 {
                 font-size: 20px;

www/common/common-ui-elements.js

@@ -1412,14 +1412,16 @@ define([
 
         common.fixLinks(text);
 
-        var closeButton = h('span.cp-help-close.fa.fa-times');
+        var closeButton = h('button.cp-help-close.fa.fa-times', {
+            title: Messages.help_close_button
+        });
         var $toolbarButton = common.createButton('', true, {
             text: Messages.help_button,
             name: 'help'
         }).addClass('cp-toolbar-button-active');
         var help = h('div.cp-help-container', [
-            closeButton,
-            text
+            text,
+            closeButton
         ]);
 
         $toolbarButton.attr('title', Messages.show_help_button);