Remove headers improperly used as labels

Closes #2558
Closes #2557

Co-Authored-By: Anonymus2000 <54113952+nil2000@users.noreply.github.com>

Author: Gerrit0

CHANGELOG.md

@@ -52,15 +52,18 @@
 -   Links added with the `navigationLinks` option are now moved into the pull out navigation on mobile displays, #2548.
 -   `@license` and `@import` comments will be ignored at the top of files, #2552.
 -   Fixed issue in documentation validation where constructor signatures where improperly considered not documented, #2553.
+-   The color theme label in the default theme now has an accessible name, #2557.
 -   Fixed issue where search results could not be navigated while Windows Narrator was on, #2563.
 -   `charset` is now correctly cased in `<meta>` tag generated by the default theme, #2568.
+-   Buttons to copy code now have the `type=button` attribute set to avoid being treated as submit buttons.
 -   `--hostedBaseUrl` will now implicitly add a trailing slash to the generated URL.
 
 ### Thanks!
 
 -   @Aryakoste
 -   @HarelM
 -   @kraenhansen
+-   @Nil2000
 
 # Unreleased
 

src/lib/output/themes/MarkedPlugin.tsx

@@ -133,7 +133,7 @@ export class MarkedPlugin extends ContextAwareRendererComponent {
                     return `<pre><code>${code}</code><button>Copy</button></pre>\n`;
                 }
 
-                return `<pre><code class="${escapeHtml(lang)}">${code}</code><button>Copy</button></pre>\n`;
+                return `<pre><code class="${escapeHtml(lang)}">${code}</code><button type="button">Copy</button></pre>\n`;
             },
         });
 

src/lib/output/themes/default/partials/navigation.tsx

@@ -83,14 +83,14 @@ export function settings(context: DefaultThemeRenderContext) {
                 <div class="tsd-accordion-details">
                     {visibilityOptions.length && (
                         <div class="tsd-filter-visibility">
-                            <h4 class="uppercase">{context.i18n.theme_member_visibility()}</h4>
-                            <form>
-                                <ul id="tsd-filter-options">{...visibilityOptions}</ul>
-                            </form>
+                            <span class="settings-label">{context.i18n.theme_member_visibility()}</span>
+                            <ul id="tsd-filter-options">{...visibilityOptions}</ul>
                         </div>
                     )}
                     <div class="tsd-theme-toggle">
-                        <h4 class="uppercase">{context.i18n.theme_theme()}</h4>
+                        <label class="settings-label" for="tsd-theme">
+                            {context.i18n.theme_theme()}
+                        </label>
                         <select id="tsd-theme">
                             <option value="os">{context.i18n.theme_os()}</option>
                             <option value="light">{context.i18n.theme_light()}</option>

static/style.css

@@ -302,10 +302,6 @@ h6 {
     margin: 2.33rem 0;
 }
 
-.uppercase {
-    text-transform: uppercase;
-}
-
 dl,
 menu,
 ol,
@@ -579,13 +575,13 @@ dl.tsd-comment-tag-group p {
 }
 .tsd-filter-input {
     display: flex;
-    width: fit-content;
     width: -moz-fit-content;
+    width: fit-content;
     align-items: center;
-    user-select: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
+    user-select: none;
     cursor: pointer;
 }
 .tsd-filter-input input[type="checkbox"] {
@@ -629,13 +625,18 @@ input[type="checkbox"]:checked ~ svg .tsd-checkbox-checkmark {
     stroke: var(--color-accent);
 }
 
-.tsd-theme-toggle {
-    padding-top: 0.75rem;
+.settings-label {
+    font-weight: bold;
+    text-transform: uppercase;
+    display: inline-block;
 }
-.tsd-theme-toggle > h4 {
-    display: inline;
-    vertical-align: middle;
-    margin-right: 0.75rem;
+
+.tsd-filter-visibility .settings-label {
+    margin: 0.75rem 0 0.5rem 0;
+}
+
+.tsd-theme-toggle .settings-label {
+    margin: 0.75rem 0.75rem 0 0;
 }
 
 .tsd-hierarchy {
@@ -814,10 +815,10 @@ a.tsd-index-link {
 }
 .tsd-accordion-summary,
 .tsd-accordion-summary a {
-    user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
+    user-select: none;
 
     cursor: pointer;
 }