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>
This commit is contained in:
delvh 2023-04-11 09:26:18 +02:00 committed by GitHub
parent 7a8a4f5432
commit 91c8261e2c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 44 additions and 18 deletions

View file

@ -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);

View file

@ -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,