Add tooltips for MD editor buttons and add `muted` class for buttons (#23896)

Followup of #23876 according to my unreleased review demanding tooltips.
Additionally
- add a `muted` equivalent for buttons
- convert `switch to legacy` to an actual button
- enroll `switch to legacy` in the builtin pseudo focus cycle
- remove spaces between the buttons

The effect of the `muted` class is what you would expect: The button
loses all of its normal styling, and is defined only by its content instead.
This will help reduce a11y infractions in the future, as that was one of
the major points why people didn't use `<button>` tags and decided on a
bad fix (i.e. through `<div>`s) instead.

## Appearance

![image](https://user-images.githubusercontent.com/51889757/229510842-337378e5-faa5-4886-a910-08614c0c233d.png)

---------

Co-authored-by: silverwind <me@silverwind.io>

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 08b23e03878204619405289223468170d00e46fa..0a10b70d9daa1bb0d67d0d81d900e915a37f3b16 100644 (file)
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -120,6 +120,20 @@ footer = Footer
 footer.software = About Software
 footer.links = Links
 
+[editor]
+buttons.heading.tooltip = Add heading
+buttons.bold.tooltip = Add bold text
+buttons.italic.tooltip = Add italic text
+buttons.quote.tooltip = Quote text
+buttons.code.tooltip = Add code
+buttons.link.tooltip = Add a link
+buttons.list.unordered.tooltip = Add a bullet list
+buttons.list.ordered.tooltip = Add a numbered list
+buttons.list.task.tooltip = Add a list of tasks
+buttons.mention.tooltip = Mention a user or team
+buttons.ref.tooltip = Reference an issue or pull request
+buttons.switch_to_legacy.tooltip = Use the legacy editor instead
+
 [filter]
 string.asc = A - Z
 string.desc = Z - A

diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl
index 38c7a48a3abd484c75f58e87d20a4acc528f9f4f..0927249abd59ff9a7024318bc4bda7a77f527da0 100644 (file)
--- a/templates/shared/combomarkdowneditor.tmpl
+++ b/templates/shared/combomarkdowneditor.tmpl
@@ -19,29 +19,28 @@ Template Attributes:
        </div>
        {{end}}
        <div class="ui tab active" data-tab-panel="markdown-writer">
-               <markdown-toolbar class="gt-df">
+               <markdown-toolbar class="gt-df gt-ac gt-gap-3">
                        <div class="markdown-toolbar-group">
-                               <md-header class="markdown-toolbar-button">{{svg "octicon-heading"}}</md-header>
-                               <md-bold class="markdown-toolbar-button">{{svg "octicon-bold"}}</md-bold>
-                               <md-italic class="markdown-toolbar-button">{{svg "octicon-italic"}}</md-italic>
+                               <md-header role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.heading.tooltip"}}">{{svg "octicon-heading"}}</md-header>
+                               <md-bold role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.bold.tooltip"}}">{{svg "octicon-bold"}}</md-bold>
+                               <md-italic role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.italic.tooltip"}}">{{svg "octicon-italic"}}</md-italic>
                        </div>
                        <div class="markdown-toolbar-group">
-                               <md-quote class="markdown-toolbar-button">{{svg "octicon-quote"}}</md-quote>
-                               <md-code class="markdown-toolbar-button">{{svg "octicon-code"}}</md-code>
-                               <md-link class="markdown-toolbar-button">{{svg "octicon-link"}}</md-link>
+                               <md-quote role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.quote.tooltip"}}">{{svg "octicon-quote"}}</md-quote>
+                               <md-code role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.code.tooltip"}}">{{svg "octicon-code"}}</md-code>
+                               <md-link role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.link.tooltip"}}">{{svg "octicon-link"}}</md-link>
                        </div>
                        <div class="markdown-toolbar-group">
-                               <md-unordered-list class="markdown-toolbar-button">{{svg "octicon-list-unordered"}}</md-unordered-list>
-                               <md-ordered-list class="markdown-toolbar-button">{{svg "octicon-list-ordered"}}</md-ordered-list>
-                               <md-task-list class="markdown-toolbar-button">{{svg "octicon-tasklist"}}</md-task-list>
+                               <md-unordered-list role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.list.unordered.tooltip"}}">{{svg "octicon-list-unordered"}}</md-unordered-list>
+                               <md-ordered-list role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.list.ordered.tooltip"}}">{{svg "octicon-list-ordered"}}</md-ordered-list>
+                               <md-task-list role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.list.task.tooltip"}}">{{svg "octicon-tasklist"}}</md-task-list>
                        </div>
                        <div class="markdown-toolbar-group">
-                               <md-mention class="markdown-toolbar-button">{{svg "octicon-mention"}}</md-mention>
-                               <md-ref class="markdown-toolbar-button">{{svg "octicon-cross-reference"}}</md-ref>
+                               <md-mention role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.mention.tooltip"}}">{{svg "octicon-mention"}}</md-mention>
+                               <md-ref role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.ref.tooltip"}}">{{svg "octicon-cross-reference"}}</md-ref>
                        </div>
-                       <div class="markdown-toolbar-group gt-f1"></div>
-                       <div class="markdown-toolbar-group">
-                               <span class="markdown-toolbar-button markdown-switch-easymde">{{svg "octicon-arrow-switch"}}</span>
+                       <div class="markdown-toolbar-group gt-f1 gt-je">
+                       <button class="markdown-toolbar-button markdown-switch-easymde btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.switch_to_legacy.tooltip"}}">{{svg "octicon-arrow-switch"}}</button>
                        </div>
                </markdown-toolbar>
                <text-expander keys=": @">

diff --git a/web_src/css/base.css b/web_src/css/base.css
index c48a36c8547640210d2ba4014925b86a3a4ecf15..7640f15244e0df2771e1541f02c57cb011df86be 100644 (file)
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -328,14 +328,27 @@ progress::-moz-progress-bar {
   user-select: none;
 }
 
+.btn-link {
+  background: none;
+  border: none;
+  color: var(--color-primary);
+}
+
+a:hover,
+.btn-link:hover {
+  text-decoration: underline;
+}
+
 a,
-.ui.breadcrumb a {
+.ui.breadcrumb a,
+.btn-link {
   color: var(--color-primary);
   cursor: pointer;
   text-decoration-skip-ink: all;
 }
 
 a.muted,
+.btn-link.muted,
 .muted-links a {
   color: inherit;
 }
@@ -343,6 +356,7 @@ a.muted,
 a:hover,
 a.muted:hover,
 a.muted:hover [class*="color-text"],
+.btn-link.muted:hover,
 .muted-links a:hover,
 .ui.breadcrumb a:hover {
   color: var(--color-primary);

diff --git a/web_src/css/editor-markdown.css b/web_src/css/editor-markdown.css
index 1a09b5d59670a24aad6c73672693ab8701e4894b..df3f756c570e9a708dcf5356e11c69a124fdfe70 100644 (file)
--- a/web_src/css/editor-markdown.css
+++ b/web_src/css/editor-markdown.css
@@ -9,13 +9,12 @@
 }
 
 .combo-markdown-editor .markdown-toolbar-group {
-  display: inline-block;
+  display: flex;
 }
 
 .combo-markdown-editor .markdown-toolbar-button {
   user-select: none;
   padding: 5px;
-  cursor: pointer;
 }
 
 .ui.form .combo-markdown-editor textarea.markdown-text-editor,