From 5f7601795aea8bd1ab1080f3004b142934981f53 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 14 Sep 2022 15:56:24 +0200
Subject: [PATCH 01/25] add heading classes

---
 client/src/style/scss/ui.scss | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index 4437da080b7..f018f87a339 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -477,3 +477,20 @@ $ui-margin-horizontal-large: $margin-v * 2;
 .flex-gapx-1 {
     column-gap: 0.25rem;
 }
+
+/* Heading Sizes */
+.h-large {
+    font-size: $h1-font-size;
+}
+
+.h-medium {
+    font-size: $h2-font-size;
+}
+
+.h-small {
+    font-size: $h3-font-size;
+}
+
+.h-text {
+    font-size: $font-size-base;
+}

From 74ea3649ba3aa0fbc22b3c88a3119f0f96b08783 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 14 Sep 2022 15:56:41 +0200
Subject: [PATCH 02/25] change heading default sizes

---
 client/src/style/scss/theme/blue.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/style/scss/theme/blue.scss b/client/src/style/scss/theme/blue.scss
index 3e0c3282cbf..b9a69531795 100644
--- a/client/src/style/scss/theme/blue.scss
+++ b/client/src/style/scss/theme/blue.scss
@@ -88,10 +88,10 @@ $font-size-base: 0.85rem; // default 1rem
 
 // Header font sizes
 $h1-font-size: $font-size-base * 2; // default 2.5
-$h2-font-size: $font-size-base * 1.75; // default 2
-$h3-font-size: $font-size-base * 1.5; // default 1.75
-$h4-font-size: $font-size-base * 1.25; // default 1.5
-$h5-font-size: $font-size-base; // default 1.25
+$h2-font-size: $font-size-base * 1.5; // default 2
+$h3-font-size: $font-size-base * 1.25; // default 1.75
+$h4-font-size: $font-size-base; // default 1.5
+$h5-font-size: $font-size-base * 0.9; // default 1.25
 $h6-font-size: $font-size-base * 0.85; // default 1
 
 // Increase contrast of dropdown items

From 8b200f7b499ad04d56ee115d0f138a9114862b9c Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 14 Sep 2022 15:56:57 +0200
Subject: [PATCH 03/25] add heading component

---
 client/src/components/Common/Heading.vue | 81 ++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 client/src/components/Common/Heading.vue

diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
new file mode 100644
index 00000000000..ae16bf2fae2
--- /dev/null
+++ b/client/src/components/Common/Heading.vue
@@ -0,0 +1,81 @@
+<script setup>
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+let element = "h1";
+let sizeClass = "h-large";
+
+const props = defineProps({
+    h1: Boolean,
+    h2: Boolean,
+    h3: Boolean,
+    h4: Boolean,
+    h5: Boolean,
+    h6: Boolean,
+    bold: Boolean,
+    separator: Boolean,
+    // acceptable sizes are "large", "medium", "small", and "text"
+    size: String,
+    icon: String,
+});
+
+for (const key of ["h1", "h2", "h3", "h4", "h5", "h6"]) {
+    if (props[key]) {
+        element = key;
+        break;
+    }
+}
+
+if (props.size) {
+    sizeClass = "h-" + props.size;
+}
+</script>
+
+<template>
+    <div v-if="props.separator" class="separator heading" :class="[sizeClass, props.bold ? 'font-weight-bold' : '']">
+        <FontAwesomeIcon v-if="props.icon" :icon="props.icon" />
+        <div v-else class="stripe"></div>
+        <component :is="element" :class="sizeClass">
+            <slot />
+        </component>
+        <div class="stripe"></div>
+    </div>
+    <component v-else :is="element" class="heading" :class="[sizeClass, props.bold ? 'font-weight-bold' : '']">
+        <FontAwesomeIcon v-if="props.icon" :icon="props.icon" />
+        <slot />
+    </component>
+</template>
+
+<style lang="scss" scoped>
+@import "scss/theme/blue.scss";
+
+.heading::v-deep > svg {
+    font-size: 0.75em;
+}
+
+// prettier-ignore
+h1, h2, h3, h4, h5, h6 {
+    display: flex;
+    align-items: center;
+    gap: 0.25em;
+}
+
+.separator {
+    display: grid;
+    grid-template-columns: auto auto 1fr;
+    gap: 0.25em;
+    align-items: center;
+    margin-bottom: 0.5rem;
+
+    // prettier-ignore
+    h1, h2, h3, h4, h5, h6 {
+        margin: 0;
+    }
+
+    .stripe {
+        display: block;
+        height: 1px;
+        background-color: $brand-secondary;
+        min-width: 1rem;
+    }
+}
+</style>

From 11b238dbd79ee44ef0965c657f7d4d0e9dfece35 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 15 Sep 2022 10:54:46 +0200
Subject: [PATCH 04/25] add inline prop

---
 client/src/components/Common/Heading.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
index ae16bf2fae2..2b0cc87eb22 100644
--- a/client/src/components/Common/Heading.vue
+++ b/client/src/components/Common/Heading.vue
@@ -13,11 +13,13 @@ const props = defineProps({
     h6: Boolean,
     bold: Boolean,
     separator: Boolean,
+    inline: Boolean,
     // acceptable sizes are "large", "medium", "small", and "text"
     size: String,
     icon: String,
 });
 
+// apply heading element
 for (const key of ["h1", "h2", "h3", "h4", "h5", "h6"]) {
     if (props[key]) {
         element = key;
@@ -25,6 +27,7 @@ for (const key of ["h1", "h2", "h3", "h4", "h5", "h6"]) {
     }
 }
 
+// apply size class
 if (props.size) {
     sizeClass = "h-" + props.size;
 }
@@ -39,7 +42,11 @@ if (props.size) {
         </component>
         <div class="stripe"></div>
     </div>
-    <component v-else :is="element" class="heading" :class="[sizeClass, props.bold ? 'font-weight-bold' : '']">
+    <component
+        v-else
+        :is="element"
+        class="heading"
+        :class="[sizeClass, props.bold ? 'font-weight-bold' : '', props.inline ? 'inline' : '']">
         <FontAwesomeIcon v-if="props.icon" :icon="props.icon" />
         <slot />
     </component>
@@ -57,6 +64,10 @@ h1, h2, h3, h4, h5, h6 {
     display: flex;
     align-items: center;
     gap: 0.25em;
+
+    &.inline {
+        display: inline-flex;
+    }
 }
 
 .separator {

From 339e7c3d95a6b12f981f2e1cc12ec27dddc30f2c Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 15 Sep 2022 10:54:58 +0200
Subject: [PATCH 05/25] add demo page

---
 client/src/components/HeadingsDemo.vue | 27 ++++++++++++++++++++++++++
 client/src/entry/analysis/router.js    |  5 +++++
 lib/galaxy/webapps/galaxy/buildapp.py  |  1 +
 3 files changed, 33 insertions(+)
 create mode 100644 client/src/components/HeadingsDemo.vue

diff --git a/client/src/components/HeadingsDemo.vue b/client/src/components/HeadingsDemo.vue
new file mode 100644
index 00000000000..7e9f7fd70d5
--- /dev/null
+++ b/client/src/components/HeadingsDemo.vue
@@ -0,0 +1,27 @@
+<script setup>
+import Heading from "./Common/Heading.vue";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faAngleDoubleRight, faAngleRight, faQuestion } from "@fortawesome/free-solid-svg-icons";
+import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
+
+library.add(faAngleDoubleRight);
+library.add(faAngleRight);
+library.add(faQuestion);
+library.add(faQuestionCircle);
+</script>
+
+<template>
+    <div>
+        <Heading>Default Heading</Heading>
+        <Heading h2 size="large">Large H2 Heading</Heading>
+        <Heading h3 separator size="medium">Medium H3 Heading with Separator</Heading>
+        <Heading h3 size="medium" icon="fa-angle-right">Heading with Icon</Heading>
+        <Heading h4 size="small" icon="fa-angle-double-right">Small Heading with Icon</Heading>
+        <Heading h2 bold size="medium">Medium Bold H2</Heading>
+        <span> <Heading h3 bold inline size="text">Inline Text Sized Bold H3</Heading> next to some text.</span>
+        <Heading h3 separator bold size="medium">Bold H3 with Separator</Heading>
+        <Heading h4 bold size="medium" icon="fa-question">Bold Medium H4 with Icon</Heading>
+        <Heading h4 size="small" icon="far fa-question-circle">Small H4 with Icon</Heading>
+        <Heading h3 separator size="small">Small H3 with Separator</Heading>
+    </div>
+</template>
diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
index 3348ec04db1..a4f75b7f249 100644
--- a/client/src/entry/analysis/router.js
+++ b/client/src/entry/analysis/router.js
@@ -62,6 +62,7 @@ import { CloudAuth } from "components/User/CloudAuth";
 import { ExternalIdentities } from "components/User/ExternalIdentities";
 import { HistoryExport } from "components/HistoryExport/index";
 import { StorageDashboardRouter } from "components/User/DiskUsage";
+import HeadingsDemo from "components/HeadingsDemo";
 
 Vue.use(VueRouter);
 
@@ -471,6 +472,10 @@ export function getRouter(Galaxy) {
                         component: StoredWorkflowInvocations,
                         props: true,
                     },
+                    {
+                        path: "headings_demo",
+                        component: HeadingsDemo,
+                    },
                 ],
             },
         ],
diff --git a/lib/galaxy/webapps/galaxy/buildapp.py b/lib/galaxy/webapps/galaxy/buildapp.py
index ec91cd6cdf0..1ba742634a2 100644
--- a/lib/galaxy/webapps/galaxy/buildapp.py
+++ b/lib/galaxy/webapps/galaxy/buildapp.py
@@ -271,6 +271,7 @@ def app_pair(global_conf, load_app_kwds=None, wsgi_preflight=True, **kwargs):
     webapp.add_client_route("/interactivetool_entry_points/list")
     webapp.add_client_route("/libraries{path:.*?}")
     webapp.add_client_route("/storage{path:.*?}")
+    webapp.add_client_route("/headings_demo")
 
     # ==== Done
     # Indicate that all configuration settings have been provided

From cb387ddbf61f91a3a584c2ce18f7356c14e57090 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 15 Sep 2022 14:58:41 +0200
Subject: [PATCH 06/25] fix bold separator heading

---
 client/src/components/Common/Heading.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
index 2b0cc87eb22..0d4f8e2caf8 100644
--- a/client/src/components/Common/Heading.vue
+++ b/client/src/components/Common/Heading.vue
@@ -34,10 +34,10 @@ if (props.size) {
 </script>
 
 <template>
-    <div v-if="props.separator" class="separator heading" :class="[sizeClass, props.bold ? 'font-weight-bold' : '']">
+    <div v-if="props.separator" class="separator heading" :class="sizeClass">
         <FontAwesomeIcon v-if="props.icon" :icon="props.icon" />
         <div v-else class="stripe"></div>
-        <component :is="element" :class="sizeClass">
+        <component :is="element" :class="[sizeClass, props.bold ? 'font-weight-bold' : '']">
             <slot />
         </component>
         <div class="stripe"></div>

From 0cdbf38e7c65e704d33afc0f86a5a685f69950e5 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 16 Sep 2022 10:48:18 +0200
Subject: [PATCH 07/25] change separator heading appearance remove
 icon-separator heading

---
 client/src/components/Common/Heading.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
index 0d4f8e2caf8..b684a1ab747 100644
--- a/client/src/components/Common/Heading.vue
+++ b/client/src/components/Common/Heading.vue
@@ -34,9 +34,8 @@ if (props.size) {
 </script>
 
 <template>
-    <div v-if="props.separator" class="separator heading" :class="sizeClass">
-        <FontAwesomeIcon v-if="props.icon" :icon="props.icon" />
-        <div v-else class="stripe"></div>
+    <div v-if="props.separator" class="separator heading">
+        <div class="stripe"></div>
         <component :is="element" :class="[sizeClass, props.bold ? 'font-weight-bold' : '']">
             <slot />
         </component>
@@ -72,8 +71,8 @@ h1, h2, h3, h4, h5, h6 {
 
 .separator {
     display: grid;
-    grid-template-columns: auto auto 1fr;
-    gap: 0.25em;
+    grid-template-columns: 1rem auto 1fr;
+    gap: 0.5rem;
     align-items: center;
     margin-bottom: 0.5rem;
 
@@ -86,7 +85,6 @@ h1, h2, h3, h4, h5, h6 {
         display: block;
         height: 1px;
         background-color: $brand-secondary;
-        min-width: 1rem;
     }
 }
 </style>

From 99322854e753e43df7f665535b746a07b6ab796b Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 22 Sep 2022 15:21:35 +0200
Subject: [PATCH 08/25] fix RuleCollectionBuilder css leak

---
 .../src/components/RuleCollectionBuilder.vue  | 318 +++++++++---------
 1 file changed, 160 insertions(+), 158 deletions(-)

diff --git a/client/src/components/RuleCollectionBuilder.vue b/client/src/components/RuleCollectionBuilder.vue
index 69e40abb6f2..d21c905d9f3 100644
--- a/client/src/components/RuleCollectionBuilder.vue
+++ b/client/src/components/RuleCollectionBuilder.vue
@@ -1,5 +1,5 @@
 <template>
-    <state-div v-if="state == 'build'">
+    <state-div v-if="state == 'build'" class="rule-collection-builder">
         <!-- Different instructions if building up from individual datasets vs.
         initial data import.-->
         <rule-modal-header v-if="ruleView == 'source'"
@@ -529,7 +529,7 @@
             </b-row>
         </rule-modal-footer>
     </state-div>
-    <state-div v-else-if="state == 'wait'">
+    <state-div v-else-if="state == 'wait'" class="rule-collection-builder">
         <rule-modal-header v-if="importType == 'datasets'">
             {{
                 l(
@@ -548,7 +548,7 @@
             <b-button class="creator-cancel-btn" tabindex="-1" @click="cancel">{{ l("Close") }}</b-button>
         </rule-modal-footer>
     </state-div>
-    <state-div v-else-if="state == 'error'">
+    <state-div v-else-if="state == 'error'" class="rule-collection-builder">
         <!-- TODO: steal styling from paired collection builder warning... -->
         <rule-modal-header>A problem was encountered.</rule-modal-header>
         <rule-modal-middle>
@@ -1757,160 +1757,162 @@ export default {
 </script>
 
 <style src="../../node_modules/handsontable/dist/handsontable.full.css"></style>
-<style>
-.table-column {
-    width: 100%;
-    overflow: hidden;
-}
-.select2-container {
-    min-width: 60px;
-}
-.vertical #hot-table {
-    width: 100%;
-    overflow: hidden;
-    height: 400px;
-}
-.horizontal #hot-table {
-    width: 100%;
-    overflow: hidden;
-    height: 250px;
-}
-.rule-builder-body {
-    height: 400px;
-}
-.rule-column.vertical {
-    height: 400px;
-}
-.rule-column.horizontal {
-    height: 150px;
-}
-.rules-container-full {
-    width: 100%;
-    height: 400px;
-}
-.rules-container {
-    border: 1px dashed #ccc;
-    padding: 5px;
-}
-.rules-container-vertical {
-    width: 300px;
-    height: 400px;
-}
-.rules-container-horizontal {
-    width: 100%;
-    height: 150px;
-}
-.rules-container .title {
-    font-weight: bold;
-}
-.rule-summary {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-.rule-edit-buttons {
-    margin: 5px;
-}
-.rules {
-    flex-grow: 1;
-    overflow-y: scroll;
-    padding: 0px;
-}
-.rule-source {
-    height: 400px;
-}
-.rules li {
-    list-style-type: circle;
-    list-style-position: inside;
-    padding: 5px;
-    padding-top: 0px;
-    padding-bottom: 0px;
-}
-.rule-column-selector li {
-    list-style-type: circle;
-    list-style-position: inside;
-    padding: 5px;
-    padding-top: 0px;
-    padding-bottom: 0px;
-}
-.rules .rule-error {
-    display: block;
-    margin-left: 10px;
-    font-style: italic;
-    color: red;
-}
-.rule-warning {
-    display: block;
-    margin-left: 10px;
-    font-style: italic;
-    color: #e28809;
-}
-.rule-summary .title {
-    font-size: 1.1em;
-}
-.rule-highlight {
-    font-style: italic;
-    font-weight: bold;
-}
-.rules-buttons {
-}
-.rule-footer-inputs label {
-    padding-left: 20px;
-    align-self: baseline;
-}
-.rule-footer-inputs .select2-container {
-    align-self: baseline;
-}
-.rule-footer-inputs {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    align-items: baseline;
-}
-.rule-footer-inputs input {
-    align-self: baseline;
-}
-.extension-select {
-    flex: 1;
-    max-width: 120px;
-    min-width: 60px;
-}
-.genome-select {
-    flex: 1;
-    max-width: 300px;
-    min-width: 120px;
-}
-.collection-name {
-    flex: 1;
-    min-width: 120px;
-    max-width: 500px;
-}
-.rule-footer-genome-group {
-    flex: 2;
-    display: flex;
-}
-.rule-footer-extension-group {
-    flex: 1;
-    display: flex;
-}
-.rule-footer-name-group {
-    flex: 3;
-    display: flex;
-    flex-direction: row-reverse;
-}
-.fa-edit,
-.fa-times,
-.fa-wrench {
-    cursor: pointer;
-}
-.fa-history {
-    cursor: pointer;
-}
-.menu-option {
-    padding-left: 5px;
-}
-.alert-area li {
-    list-style: circle;
-    margin-left: 32px;
+<style lang="scss">
+.rule-collection-builder {
+    .table-column {
+        width: 100%;
+        overflow: hidden;
+    }
+    .select2-container {
+        min-width: 60px;
+    }
+    .vertical #hot-table {
+        width: 100%;
+        overflow: hidden;
+        height: 400px;
+    }
+    .horizontal #hot-table {
+        width: 100%;
+        overflow: hidden;
+        height: 250px;
+    }
+    .rule-builder-body {
+        height: 400px;
+    }
+    .rule-column.vertical {
+        height: 400px;
+    }
+    .rule-column.horizontal {
+        height: 150px;
+    }
+    .rules-container-full {
+        width: 100%;
+        height: 400px;
+    }
+    .rules-container {
+        border: 1px dashed #ccc;
+        padding: 5px;
+    }
+    .rules-container-vertical {
+        width: 300px;
+        height: 400px;
+    }
+    .rules-container-horizontal {
+        width: 100%;
+        height: 150px;
+    }
+    .rules-container .title {
+        font-weight: bold;
+    }
+    .rule-summary {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+    .rule-edit-buttons {
+        margin: 5px;
+    }
+    .rules {
+        flex-grow: 1;
+        overflow-y: scroll;
+        padding: 0px;
+    }
+    .rule-source {
+        height: 400px;
+    }
+    .rules li {
+        list-style-type: circle;
+        list-style-position: inside;
+        padding: 5px;
+        padding-top: 0px;
+        padding-bottom: 0px;
+    }
+    .rule-column-selector li {
+        list-style-type: circle;
+        list-style-position: inside;
+        padding: 5px;
+        padding-top: 0px;
+        padding-bottom: 0px;
+    }
+    .rules .rule-error {
+        display: block;
+        margin-left: 10px;
+        font-style: italic;
+        color: red;
+    }
+    .rule-warning {
+        display: block;
+        margin-left: 10px;
+        font-style: italic;
+        color: #e28809;
+    }
+    .rule-summary .title {
+        font-size: 1.1em;
+    }
+    .rule-highlight {
+        font-style: italic;
+        font-weight: bold;
+    }
+    .rules-buttons {
+    }
+    .rule-footer-inputs label {
+        padding-left: 20px;
+        align-self: baseline;
+    }
+    .rule-footer-inputs .select2-container {
+        align-self: baseline;
+    }
+    .rule-footer-inputs {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        align-items: baseline;
+    }
+    .rule-footer-inputs input {
+        align-self: baseline;
+    }
+    .extension-select {
+        flex: 1;
+        max-width: 120px;
+        min-width: 60px;
+    }
+    .genome-select {
+        flex: 1;
+        max-width: 300px;
+        min-width: 120px;
+    }
+    .collection-name {
+        flex: 1;
+        min-width: 120px;
+        max-width: 500px;
+    }
+    .rule-footer-genome-group {
+        flex: 2;
+        display: flex;
+    }
+    .rule-footer-extension-group {
+        flex: 1;
+        display: flex;
+    }
+    .rule-footer-name-group {
+        flex: 3;
+        display: flex;
+        flex-direction: row-reverse;
+    }
+    .fa-edit,
+    .fa-times,
+    .fa-wrench {
+        cursor: pointer;
+    }
+    .fa-history {
+        cursor: pointer;
+    }
+    .menu-option {
+        padding-left: 5px;
+    }
+    .alert-area li {
+        list-style: circle;
+        margin-left: 32px;
+    }
 }
 </style>

From e4d52b2f81e0a7134da3c8da9707ff60da89756b Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 22 Sep 2022 15:22:24 +0200
Subject: [PATCH 09/25] fix and slight changes Heading component

---
 client/src/components/Common/Heading.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
index b684a1ab747..17d289549a8 100644
--- a/client/src/components/Common/Heading.vue
+++ b/client/src/components/Common/Heading.vue
@@ -54,7 +54,7 @@ if (props.size) {
 <style lang="scss" scoped>
 @import "scss/theme/blue.scss";
 
-.heading::v-deep > svg {
+.heading:deep(svg) {
     font-size: 0.75em;
 }
 
@@ -62,7 +62,7 @@ if (props.size) {
 h1, h2, h3, h4, h5, h6 {
     display: flex;
     align-items: center;
-    gap: 0.25em;
+    gap: 0.4em;
 
     &.inline {
         display: inline-flex;

From b2b4151be13ab3a2d53ac8b88c5ad0d82ae69885 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 22 Sep 2022 15:23:45 +0200
Subject: [PATCH 10/25] fix heading hierarchy Toolbox fix heading hierarchy
 admin Home add Heading icons to admin Home

---
 client/src/components/Panels/ToolBox.vue |  7 ++++---
 client/src/components/admin/Home.vue     | 24 +++++++++++++++++-------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 045e319e5c4..8e89d48d121 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -1,10 +1,11 @@
 <template>
-    <div class="unified-panel">
+    <div class="unified-panel" aria-labelledby="toolbox-heading">
         <div unselectable="on">
             <div class="unified-panel-header-inner">
                 <nav class="d-flex justify-content-between mx-3 my-2">
-                    <h4 v-if="!showAdvanced" v-localize class="m-1">Tools</h4>
-                    <h4 v-else v-localize class="m-1">Advanced Tool Search</h4>
+                    <h2 v-if="!showAdvanced" v-localize id="toolbox-heading" class="m-1">Tools</h2>
+                    <h2 v-else v-localize id="toolbox-heading" class="m-1">Advanced Tool Search</h2>
+
                     <div v-if="!showAdvanced" class="panel-header-buttons">
                         <b-button-group>
                             <favorites-button :query="query" @onFavorites="onQuery" />
diff --git a/client/src/components/admin/Home.vue b/client/src/components/admin/Home.vue
index ed6dead7cb0..2ad78939446 100644
--- a/client/src/components/admin/Home.vue
+++ b/client/src/components/admin/Home.vue
@@ -1,12 +1,15 @@
 <template>
     <div>
-        <h2>Administration</h2>
-        Please visit
+        <h1>Administration</h1>
 
-        <a href="https://galaxyproject.org/admin" target="_blank">the Galaxy administration hub</a> to learn how to keep
-        your Galaxy in best shape.
+        <p>
+            Please visit
 
-        <h4>Server</h4>
+            <a href="https://galaxyproject.org/admin" target="_blank">the Galaxy administration hub</a> to learn how to
+            keep your Galaxy in best shape.
+        </p>
+
+        <Heading h2 icon="fa-server" size="medium">Server</Heading>
         <ul>
             <li>
                 <strong>
@@ -42,7 +45,7 @@
             </li>
         </ul>
 
-        <h4>User Management</h4>
+        <Heading h2 icon="fa-user" size="medium">User Management</Heading>
         <ul>
             <li>
                 <strong>
@@ -82,7 +85,7 @@
             </li>
         </ul>
 
-        <h4>Tool Management</h4>
+        <Heading h2 icon="fa-wrench" size="medium">Tool Management</Heading>
         <ul>
             <li>
                 <strong>
@@ -116,7 +119,14 @@
 </template>
 
 <script>
+import Heading from "components/Common/Heading.vue";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faServer, faUser, faWrench } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faServer, faUser, faWrench);
+
 export default {
+    components: { Heading },
     props: {
         isToolshedInstalled: {
             type: Boolean,

From 830d899aec9c3e023667bc786a69cd589ab8e3e8 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 22 Sep 2022 15:34:19 +0200
Subject: [PATCH 11/25] fix history import heading

---
 client/src/components/HistoryImport.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/src/components/HistoryImport.vue b/client/src/components/HistoryImport.vue
index 318101d347e..83a20d4e91b 100644
--- a/client/src/components/HistoryImport.vue
+++ b/client/src/components/HistoryImport.vue
@@ -1,5 +1,8 @@
 <template>
-    <b-card body-class="history-import-component" title="Import a history from an archive">
+    <b-card body-class="history-import-component">
+        <template slot="header">
+            <h1 class="mb-0 h-small">Import a history from an archive</h1>
+        </template>
         <b-alert v-if="errorMessage" variant="danger" dismissible show @dismissed="errorMessage = null">
             {{ errorMessage }}
             <JobError

From 184745271204e2d4be7d95157808eda2920d5ddc Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 23 Sep 2022 12:06:58 +0200
Subject: [PATCH 12/25] toolBox and historyImport heading adjustments

---
 client/src/components/HistoryImport.vue  | 6 +++---
 client/src/components/Panels/ToolBox.vue | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/components/HistoryImport.vue b/client/src/components/HistoryImport.vue
index 83a20d4e91b..e80c58e1d63 100644
--- a/client/src/components/HistoryImport.vue
+++ b/client/src/components/HistoryImport.vue
@@ -1,7 +1,7 @@
 <template>
-    <b-card body-class="history-import-component">
+    <b-card body-class="history-import-component" aria-labelledby="history-import-heading">
         <template slot="header">
-            <h1 class="mb-0 h-small">Import a history from an archive</h1>
+            <h1 id="history-import-heading" class="mb-0 h-small">Import a history from an archive</h1>
         </template>
         <b-alert v-if="errorMessage" variant="danger" dismissible show @dismissed="errorMessage = null">
             {{ errorMessage }}
@@ -19,7 +19,7 @@
         </div>
         <div v-else-if="complete">
             <b-alert :show="complete" variant="success" dismissible @dismissed="complete = false">
-                <h4>Done!</h4>
+                <span class="mb-1 h-small">Done!</span>
                 <p>History imported, check out <a :href="historyLink">your histories</a>.</p>
             </b-alert>
         </div>
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 8e89d48d121..579a2ba6b9d 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -3,8 +3,8 @@
         <div unselectable="on">
             <div class="unified-panel-header-inner">
                 <nav class="d-flex justify-content-between mx-3 my-2">
-                    <h2 v-if="!showAdvanced" v-localize id="toolbox-heading" class="m-1">Tools</h2>
-                    <h2 v-else v-localize id="toolbox-heading" class="m-1">Advanced Tool Search</h2>
+                    <h2 v-if="!showAdvanced" v-localize id="toolbox-heading" class="m-1 h-small">Tools</h2>
+                    <h2 v-else v-localize id="toolbox-heading" class="m-1 h-small">Advanced Tool Search</h2>
 
                     <div v-if="!showAdvanced" class="panel-header-buttons">
                         <b-button-group>

From 89f537fa30e51c54be1d7c09a349e49cee898c05 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 23 Sep 2022 12:29:27 +0200
Subject: [PATCH 13/25] rename sizes to fit bootstrap undo default heading size
 changes

---
 client/src/components/Common/Heading.vue |  4 ++--
 client/src/components/HeadingsDemo.vue   | 18 +++++++++---------
 client/src/components/HistoryImport.vue  |  4 ++--
 client/src/components/Panels/ToolBox.vue |  4 ++--
 client/src/components/admin/Home.vue     |  6 +++---
 client/src/style/scss/theme/blue.scss    |  8 ++++----
 client/src/style/scss/ui.scss            | 10 +++++++---
 7 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
index 17d289549a8..5373725d2bd 100644
--- a/client/src/components/Common/Heading.vue
+++ b/client/src/components/Common/Heading.vue
@@ -2,7 +2,7 @@
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 let element = "h1";
-let sizeClass = "h-large";
+let sizeClass = "h-lg";
 
 const props = defineProps({
     h1: Boolean,
@@ -14,7 +14,7 @@ const props = defineProps({
     bold: Boolean,
     separator: Boolean,
     inline: Boolean,
-    // acceptable sizes are "large", "medium", "small", and "text"
+    // acceptable sizes are "xl", "lg", "md", "sm", and "text"
     size: String,
     icon: String,
 });
diff --git a/client/src/components/HeadingsDemo.vue b/client/src/components/HeadingsDemo.vue
index 7e9f7fd70d5..5b1b8c2efad 100644
--- a/client/src/components/HeadingsDemo.vue
+++ b/client/src/components/HeadingsDemo.vue
@@ -13,15 +13,15 @@ library.add(faQuestionCircle);
 <template>
     <div>
         <Heading>Default Heading</Heading>
-        <Heading h2 size="large">Large H2 Heading</Heading>
-        <Heading h3 separator size="medium">Medium H3 Heading with Separator</Heading>
-        <Heading h3 size="medium" icon="fa-angle-right">Heading with Icon</Heading>
-        <Heading h4 size="small" icon="fa-angle-double-right">Small Heading with Icon</Heading>
-        <Heading h2 bold size="medium">Medium Bold H2</Heading>
+        <Heading h2 size="xl">Large H2 Heading</Heading>
+        <Heading h3 separator size="md">Medium H3 Heading with Separator</Heading>
+        <Heading h3 size="md" icon="fa-angle-right">Heading with Icon</Heading>
+        <Heading h4 size="sm" icon="fa-angle-double-right">Small Heading with Icon</Heading>
+        <Heading h2 bold size="md">Medium Bold H2</Heading>
         <span> <Heading h3 bold inline size="text">Inline Text Sized Bold H3</Heading> next to some text.</span>
-        <Heading h3 separator bold size="medium">Bold H3 with Separator</Heading>
-        <Heading h4 bold size="medium" icon="fa-question">Bold Medium H4 with Icon</Heading>
-        <Heading h4 size="small" icon="far fa-question-circle">Small H4 with Icon</Heading>
-        <Heading h3 separator size="small">Small H3 with Separator</Heading>
+        <Heading h3 separator bold size="md">Bold H3 with Separator</Heading>
+        <Heading h4 bold size="md" icon="fa-question">Bold Medium H4 with Icon</Heading>
+        <Heading h4 size="sm" icon="far fa-question-circle">Small H4 with Icon</Heading>
+        <Heading h3 separator size="sm">Small H3 with Separator</Heading>
     </div>
 </template>
diff --git a/client/src/components/HistoryImport.vue b/client/src/components/HistoryImport.vue
index e80c58e1d63..7ab8df2f8cd 100644
--- a/client/src/components/HistoryImport.vue
+++ b/client/src/components/HistoryImport.vue
@@ -1,7 +1,7 @@
 <template>
     <b-card body-class="history-import-component" aria-labelledby="history-import-heading">
         <template slot="header">
-            <h1 id="history-import-heading" class="mb-0 h-small">Import a history from an archive</h1>
+            <h1 id="history-import-heading" class="mb-0 h-sm">Import a history from an archive</h1>
         </template>
         <b-alert v-if="errorMessage" variant="danger" dismissible show @dismissed="errorMessage = null">
             {{ errorMessage }}
@@ -19,7 +19,7 @@
         </div>
         <div v-else-if="complete">
             <b-alert :show="complete" variant="success" dismissible @dismissed="complete = false">
-                <span class="mb-1 h-small">Done!</span>
+                <span class="mb-1 h-sm">Done!</span>
                 <p>History imported, check out <a :href="historyLink">your histories</a>.</p>
             </b-alert>
         </div>
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 579a2ba6b9d..eb348a3a2d8 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -3,8 +3,8 @@
         <div unselectable="on">
             <div class="unified-panel-header-inner">
                 <nav class="d-flex justify-content-between mx-3 my-2">
-                    <h2 v-if="!showAdvanced" v-localize id="toolbox-heading" class="m-1 h-small">Tools</h2>
-                    <h2 v-else v-localize id="toolbox-heading" class="m-1 h-small">Advanced Tool Search</h2>
+                    <h2 v-if="!showAdvanced" v-localize id="toolbox-heading" class="m-1 h-sm">Tools</h2>
+                    <h2 v-else v-localize id="toolbox-heading" class="m-1 h-sm">Advanced Tool Search</h2>
 
                     <div v-if="!showAdvanced" class="panel-header-buttons">
                         <b-button-group>
diff --git a/client/src/components/admin/Home.vue b/client/src/components/admin/Home.vue
index 2ad78939446..78d2354838c 100644
--- a/client/src/components/admin/Home.vue
+++ b/client/src/components/admin/Home.vue
@@ -9,7 +9,7 @@
             keep your Galaxy in best shape.
         </p>
 
-        <Heading h2 icon="fa-server" size="medium">Server</Heading>
+        <Heading h2 icon="fa-server" size="md">Server</Heading>
         <ul>
             <li>
                 <strong>
@@ -45,7 +45,7 @@
             </li>
         </ul>
 
-        <Heading h2 icon="fa-user" size="medium">User Management</Heading>
+        <Heading h2 icon="fa-user" size="md">User Management</Heading>
         <ul>
             <li>
                 <strong>
@@ -85,7 +85,7 @@
             </li>
         </ul>
 
-        <Heading h2 icon="fa-wrench" size="medium">Tool Management</Heading>
+        <Heading h2 icon="fa-wrench" size="md">Tool Management</Heading>
         <ul>
             <li>
                 <strong>
diff --git a/client/src/style/scss/theme/blue.scss b/client/src/style/scss/theme/blue.scss
index b9a69531795..3e0c3282cbf 100644
--- a/client/src/style/scss/theme/blue.scss
+++ b/client/src/style/scss/theme/blue.scss
@@ -88,10 +88,10 @@ $font-size-base: 0.85rem; // default 1rem
 
 // Header font sizes
 $h1-font-size: $font-size-base * 2; // default 2.5
-$h2-font-size: $font-size-base * 1.5; // default 2
-$h3-font-size: $font-size-base * 1.25; // default 1.75
-$h4-font-size: $font-size-base; // default 1.5
-$h5-font-size: $font-size-base * 0.9; // default 1.25
+$h2-font-size: $font-size-base * 1.75; // default 2
+$h3-font-size: $font-size-base * 1.5; // default 1.75
+$h4-font-size: $font-size-base * 1.25; // default 1.5
+$h5-font-size: $font-size-base; // default 1.25
 $h6-font-size: $font-size-base * 0.85; // default 1
 
 // Increase contrast of dropdown items
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index f018f87a339..bf6c25206c7 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -479,18 +479,22 @@ $ui-margin-horizontal-large: $margin-v * 2;
 }
 
 /* Heading Sizes */
-.h-large {
+.h-xl {
     font-size: $h1-font-size;
 }
 
-.h-medium {
+.h-lg {
     font-size: $h2-font-size;
 }
 
-.h-small {
+.h-md {
     font-size: $h3-font-size;
 }
 
+.h-sm {
+    font-size: $h4-font-size;
+}
+
 .h-text {
     font-size: $font-size-base;
 }

From 8b6038c4860a3c541668a7e525a52d02858962db Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 23 Sep 2022 12:43:03 +0200
Subject: [PATCH 14/25] admin heading adjustments tool recommendation heading
 adjustments

---
 client/src/components/ToolRecommendation.vue  |  5 +++--
 .../src/components/Workflow/Invocations.vue   |  8 ++++----
 client/src/components/admin/AdminPanel.vue    |  2 +-
 .../admin/DataManager/DataManager.vue         |  2 +-
 .../admin/DataManager/DataManagerView.vue     |  4 ++--
 client/src/components/admin/DataTables.vue    |  3 ++-
 client/src/components/admin/DataTypes.vue     |  3 ++-
 .../components/admin/DisplayApplications.vue  | 19 +++++++++++--------
 client/src/components/admin/Jobs.vue          | 15 ++++++++-------
 9 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/client/src/components/ToolRecommendation.vue b/client/src/components/ToolRecommendation.vue
index b4e7bc834d1..f268ba82dff 100644
--- a/client/src/components/ToolRecommendation.vue
+++ b/client/src/components/ToolRecommendation.vue
@@ -1,13 +1,14 @@
 <template>
-    <div>
+    <div aria-labelledby="tool-recommendation-heading">
         <div v-if="!deprecated && showMessage" class="infomessagelarge">
-            <h4>Tool recommendation</h4>
+            <h2 id="tool-recommendation-heading" class="h-sm">Tool recommendation</h2>
             You have used {{ getToolId }} tool. For further analysis, you could try using the following/recommended
             tools. The recommended tools are shown in the decreasing order of their scores predicted using machine
             learning analysis on workflows. Therefore, tools at the top may be more useful than the ones at the bottom.
             Please click on one of the following/recommended tools to open its definition.
         </div>
         <div v-else-if="deprecated" class="warningmessagelarge">
+            <h2 id="tool-recommendation-heading" class="h-sm">Tool deprecated</h2>
             You have used {{ getToolId }} tool. {{ deprecatedMessage }}
         </div>
         <div id="tool-recommendation" class="ui-tool-recommendation"></div>
diff --git a/client/src/components/Workflow/Invocations.vue b/client/src/components/Workflow/Invocations.vue
index ab80cadf3da..6b010de3d4d 100644
--- a/client/src/components/Workflow/Invocations.vue
+++ b/client/src/components/Workflow/Invocations.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="invocations-list">
-        <h2 class="mb-3">
-            <span id="invocations-title">{{ title }}</span>
-        </h2>
+    <div class="invocations-list" aria-labelledby="invocations-title">
+        <h1 id="invocations-title" class="mb-3 h-lg">
+            {{ title }}
+        </h1>
         <b-alert v-if="headerMessage" variant="info" show>
             {{ headerMessage }}
         </b-alert>
diff --git a/client/src/components/admin/AdminPanel.vue b/client/src/components/admin/AdminPanel.vue
index b6c2ef5c2c6..b7ff4477d5b 100644
--- a/client/src/components/admin/AdminPanel.vue
+++ b/client/src/components/admin/AdminPanel.vue
@@ -12,7 +12,7 @@
                         v-for="(section, sectionIndex) in sections"
                         :key="sectionIndex"
                         class="toolSectionTitle pt-1 px-3">
-                        {{ section.title }}
+                        <h2 class="font-weight-bold h-text mb-0">{{ section.title }}</h2>
                         <div class="toolSectionBody">
                             <div v-for="(item, itemIndex) in section.items" :key="itemIndex" class="toolTitle">
                                 <router-link v-if="!item.disabled" :id="item.id" class="title-link" :to="item.route">
diff --git a/client/src/components/admin/DataManager/DataManager.vue b/client/src/components/admin/DataManager/DataManager.vue
index be4d3a00b16..6a989a42eb9 100644
--- a/client/src/components/admin/DataManager/DataManager.vue
+++ b/client/src/components/admin/DataManager/DataManager.vue
@@ -5,7 +5,7 @@
         <Alert v-else-if="loading" message="Waiting for data" variant="info" />
         <div v-else-if="dataManagers && !dataManagers.length">
             <Alert variant="primary">
-                <h4 class="alert-heading">None installed</h4>
+                <span class="alert-heading h-sm">None installed</span>
                 You do not currently have any Data Managers installed.
             </Alert>
         </div>
diff --git a/client/src/components/admin/DataManager/DataManagerView.vue b/client/src/components/admin/DataManager/DataManagerView.vue
index 8482b32b792..68a274bedad 100644
--- a/client/src/components/admin/DataManager/DataManagerView.vue
+++ b/client/src/components/admin/DataManager/DataManagerView.vue
@@ -1,7 +1,7 @@
 <template>
-    <div>
+    <div aria-labelledby="data-managers-title">
         <span class="mb-3">
-            <h2 id="data-managers-title">Local Data</h2>
+            <h1 id="data-managers-title" class="h-lg">Local Data</h1>
             <p>
                 Data Managers are used to manage Galaxy's local data. They can be installed manually, or via the
                 <b-link :href="toolShedLink">ToolShed</b-link>. For more comprehensive information
diff --git a/client/src/components/admin/DataTables.vue b/client/src/components/admin/DataTables.vue
index 53af81709ac..324602c69b7 100644
--- a/client/src/components/admin/DataTables.vue
+++ b/client/src/components/admin/DataTables.vue
@@ -1,5 +1,6 @@
 <template>
-    <div>
+    <div aria-labelledby="data-tables-heading">
+        <h1 id="data-tables-heading" class="h-lg">Data Tables</h1>
         <message :message="message" :status="status"></message>
         <component
             :is="currentView"
diff --git a/client/src/components/admin/DataTypes.vue b/client/src/components/admin/DataTypes.vue
index 15a518632fd..377e10800dc 100644
--- a/client/src/components/admin/DataTypes.vue
+++ b/client/src/components/admin/DataTypes.vue
@@ -1,5 +1,6 @@
 <template>
-    <div>
+    <div aria-labelledby="data-types-heading">
+        <h1 id="data-types-heading" class="h-lg">Data Types</h1>
         <Message :message="message" :status="status" />
         <BaseGrid
             v-if="status !== 'error'"
diff --git a/client/src/components/admin/DisplayApplications.vue b/client/src/components/admin/DisplayApplications.vue
index 544baafb736..d1afda3f521 100644
--- a/client/src/components/admin/DisplayApplications.vue
+++ b/client/src/components/admin/DisplayApplications.vue
@@ -1,12 +1,15 @@
 <template>
-    <BaseList
-        :fields="fields"
-        icon="fa fa-sync"
-        tooltip="Refresh"
-        plural="display applications"
-        success="reloaded"
-        :getter="getter"
-        :setter="setter" />
+    <div aria-labelledby="display-applications-heading">
+        <h1 id="display-applications-heading" class="h-lg">Display Applications</h1>
+        <BaseList
+            :fields="fields"
+            icon="fa fa-sync"
+            tooltip="Refresh"
+            plural="display applications"
+            success="reloaded"
+            :getter="getter"
+            :setter="setter" />
+    </div>
 </template>
 <script>
 import BaseList from "./BaseList";
diff --git a/client/src/components/admin/Jobs.vue b/client/src/components/admin/Jobs.vue
index 2bcf4db5160..b526ed76981 100644
--- a/client/src/components/admin/Jobs.vue
+++ b/client/src/components/admin/Jobs.vue
@@ -1,12 +1,12 @@
 <template>
-    <div>
-        <h2 id="jobs-title">Jobs</h2>
+    <div aria-labelledby="jobs-title">
+        <h1 id="jobs-title" class="h-lg">Jobs</h1>
         <b-alert v-if="message" :variant="status" show>
             {{ message }}
         </b-alert>
-        <h3>Job Lock</h3>
+        <Heading h2 size="md" separator>Job Lock</Heading>
         <job-lock />
-        <h3>Job Overview</h3>
+        <Heading h2 size="md" separator>Job Overview</Heading>
         <p>
             Below unfinished jobs are displayed (in the 'new', 'queued', 'running', or 'upload' states) and recently
             completed jobs (in 'error' or 'ok' states).
@@ -55,7 +55,7 @@
                 </b-form-group>
             </b-form>
         </transition>
-        <h4>Unfinished Jobs</h4>
+        <h3 class="mb-0 h-sm">Unfinished Jobs</h3>
         <jobs-table
             v-model="jobsItemsModel"
             :fields="unfinishedJobFields"
@@ -81,7 +81,7 @@
         </jobs-table>
 
         <template v-if="!showAllRunning">
-            <h4>Finished Jobs</h4>
+            <h3 class="mb-0 h-sm">Finished Jobs</h3>
             <jobs-table
                 :table-caption="finishedTableCaption"
                 :fields="finishedJobFields"
@@ -104,6 +104,7 @@ import JOB_STATES_MODEL from "utils/job-states-model";
 import { commonJobFields } from "./JobFields";
 import { errorMessageAsString } from "utils/simple-error";
 import { jobsProvider } from "components/providers/JobProvider";
+import Heading from "components/Common/Heading";
 
 function cancelJob(jobId, message) {
     const url = `${getAppRoot()}api/jobs/${jobId}`;
@@ -111,7 +112,7 @@ function cancelJob(jobId, message) {
 }
 
 export default {
-    components: { JobLock, JobsTable },
+    components: { JobLock, JobsTable, Heading },
     data() {
         return {
             jobs: [],

From 242bdb3950f216a402b136adb611614a261f585b Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 26 Sep 2022 13:25:21 +0200
Subject: [PATCH 15/25] various heading level adjustments new hide-element
 utility class dataset details css refactor to avoid top-gap

---
 .../Collections/common/CollectionEditView.vue |  4 +-
 .../Dataset/DatasetStorage/DatasetStorage.vue |  2 +-
 .../DatasetInformation/DatasetAttributes.vue  |  4 +-
 .../DatasetInformation/DatasetDetails.vue     | 46 +++++++++----------
 .../DatasetInformation/DatasetInformation.vue |  2 +-
 .../InheritanceChain/InheritanceChain.vue     |  2 +-
 .../JobInformation/JobInformation.vue         |  2 +-
 .../components/JobInformation/JobOutputs.vue  |  4 +-
 .../src/components/JobMetrics/JobMetrics.vue  |  2 +-
 .../JobParameters/JobParameters.vue           |  2 +-
 .../admin/DataManager/DataManagerJobs.vue     |  2 +-
 client/src/style/scss/ui.scss                 | 12 +++++
 12 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/client/src/components/Collections/common/CollectionEditView.vue b/client/src/components/Collections/common/CollectionEditView.vue
index 4565dfde3c3..8e4dbe08f62 100644
--- a/client/src/components/Collections/common/CollectionEditView.vue
+++ b/client/src/components/Collections/common/CollectionEditView.vue
@@ -1,6 +1,6 @@
 <template>
-    <div>
-        <h4>{{ l("Edit Collection Attributes") }}</h4>
+    <div aria-labelledby="collection-edit-view-heading">
+        <h1 id="collection-edit-view-heading" class="h-lg">{{ l("Edit Collection Attributes") }}</h1>
         <b-alert show variant="info" dismissible>
             {{ l(newCollectionInfoMessage) }}
         </b-alert>
diff --git a/client/src/components/Dataset/DatasetStorage/DatasetStorage.vue b/client/src/components/Dataset/DatasetStorage/DatasetStorage.vue
index 4d3e47d0476..8edb5fc3967 100644
--- a/client/src/components/Dataset/DatasetStorage/DatasetStorage.vue
+++ b/client/src/components/Dataset/DatasetStorage/DatasetStorage.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <h3 v-if="includeTitle">Dataset Storage</h3>
+        <h2 v-if="includeTitle" class="h-md">Dataset Storage</h2>
         <div v-if="errorMessage" class="error">{{ errorMessage }}</div>
         <loading-span v-else-if="storageInfo == null"> </loading-span>
         <div v-else-if="discarded">
diff --git a/client/src/components/DatasetInformation/DatasetAttributes.vue b/client/src/components/DatasetInformation/DatasetAttributes.vue
index 85c11ac9b34..a0ba1641290 100644
--- a/client/src/components/DatasetInformation/DatasetAttributes.vue
+++ b/client/src/components/DatasetInformation/DatasetAttributes.vue
@@ -1,6 +1,6 @@
 <template>
-    <div>
-        <h4 v-localize>Edit Dataset Attributes</h4>
+    <div aria-labelledby="dataset-attributes-heading">
+        <h1 id="dataset-attributes-heading" class="h-lg" v-localize>Edit Dataset Attributes</h1>
         <b-alert v-if="messageText" :variant="messageVariant" show>
             {{ messageText | l }}
         </b-alert>
diff --git a/client/src/components/DatasetInformation/DatasetDetails.vue b/client/src/components/DatasetInformation/DatasetDetails.vue
index d730f4c47f9..9c202627343 100644
--- a/client/src/components/DatasetInformation/DatasetDetails.vue
+++ b/client/src/components/DatasetInformation/DatasetDetails.vue
@@ -3,7 +3,8 @@
         <DatasetProvider
             :id="datasetId"
             v-slot="{ result: dataset, loading: isDatasetLoading, error: datasetLoadingError }">
-            <div>
+            <div aria-labelledby="dataset-details-heading">
+                <h1 id="dataset-details-heading" class="hide-element">Dataset Details</h1>
                 <LoadingSpan v-if="isDatasetLoading" />
                 <Alert v-else-if="datasetLoadingError" :message="datasetLoadingError" variant="error" />
                 <CurrentUser v-else v-slot="{ user }">
@@ -12,33 +13,26 @@
                         v-slot="{ result: job, loading: isJobLoading }"
                         :job-id="dataset.creating_job"
                         auto-refresh>
-                        <div v-if="!isJobLoading">
-                            <dataset-information class="detail" :hda_id="datasetId" />
-                            <job-parameters class="detail" dataset_type="hda" :dataset-id="datasetId" />
-                            <job-information class="detail" :job_id="dataset.creating_job" />
-                            <dataset-storage class="detail" :dataset-id="datasetId" />
-                            <inheritance-chain class="detail" :dataset-id="datasetId" :dataset-name="dataset.name" />
-                            <job-metrics
-                                v-if="config"
-                                class="detail"
-                                :aws_estimate="config.aws_estimate"
-                                :dataset-id="datasetId" />
-                            <job-destination-params
-                                v-if="user.is_admin"
-                                class="detail"
-                                :job-id="dataset.creating_job" />
-                            <job-dependencies class="detail" :dependencies="job.dependencies"></job-dependencies>
-                            <div v-if="dataset.peek" class="detail">
-                                <h3>Dataset Peek:</h3>
+                        <div v-if="!isJobLoading" class="details">
+                            <dataset-information :hda_id="datasetId" />
+                            <job-parameters dataset_type="hda" :dataset-id="datasetId" />
+                            <job-information :job_id="dataset.creating_job" />
+                            <dataset-storage :dataset-id="datasetId" />
+                            <inheritance-chain :dataset-id="datasetId" :dataset-name="dataset.name" />
+                            <job-metrics v-if="config" :aws_estimate="config.aws_estimate" :dataset-id="datasetId" />
+                            <job-destination-params v-if="user.is_admin" :job-id="dataset.creating_job" />
+                            <job-dependencies :dependencies="job.dependencies"></job-dependencies>
+                            <div v-if="dataset.peek">
+                                <h2 class="h-md">Dataset Peek</h2>
                                 <div v-html="dataset.peek" />
                             </div>
                         </div>
                     </JobDetailsProvider>
-                    <div v-else-if="!isDatasetLoading">
-                        <dataset-information class="detail" :hda_id="datasetId" />
-                        <dataset-storage class="detail" :dataset-id="datasetId" />
+                    <div v-else-if="!isDatasetLoading" class="details">
+                        <dataset-information :hda_id="datasetId" />
+                        <dataset-storage :dataset-id="datasetId" />
                         <div>
-                            <h3>Job Not Found</h3>
+                            <h2 class="h-md">Job Not Found</h2>
                             <p>
                                 No job associated with this dataset is recorded in Galaxy. Galaxy cannot determine full
                                 dataset provenance and history for this dataset.
@@ -97,7 +91,9 @@ export default {
 .tool-title {
     text-align: center;
 }
-.detail {
-    padding-top: 0.6rem;
+.details {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }
 </style>
diff --git a/client/src/components/DatasetInformation/DatasetInformation.vue b/client/src/components/DatasetInformation/DatasetInformation.vue
index 0d78156654d..9152c092464 100644
--- a/client/src/components/DatasetInformation/DatasetInformation.vue
+++ b/client/src/components/DatasetInformation/DatasetInformation.vue
@@ -1,7 +1,7 @@
 <template>
     <DatasetProvider :id="hda_id" v-slot="{ result: dataset, loading }">
         <div v-if="!loading">
-            <h3>Dataset Information</h3>
+            <h2 class="h-md">Dataset Information</h2>
             <table id="dataset-details" class="tabletip info_data_table">
                 <tbody>
                     <tr>
diff --git a/client/src/components/InheritanceChain/InheritanceChain.vue b/client/src/components/InheritanceChain/InheritanceChain.vue
index a8c97986518..45e0a2e89fc 100644
--- a/client/src/components/InheritanceChain/InheritanceChain.vue
+++ b/client/src/components/InheritanceChain/InheritanceChain.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <h3>Inheritance Chain</h3>
+        <h2 class="h-md">Inheritance Chain</h2>
         <div class="current-dataset chain-box">{{ datasetName }}</div>
         <div v-if="inherit_chain && inherit_chain.length > 0">
             <div v-for="({ name, dep }, i) in inherit_chain" :key="i">
diff --git a/client/src/components/JobInformation/JobInformation.vue b/client/src/components/JobInformation/JobInformation.vue
index 9c520be436b..b789b258502 100644
--- a/client/src/components/JobInformation/JobInformation.vue
+++ b/client/src/components/JobInformation/JobInformation.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <job-details-provider auto-refresh :job-id="job_id" @update:result="updateJob" />
-        <h3>Job Information</h3>
+        <h2 class="h-md">Job Information</h2>
         <table id="job-information" class="tabletip info_data_table">
             <tbody>
                 <tr v-if="job && job.tool_id">
diff --git a/client/src/components/JobInformation/JobOutputs.vue b/client/src/components/JobInformation/JobOutputs.vue
index eeea699d376..e0cabc7b751 100644
--- a/client/src/components/JobInformation/JobOutputs.vue
+++ b/client/src/components/JobInformation/JobOutputs.vue
@@ -1,9 +1,9 @@
 <template>
     <div>
-        <h3 v-if="title">
+        <h2 v-if="title" class="h-md">
             {{ title }}
             <span v-if="paginate && totalLength > firstN"> (showing {{ firstN }} of {{ totalLength }}) </span>
-        </h3>
+        </h2>
         <table id="job-outputs" class="tabletip info_data_table">
             <thead>
                 <tr>
diff --git a/client/src/components/JobMetrics/JobMetrics.vue b/client/src/components/JobMetrics/JobMetrics.vue
index 1caa549aba4..bdb43e9b642 100644
--- a/client/src/components/JobMetrics/JobMetrics.vue
+++ b/client/src/components/JobMetrics/JobMetrics.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-if="orderedPlugins.length > 0">
-        <h3 v-if="includeTitle">Job Metrics</h3>
+        <h2 v-if="includeTitle" class="h-md">Job Metrics</h2>
         <div v-for="plugin in orderedPlugins" :key="plugin" class="metrics_plugin">
             <h4 class="metrics_plugin_title">{{ plugin }}</h4>
             <table class="tabletip info_data_table">
diff --git a/client/src/components/JobParameters/JobParameters.vue b/client/src/components/JobParameters/JobParameters.vue
index 35714d36f52..f85356cd188 100644
--- a/client/src/components/JobParameters/JobParameters.vue
+++ b/client/src/components/JobParameters/JobParameters.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div v-if="!isSingleParam" class="tool-parameters">
-            <h3 v-if="includeTitle">Tool Parameters</h3>
+            <h2 v-if="includeTitle" class="h-md">Tool Parameters</h2>
             <table id="tool-parameters" class="tabletip info_data_table">
                 <thead>
                     <tr>
diff --git a/client/src/components/admin/DataManager/DataManagerJobs.vue b/client/src/components/admin/DataManager/DataManagerJobs.vue
index 37ac1c6b4d1..047534ba03b 100644
--- a/client/src/components/admin/DataManager/DataManagerJobs.vue
+++ b/client/src/components/admin/DataManager/DataManagerJobs.vue
@@ -60,7 +60,7 @@
                 </template>
                 <template v-slot:row-details="row">
                     <b-card>
-                        <h5>Command Line</h5>
+                        <h2 class="h-text">Command Line</h2>
                         <pre class="code"><code class="command-line">{{ row.item.commandLine }}</code></pre>
                         <template v-slot:footer>
                             <b-button class="mt-3" @click="row.toggleDetails">Hide Info</b-button>
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index bf6c25206c7..02204913486 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -498,3 +498,15 @@ $ui-margin-horizontal-large: $margin-v * 2;
 .h-text {
     font-size: $font-size-base;
 }
+
+/* hides element in a way where it can still be read by screen-readers */
+.hide-element {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}

From c5fdd7e490417a27978069888f7287fa5158a7a3 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 26 Sep 2022 13:56:22 +0200
Subject: [PATCH 16/25] various heading level changes

---
 .../components/DatasetInformation/DatasetError.vue   | 10 +++++-----
 .../DatasetInformation/DatasetErrorDetails.vue       |  2 +-
 .../Content/Collection/CollectionDescription.vue     | 12 ++++++++++--
 .../History/CurrentCollection/CollectionDetails.vue  |  2 +-
 .../History/CurrentHistory/HistoryNavigation.vue     |  2 +-
 client/src/components/HistoryExport/Index.vue        |  2 +-
 client/src/components/HistoryExport/ToRemoteFile.vue |  2 +-
 .../components/InteractiveTools/InteractiveTools.vue |  4 ++--
 .../components/JobDependencies/JobDependencies.vue   |  2 +-
 client/src/components/JobInformation/JobDetails.vue  |  4 ++--
 client/src/components/JobMetrics/JobMetrics.vue      |  2 +-
 11 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/client/src/components/DatasetInformation/DatasetError.vue b/client/src/components/DatasetInformation/DatasetError.vue
index fad8c6bf751..29b1888a052 100644
--- a/client/src/components/DatasetInformation/DatasetError.vue
+++ b/client/src/components/DatasetInformation/DatasetError.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <b-alert v-if="errorMessage" variant="danger" show>
-            <h4 class="alert-heading">Failed to access Dataset details.</h4>
+            <h2 class="alert-heading h-sm">Failed to access Dataset details.</h2>
             {{ errorMessage }}
         </b-alert>
         <DatasetProvider :id="datasetId" v-slot="{ result: dataset, loading: datasetLoading }">
@@ -14,7 +14,7 @@
                     <div class="page-container edit-attr">
                         <div class="response-message"></div>
                     </div>
-                    <h2>Dataset Error Report</h2>
+                    <h3 class="h-lg">Dataset Error Report</h3>
                     <p>
                         An error occurred while running the tool
                         <b id="dataset-error-tool-id" class="text-break">{{ jobDetails.tool_id }}</b
@@ -29,7 +29,7 @@
                         :job-id="dataset.creating_job"
                         @error="onError">
                         <div v-if="jobProblems && (jobProblems.has_duplicate_inputs || jobProblems.has_empty_inputs)">
-                            <h3 class="common_problems mt-3">Detected Common Potential Problems</h3>
+                            <h4 class="common_problems mt-3 h-md">Detected Common Potential Problems</h4>
                             <p v-if="jobProblems.has_empty_inputs" id="dataset-error-has-empty-inputs">
                                 The tool was started with one or more empty input datasets. This frequently results in
                                 tool errors due to problematic input choices.
@@ -40,7 +40,7 @@
                             </p>
                         </div>
                     </JobProblemProvider>
-                    <h3 class="mt-3">Troubleshooting</h3>
+                    <h4 class="mt-3 h-md">Troubleshooting</h4>
                     <p>
                         There are a number of helpful resources to self diagnose and correct problems.
                         <br />
@@ -53,7 +53,7 @@
                             </a>
                         </b>
                     </p>
-                    <h3 class="mb-3">Issue Report</h3>
+                    <h4 class="mb-3 h-md">Issue Report</h4>
                     <b-alert
                         v-for="(resultMessage, index) in resultMessages"
                         :key="index"
diff --git a/client/src/components/DatasetInformation/DatasetErrorDetails.vue b/client/src/components/DatasetInformation/DatasetErrorDetails.vue
index e2f98519d44..8707f6b78d1 100644
--- a/client/src/components/DatasetInformation/DatasetErrorDetails.vue
+++ b/client/src/components/DatasetInformation/DatasetErrorDetails.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-if="hasDetails">
-        <h3>Details</h3>
+        <h4 class="h-md">Details</h4>
         <div v-if="hasMessages" id="dataset-error-job-messages">
             <p>Execution resulted in the following messages:</p>
             <div v-for="(jobMessage, index) in jobMessages" :key="index">
diff --git a/client/src/components/History/Content/Collection/CollectionDescription.vue b/client/src/components/History/Content/Collection/CollectionDescription.vue
index 2cdcdd75814..8c27d3e0640 100644
--- a/client/src/components/History/Content/Collection/CollectionDescription.vue
+++ b/client/src/components/History/Content/Collection/CollectionDescription.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
-        <h6 class="description mt-1">
+        <span class="description mt-1 mb-1">
             a {{ collectionLabel }} with {{ elementCount }}<b>{{ homogeneousDatatype }}</b> {{ pluralizedItem }}
-        </h6>
+        </span>
         <CollectionProgress v-if="jobStateSummary.size != 0" :summary="jobStateSummary" />
     </div>
 </template>
@@ -68,3 +68,11 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+@import "scss/theme/blue.scss";
+
+.description {
+    font-size: $h6-font-size;
+}
+</style>
diff --git a/client/src/components/History/CurrentCollection/CollectionDetails.vue b/client/src/components/History/CurrentCollection/CollectionDetails.vue
index 7cae6c7cae3..58c077a777b 100644
--- a/client/src/components/History/CurrentCollection/CollectionDetails.vue
+++ b/client/src/components/History/CurrentCollection/CollectionDetails.vue
@@ -7,7 +7,7 @@
         @save="$emit('update:dsc', $event)">
         <template v-slot:name>
             <!-- eslint-disable-next-line vuejs-accessibility/heading-has-content -->
-            <h3 v-short="dsc.name || 'Collection'" data-description="collection name display" />
+            <h2 class="h-md" v-short="dsc.name || 'Collection'" data-description="collection name display" />
             <CollectionDescription
                 :job-state-summary="jobState"
                 :collection-type="dsc.collection_type"
diff --git a/client/src/components/History/CurrentHistory/HistoryNavigation.vue b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
index 63cc5d36892..9d73f41cf6a 100644
--- a/client/src/components/History/CurrentHistory/HistoryNavigation.vue
+++ b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
@@ -4,7 +4,7 @@
 <template>
     <div>
         <nav class="d-flex justify-content-between mx-3 my-2">
-            <h4 class="m-1">History</h4>
+            <h2 class="m-1 h-sm">History</h2>
             <b-button-group>
                 <b-button
                     v-b-tooltip.bottom.hover
diff --git a/client/src/components/HistoryExport/Index.vue b/client/src/components/HistoryExport/Index.vue
index 4043afbaa1e..9f46ef1167e 100644
--- a/client/src/components/HistoryExport/Index.vue
+++ b/client/src/components/HistoryExport/Index.vue
@@ -1,6 +1,6 @@
 <template>
     <span class="history-export-component">
-        <h2>Export history archive</h2>
+        <h1 class="h-lg">Export history archive</h1>
         <span v-if="initializingFileSources">
             <loading-span :message="initializeFileSourcesMessage" />
         </span>
diff --git a/client/src/components/HistoryExport/ToRemoteFile.vue b/client/src/components/HistoryExport/ToRemoteFile.vue
index a06509acc81..f63cbfc75ee 100644
--- a/client/src/components/HistoryExport/ToRemoteFile.vue
+++ b/client/src/components/HistoryExport/ToRemoteFile.vue
@@ -13,7 +13,7 @@
         </div>
         <div v-else-if="jobComplete">
             <b-alert show variant="success" dismissible @dismissed="reset">
-                <h4>Done!</h4>
+                <h2 class="h-sm">Done!</h2>
                 <p>History successfully exported.</p>
             </b-alert>
         </div>
diff --git a/client/src/components/InteractiveTools/InteractiveTools.vue b/client/src/components/InteractiveTools/InteractiveTools.vue
index 2894344ac04..36979e66c86 100644
--- a/client/src/components/InteractiveTools/InteractiveTools.vue
+++ b/client/src/components/InteractiveTools/InteractiveTools.vue
@@ -1,7 +1,7 @@
 <template>
-    <div>
+    <div aria-labelledby="interactive-tools-heading">
         <b-alert v-for="(message, index) in messages" :key="index" :show="3" variant="danger">{{ message }}</b-alert>
-        <h2>Active Interactive Tools</h2>
+        <h1 id="interactive-tools-heading" class="h-lg">Active Interactive Tools</h1>
         <b-row class="mb-3">
             <b-col cols="6">
                 <b-input
diff --git a/client/src/components/JobDependencies/JobDependencies.vue b/client/src/components/JobDependencies/JobDependencies.vue
index 072523ea076..6706df51415 100644
--- a/client/src/components/JobDependencies/JobDependencies.vue
+++ b/client/src/components/JobDependencies/JobDependencies.vue
@@ -1,7 +1,7 @@
 <template>
     <CurrentUser v-if="dependencies && dependencies.length > 0" v-slot="{ user }">
         <div>
-            <h3>Job Dependencies</h3>
+            <h2 class="h-md">Job Dependencies</h2>
             <table class="tabletip">
                 <thead>
                     <tr>
diff --git a/client/src/components/JobInformation/JobDetails.vue b/client/src/components/JobInformation/JobDetails.vue
index 91a05163e5b..30e6d6aa272 100644
--- a/client/src/components/JobInformation/JobDetails.vue
+++ b/client/src/components/JobInformation/JobDetails.vue
@@ -21,10 +21,10 @@
             </tr>
         </job-information>
         <br />
-        <h3>Job Parameters</h3>
+        <h2 class="h-md">Job Parameters</h2>
         <job-parameters :job-id="id" :include-title="false" />
         <br />
-        <h3>Job Metrics</h3>
+        <h2 class="h-md">Job Metrics</h2>
         <job-metrics :job-id="id" :include-title="false" />
     </b-card>
 </template>
diff --git a/client/src/components/JobMetrics/JobMetrics.vue b/client/src/components/JobMetrics/JobMetrics.vue
index bdb43e9b642..b2533db21f5 100644
--- a/client/src/components/JobMetrics/JobMetrics.vue
+++ b/client/src/components/JobMetrics/JobMetrics.vue
@@ -2,7 +2,7 @@
     <div v-if="orderedPlugins.length > 0">
         <h2 v-if="includeTitle" class="h-md">Job Metrics</h2>
         <div v-for="plugin in orderedPlugins" :key="plugin" class="metrics_plugin">
-            <h4 class="metrics_plugin_title">{{ plugin }}</h4>
+            <h3 class="metrics_plugin_title m-sm">{{ plugin }}</h3>
             <table class="tabletip info_data_table">
                 <tbody>
                     <tr v-for="(metricValue, metricTitle) in metricsByPlugins[plugin]" :key="metricTitle">

From ade78eb5940e961f4e4762a313d25d3d3ba098a8 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 21 Oct 2022 12:26:59 +0200
Subject: [PATCH 17/25] refactor heading levels unify heading sizes

---
 .../Collections/common/ChangeDatatypeTab.vue           |  2 +-
 .../components/Collections/common/DatabaseEditTab.vue  |  2 +-
 .../Collections/common/SuitableConvertersTab.vue       |  2 +-
 client/src/components/Common/Published.vue             |  8 ++++----
 .../JobDestinationParams/JobDestinationParams.vue      |  2 +-
 .../LibraryFolder/FolderDetails/FolderDetails.vue      |  8 ++++----
 .../LibraryFolder/TopToolbar/FolderTopBar.vue          |  2 +-
 .../LibraryPermissions/LibraryPermissions.vue          |  2 +-
 .../LibraryPermissions/PermissionsInputField.vue       |  4 ++--
 client/src/components/Markdown/Markdown.vue            |  4 ++--
 client/src/components/Markdown/MarkdownSelector.vue    |  2 +-
 .../components/NewUserWelcome/components/Slides.vue    |  6 +++---
 .../components/NewUserWelcome/components/Subtopics.vue |  2 +-
 .../components/NewUserWelcome/components/Topics.vue    |  2 +-
 .../components/Panels/Common/ToolAdvancedSearch.vue    |  6 +-----
 client/src/components/Panels/ToolBoxWorkflow.vue       |  2 +-
 client/src/components/Sharing/Sharing.vue              |  4 ++--
 .../src/components/Toolshed/InstalledList/Monitor.vue  |  2 +-
 .../RepositoryDetails/InstallationSettings.vue         |  4 ++--
 client/src/components/Tour/TourList.vue                |  4 ++--
 client/src/components/Upload/UploadModal.vue           |  2 +-
 client/src/components/User/APIKey/APIKey.vue           |  2 +-
 client/src/components/User/CloudAuth/CloudAuth.vue     |  2 +-
 client/src/components/User/CloudAuth/CloudAuthItem.vue |  2 +-
 client/src/components/User/CustomBuilds.vue            | 10 +++++-----
 .../src/components/User/DiskUsage/DiskUsageSummary.vue |  2 +-
 .../Management/Cleanup/CleanupOperationSummary.vue     |  2 +-
 .../User/DiskUsage/Quota/QuotaUsageSummary.vue         |  6 +++---
 .../src/components/User/DiskUsage/StorageDashboard.vue |  2 +-
 .../User/ExternalIdentities/ExternalIdentities.vue     |  6 +++---
 client/src/components/User/UserPreferences.vue         |  2 +-
 .../src/components/Workflow/Editor/Recommendations.vue |  2 +-
 client/src/components/Workflow/Editor/ReportHelp.vue   |  8 ++++----
 .../src/components/Workflow/Import/FromFileOrUrl.vue   |  2 +-
 client/src/components/Workflow/Run/WorkflowRun.vue     |  2 +-
 client/src/components/Workflow/WorkflowExport.vue      |  2 +-
 client/src/components/Workflow/WorkflowImport.vue      |  6 +++---
 37 files changed, 63 insertions(+), 67 deletions(-)

diff --git a/client/src/components/Collections/common/ChangeDatatypeTab.vue b/client/src/components/Collections/common/ChangeDatatypeTab.vue
index 46f8e57f687..c547c2daf28 100644
--- a/client/src/components/Collections/common/ChangeDatatypeTab.vue
+++ b/client/src/components/Collections/common/ChangeDatatypeTab.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div>
-            <h4 class="float-left">Change Datatype/Extension of all elements in collection</h4>
+            <span class="float-left h-sm">Change Datatype/Extension of all elements in collection</span>
             <div class="text-right">
                 <button
                     class="save-datatype-edit btn btn-primary"
diff --git a/client/src/components/Collections/common/DatabaseEditTab.vue b/client/src/components/Collections/common/DatabaseEditTab.vue
index ce71f85f1d2..0817a05223c 100644
--- a/client/src/components/Collections/common/DatabaseEditTab.vue
+++ b/client/src/components/Collections/common/DatabaseEditTab.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div>
-            <h4 class="float-left">Change Database/Build of all elements in collection</h4>
+            <span class="float-left h-sm">Change Database/Build of all elements in collection</span>
             <div class="text-right">
                 <button
                     class="save-dbkey-edit btn btn-primary"
diff --git a/client/src/components/Collections/common/SuitableConvertersTab.vue b/client/src/components/Collections/common/SuitableConvertersTab.vue
index af74075723c..d1ce4a1bcd3 100644
--- a/client/src/components/Collections/common/SuitableConvertersTab.vue
+++ b/client/src/components/Collections/common/SuitableConvertersTab.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div>
-            <h4 class="float-left">Convert all datasets to new format</h4>
+            <span class="float-left h-sm">Convert all datasets to new format</span>
             <div class="text-right">
                 <button
                     class="run-tool-collection-edit btn btn-primary"
diff --git a/client/src/components/Common/Published.vue b/client/src/components/Common/Published.vue
index 73ace311f09..063b53a6f10 100644
--- a/client/src/components/Common/Published.vue
+++ b/client/src/components/Common/Published.vue
@@ -10,14 +10,14 @@
         <div id="right">
             <div class="m-3">
                 <div v-if="modelTitle">
-                    <h4>About this {{ modelTitle }}</h4>
-                    <h3>{{ details.title || details.name }}</h3>
+                    <h1 class="h-sm">About this {{ modelTitle }}</h1>
+                    <h2 class="h-md">{{ details.title || details.name }}</h2>
                     <StatelessTags v-if="details.tags" class="tags mt-2" :value="details.tags" :disabled="true" />
                     <br />
-                    <h4>Author</h4>
+                    <h2 class="h-sm">Author</h2>
                     <div>{{ owner }}</div>
                     <hr />
-                    <h4>Related Pages</h4>
+                    <h2 class="h-sm">Related Pages</h2>
                     <div>
                         <router-link :to="urlAll">All published {{ plural }}.</router-link>
                     </div>
diff --git a/client/src/components/JobDestinationParams/JobDestinationParams.vue b/client/src/components/JobDestinationParams/JobDestinationParams.vue
index e03bf65aa3d..25c45f43647 100644
--- a/client/src/components/JobDestinationParams/JobDestinationParams.vue
+++ b/client/src/components/JobDestinationParams/JobDestinationParams.vue
@@ -1,7 +1,7 @@
 <template>
     <CurrentUser v-slot="{ user }">
         <div v-if="user.is_admin">
-            <h3>Destination Parameters</h3>
+            <h2 class="h-md">Destination Parameters</h2>
             <table id="destination_parameters" class="tabletip info_data_table">
                 <tbody>
                     <tr v-for="(value, title) in jobDestinationParams" :key="title">
diff --git a/client/src/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue b/client/src/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue
index 6015662b951..bcfd25374ab 100644
--- a/client/src/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue
+++ b/client/src/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue
@@ -27,9 +27,9 @@
                         thead-class="d-none"
                         data-testid="library-table">
                         <template v-slot:table-caption>
-                            <h4>
+                            <h2 class="h-sm">
                                 <b>{{ libraryHeader }}</b>
-                            </h4>
+                            </h2>
                         </template>
                     </b-table-lite>
                 </div>
@@ -43,9 +43,9 @@
                         thead-class="d-none"
                         data-testid="folder-table">
                         <template v-slot:table-caption>
-                            <h4>
+                            <h2 class="h-sm">
                                 <b>{{ folderHeader }}</b>
-                            </h4>
+                            </h2>
                         </template>
                         <template v-slot:cell(value)="row">
                             <div v-if="row.item.name === libraryFieldTitles.create_time_pretty">
diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
index 261b343607e..514f135b45a 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
@@ -38,7 +38,7 @@
                                     from User Directory
                                 </a>
                                 <div v-if="library_import_dir || allow_library_path_paste">
-                                    <h5 class="dropdown-header cursor-pointer">Admins only</h5>
+                                    <h2 class="dropdown-header cursor-pointer h-text">Admins only</h2>
                                     <a
                                         v-if="library_import_dir"
                                         class="dropdown-item cursor-pointer"
diff --git a/client/src/components/Libraries/LibraryPermissions/LibraryPermissions.vue b/client/src/components/Libraries/LibraryPermissions/LibraryPermissions.vue
index c6c5cc335b4..977e523bf41 100644
--- a/client/src/components/Libraries/LibraryPermissions/LibraryPermissions.vue
+++ b/client/src/components/Libraries/LibraryPermissions/LibraryPermissions.vue
@@ -2,7 +2,7 @@
     <div>
         <b-button variant="link" @click="onGoBack">Go back to Libraries</b-button>
         <PermissionsHeader v-if="library" :name="library.name" />
-        <h2 class="text-center">Library permissions</h2>
+        <h1 class="text-center h-lg">Library permissions</h1>
         <PermissionsInputField
             v-if="access_library_role_list"
             :id="library_id"
diff --git a/client/src/components/Libraries/LibraryPermissions/PermissionsInputField.vue b/client/src/components/Libraries/LibraryPermissions/PermissionsInputField.vue
index 3f7e95922b8..c1b971ab211 100644
--- a/client/src/components/Libraries/LibraryPermissions/PermissionsInputField.vue
+++ b/client/src/components/Libraries/LibraryPermissions/PermissionsInputField.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
-        <h4>
+        <h2 class="h-sm">
             {{ title }}
-        </h4>
+        </h2>
         <b-row>
             <b-col>
                 <div v-if="options && value" :class="permission_type">
diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index 85b3cd3c0b4..41b1d47ed64 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -20,7 +20,7 @@
                     @click="$emit('onEdit')">
                     <font-awesome-icon icon="edit" />
                 </b-button>
-                <h3 class="float-right align-middle mr-1 mt-2">Galaxy {{ markdownConfig.model_class }}</h3>
+                <h1 class="float-right align-middle mr-1 mt-2 h-md">Galaxy {{ markdownConfig.model_class }}</h1>
                 <span class="float-left font-weight-light mb-3">
                     <small>Title: {{ markdownConfig.title || markdownConfig.model_class }}</small>
                     <br />
@@ -34,7 +34,7 @@
             <div>
                 <b-alert v-if="markdownErrors.length > 0" variant="warning" show>
                     <div v-for="(obj, index) in markdownErrors" :key="index" class="mb-1">
-                        <h5>{{ obj.error || "Error" }}</h5>
+                        <h2 class="h-text">{{ obj.error || "Error" }}</h2>
                         {{ obj.line }}
                     </div>
                 </b-alert>
diff --git a/client/src/components/Markdown/MarkdownSelector.vue b/client/src/components/Markdown/MarkdownSelector.vue
index b4c3ca6e338..ca1921f311b 100644
--- a/client/src/components/Markdown/MarkdownSelector.vue
+++ b/client/src/components/Markdown/MarkdownSelector.vue
@@ -2,7 +2,7 @@
     <span>
         <b-modal v-model="modalShow" :title="title" ok-title="Continue" @ok="onOk" @cancel="onCancel">
             <div class="ml-2">
-                <h5 class="mb-3">Select {{ labelTitle }} Label:</h5>
+                <h2 class="mb-3 h-text">Select {{ labelTitle }} Label:</h2>
                 <div v-if="hasLabels">
                     <b-form-radio
                         v-for="(label, index) in labels"
diff --git a/client/src/components/NewUserWelcome/components/Slides.vue b/client/src/components/NewUserWelcome/components/Slides.vue
index 41318f57c77..ed49bcd8ffa 100644
--- a/client/src/components/NewUserWelcome/components/Slides.vue
+++ b/client/src/components/NewUserWelcome/components/Slides.vue
@@ -6,13 +6,13 @@
         <hr />
         <b-carousel indicators controls :interval="0" no-animation align="center" position="float">
             <b-carousel-slide v-for="(slide, idx) in slides" :key="idx">
-                <h3 class="carousel-caption">
+                <h2 class="carousel-caption h-md">
                     {{ slide.text | localize }}
-                </h3>
+                </h2>
                 <img class="carousel-fig" :src="imgUrl(slide.file)" :class="slide.size" :alt="slide.alt" />
             </b-carousel-slide>
             <b-carousel-slide>
-                <h3>{{ "Enjoy using Galaxy!" | localize }}</h3>
+                <h2 class="h-md">{{ "Enjoy using Galaxy!" | localize }}</h2>
                 <img class="large-img" :src="imgUrl('sections/galaxy_logo.png')" alt="Galaxy logo" />
             </b-carousel-slide>
         </b-carousel>
diff --git a/client/src/components/NewUserWelcome/components/Subtopics.vue b/client/src/components/NewUserWelcome/components/Subtopics.vue
index 609ff31af91..4a0bf275fe9 100644
--- a/client/src/components/NewUserWelcome/components/Subtopics.vue
+++ b/client/src/components/NewUserWelcome/components/Subtopics.vue
@@ -2,7 +2,7 @@
     <div>
         <header class="main-header">
             <h1 class="text-center my-3">{{ title | localize }}</h1>
-            <h4 class="text-center my-3">{{ intro | localize }}</h4>
+            <h2 class="text-center my-3 h-sm">{{ intro | localize }}</h2>
         </header>
         <b-row class="justify-content-md-center mb-3">
             <b-card-group v-for="(subject, idx) in topics" :key="idx">
diff --git a/client/src/components/NewUserWelcome/components/Topics.vue b/client/src/components/NewUserWelcome/components/Topics.vue
index c82d71ee1b2..aa458d428b6 100644
--- a/client/src/components/NewUserWelcome/components/Topics.vue
+++ b/client/src/components/NewUserWelcome/components/Topics.vue
@@ -2,7 +2,7 @@
     <div>
         <header class="main-header">
             <h1 class="text-center my-3">{{ title | localize }}</h1>
-            <h4 class="text-center my-3">{{ intro | localize }}</h4>
+            <h2 class="text-center my-3 h-sm">{{ intro | localize }}</h2>
         </header>
         <b-row class="justify-content-md-center mb-3">
             <b-card-group v-for="(subject, idx) in topics" :key="idx">
diff --git a/client/src/components/Panels/Common/ToolAdvancedSearch.vue b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
index 18b3f9aee82..f2f392fc775 100644
--- a/client/src/components/Panels/Common/ToolAdvancedSearch.vue
+++ b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
@@ -2,11 +2,7 @@
     <ToolsProvider v-slot="{ loading, result: itemsLoaded }" :filter-settings="filterSettings">
         <section class="overflow-auto h-100" @scroll="onScroll">
             <div class="mb-2">
-                <span class="row mb-1">
-                    <span class="col">
-                        <h4 class="d-inline-block">Advanced Tool Search Results</h4>
-                    </span>
-                </span>
+                <h1 class="h-lg mb-2">Advanced Tool Search Results</h1>
                 <span v-if="itemsLoaded.length !== 0 && hasFilters" class="row">
                     <span class="col d-inline-block">
                         Found {{ itemsLoaded.length }} tools for
diff --git a/client/src/components/Panels/ToolBoxWorkflow.vue b/client/src/components/Panels/ToolBoxWorkflow.vue
index 075a11d34a3..b2ea93baf06 100644
--- a/client/src/components/Panels/ToolBoxWorkflow.vue
+++ b/client/src/components/Panels/ToolBoxWorkflow.vue
@@ -3,7 +3,7 @@
         <div unselectable="on">
             <div class="unified-panel-header-inner">
                 <nav class="d-flex justify-content-between mx-3 my-2">
-                    <h4 v-localize class="m-1">Tools</h4>
+                    <h2 v-localize class="m-1 h-sm">Tools</h2>
                     <div class="panel-header-buttons">
                         <panel-view-button
                             v-if="panelViews && Object.keys(panelViews).length > 1"
diff --git a/client/src/components/Sharing/Sharing.vue b/client/src/components/Sharing/Sharing.vue
index bbb87cc7afa..ec76ea6ee98 100644
--- a/client/src/components/Sharing/Sharing.vue
+++ b/client/src/components/Sharing/Sharing.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
-        <h3>
+        <h1 class="h-lg">
             Share or Publish {{ modelClass }} <span v-if="ready">`{{ item.title }}`</span>
-        </h3>
+        </h1>
         <div v-for="error in errors" :key="error">
             <b-alert show variant="danger" dismissible @dismissed="errors = errors.filter((e) => e !== error)">
                 <ErrorMessage :message="error" :root="root()"> </ErrorMessage>
diff --git a/client/src/components/Toolshed/InstalledList/Monitor.vue b/client/src/components/Toolshed/InstalledList/Monitor.vue
index a1f194c7a0a..a47d3b97f05 100644
--- a/client/src/components/Toolshed/InstalledList/Monitor.vue
+++ b/client/src/components/Toolshed/InstalledList/Monitor.vue
@@ -4,7 +4,7 @@
             {{ error }}
         </b-alert>
         <b-card v-if="showItems" no-body class="my-2">
-            <h5 class="m-3">Currently installing...</h5>
+            <h2 class="m-3 h-text">Currently installing...</h2>
             <b-table
                 class="mx-3 mb-0"
                 sticky-header
diff --git a/client/src/components/Toolshed/RepositoryDetails/InstallationSettings.vue b/client/src/components/Toolshed/RepositoryDetails/InstallationSettings.vue
index 95e696846f8..0bdf515db1f 100644
--- a/client/src/components/Toolshed/RepositoryDetails/InstallationSettings.vue
+++ b/client/src/components/Toolshed/RepositoryDetails/InstallationSettings.vue
@@ -1,9 +1,9 @@
 <template>
     <b-modal id="repo-install-settings" v-model="modalShow" :static="modalStatic" @ok="onOk" @hide="onHide">
         <template v-slot:modal-header>
-            <h4 class="title m-0">
+            <h2 class="title m-0 h-sm">
                 {{ modalTitle }}
-            </h4>
+            </h2>
         </template>
         <div class="description mb-1">
             {{ repo.long_description || repo.description }}
diff --git a/client/src/components/Tour/TourList.vue b/client/src/components/Tour/TourList.vue
index 3e8320fcdde..39d20bcdb80 100644
--- a/client/src/components/Tour/TourList.vue
+++ b/client/src/components/Tour/TourList.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="ui-thumbnails">
-        <h2>Galaxy Tours</h2>
+        <h1 class="h-lg">Galaxy Tours</h1>
         <p>
             This page presents a list of interactive tours available on this Galaxy server. Select any tour to get
             started (and remember, you can click 'End Tour' at any time).
         </p>
-        <h4>Tours</h4>
+        <h2 class="h-sm">Tours</h2>
         <div v-if="error" class="alert alert-danger">{{ error }}</div>
         <div v-else>
             <DelayedInput class="mb-3" :query="search" :placeholder="searchTours" :delay="0" @change="onSearch" />
diff --git a/client/src/components/Upload/UploadModal.vue b/client/src/components/Upload/UploadModal.vue
index 6bd89a2f129..832a28c590a 100644
--- a/client/src/components/Upload/UploadModal.vue
+++ b/client/src/components/Upload/UploadModal.vue
@@ -16,7 +16,7 @@ Provides user and current history to modal because it currently has initializati
                 no-enforce-focus
                 hide-footer>
                 <template v-slot:modal-header>
-                    <h4 class="title" tabindex="0">{{ title | localize }}</h4>
+                    <h2 class="title h-sm" tabindex="0">{{ title | localize }}</h2>
                 </template>
 
                 <UploadModalContent
diff --git a/client/src/components/User/APIKey/APIKey.vue b/client/src/components/User/APIKey/APIKey.vue
index e6875c6523e..557de33be38 100644
--- a/client/src/components/User/APIKey/APIKey.vue
+++ b/client/src/components/User/APIKey/APIKey.vue
@@ -32,7 +32,7 @@ getAPIKey();
 
 <template>
     <section class="api-key d-flex flex-column">
-        <h2 v-localize>Manage API Key</h2>
+        <h1 class="h-lg" v-localize>Manage API Key</h1>
 
         <span v-localize class="mb-2">
             An API key will allow you to access via web API. Please note that this key acts as an alternate means to
diff --git a/client/src/components/User/CloudAuth/CloudAuth.vue b/client/src/components/User/CloudAuth/CloudAuth.vue
index cc4a969280c..cb2541c858c 100644
--- a/client/src/components/User/CloudAuth/CloudAuth.vue
+++ b/client/src/components/User/CloudAuth/CloudAuth.vue
@@ -6,7 +6,7 @@
             </b-alert>
 
             <hgroup class="cloud-auth-title">
-                <h1 v-localize>Manage Cloud Authorization</h1>
+                <h1 class="h-lg" v-localize>Manage Cloud Authorization</h1>
                 <nav class="operations">
                     <ul>
                         <li class="cloudKeyHelp">
diff --git a/client/src/components/User/CloudAuth/CloudAuthItem.vue b/client/src/components/User/CloudAuth/CloudAuthItem.vue
index f3c3389e15f..08d7438432a 100644
--- a/client/src/components/User/CloudAuth/CloudAuthItem.vue
+++ b/client/src/components/User/CloudAuth/CloudAuthItem.vue
@@ -2,7 +2,7 @@
     <b-list-group-item class="cloud-auth-key" :class="statusClasses" :variant="variant" :button="!expanded">
         <header>
             <hgroup>
-                <h4 @click.prevent="expand()">{{ credential.title }}</h4>
+                <h2 class="h-sm" @click.prevent="expand()">{{ credential.title }}</h2>
                 <nav class="operations">
                     <ul>
                         <transition name="fade">
diff --git a/client/src/components/User/CustomBuilds.vue b/client/src/components/User/CustomBuilds.vue
index 579017d1628..89dcb76d563 100644
--- a/client/src/components/User/CustomBuilds.vue
+++ b/client/src/components/User/CustomBuilds.vue
@@ -2,7 +2,7 @@
     <b-container>
         <b-row>
             <b-col>
-                <h4>Current Custom Builds</h4>
+                <h1 class="h-sm">Current Custom Builds</h1>
             </b-col>
         </b-row>
         <b-row>
@@ -23,7 +23,7 @@
         <template v-if="installedBuilds.length > 0">
             <b-row class="mt-2">
                 <b-col>
-                    <h4>System Installed Builds</h4>
+                    <h2 class="h-sm">System Installed Builds</h2>
                 </b-col>
             </b-row>
             <b-row>
@@ -42,7 +42,7 @@
         </template>
         <b-row>
             <b-col>
-                <h4>Add a Custom Build</h4>
+                <h2 class="h-sm">Add a Custom Build</h2>
             </b-col>
         </b-row>
         <b-row>
@@ -107,7 +107,7 @@
             </b-col>
             <b-col>
                 <b-card v-if="selectedDataSource === 'fasta'" class="alert-info">
-                    <h4>FASTA format</h4>
+                    <h2 class="h-sm">FASTA format</h2>
                     <p class="card-text">
                         This is a multi-fasta file from your current history that provides the genome sequences for each
                         chromosome/contig in your build.
@@ -124,7 +124,7 @@ GGCGGCCGCGGCGATATAGAACTACTCATTATATATA...
                     >
                 </b-card>
                 <b-card v-else class="alert-info">
-                    <h4>Length Format</h4>
+                    <h2 class="h-sm">Length Format</h2>
                     <p class="card-text">The length format is two-column, separated by whitespace, of the form:</p>
                     <pre class="card-text">chrom/contig   length of chrom/contig</pre>
                     <p class="card-text">For example, the first few entries of <em>mm9.len</em> are as follows:</p>
diff --git a/client/src/components/User/DiskUsage/DiskUsageSummary.vue b/client/src/components/User/DiskUsage/DiskUsageSummary.vue
index 4a3666c33c7..f3aaa09b2d4 100644
--- a/client/src/components/User/DiskUsage/DiskUsageSummary.vue
+++ b/client/src/components/User/DiskUsage/DiskUsageSummary.vue
@@ -3,7 +3,7 @@
         <CurrentUser v-slot="{ user }">
             <div>
                 <b-alert v-if="errorMessage" variant="danger" show>
-                    <h4 class="alert-heading">{{ errorMessageTitle }}</h4>
+                    <h2 class="alert-heading h-sm">{{ errorMessageTitle }}</h2>
                     {{ errorMessage }}
                 </b-alert>
                 <b-container v-if="user">
diff --git a/client/src/components/User/DiskUsage/Management/Cleanup/CleanupOperationSummary.vue b/client/src/components/User/DiskUsage/Management/Cleanup/CleanupOperationSummary.vue
index 21f1145de71..346551d03ca 100644
--- a/client/src/components/User/DiskUsage/Management/Cleanup/CleanupOperationSummary.vue
+++ b/client/src/components/User/DiskUsage/Management/Cleanup/CleanupOperationSummary.vue
@@ -7,7 +7,7 @@
         <template v-slot:footer>
             <div v-if="!loading">
                 <b-alert v-if="errorMessage" variant="danger" show data-test-id="error-alert">
-                    <h4 class="alert-heading">Failed to retrieve details.</h4>
+                    <h2 class="alert-heading h-sm">Failed to retrieve details.</h2>
                     {{ errorMessage }}
                 </b-alert>
                 <b-link
diff --git a/client/src/components/User/DiskUsage/Quota/QuotaUsageSummary.vue b/client/src/components/User/DiskUsage/Quota/QuotaUsageSummary.vue
index b43db12ea33..f77f2c5bedb 100644
--- a/client/src/components/User/DiskUsage/Quota/QuotaUsageSummary.vue
+++ b/client/src/components/User/DiskUsage/Quota/QuotaUsageSummary.vue
@@ -3,16 +3,16 @@
         <div class="text-center my-5">
             <div v-if="allSourcesUnlimited">
                 <h2>You've got <b>unlimited</b> disk quota</h2>
-                <h4 v-localize>All your storage sources have unlimited disk space. Enjoy!</h4>
+                <h3 class="h-sm" v-localize>All your storage sources have unlimited disk space. Enjoy!</h3>
             </div>
             <div v-else>
                 <h2>
                     You've got <b> {{ niceTotalQuota }} </b> of total disk quota
                 </h2>
-                <h4 v-localize>
+                <h3 class="h-sm" v-localize>
                     This is the maximum disk space that you can use across all your storage sources. Unlimited storage
                     sources are not taken into account
-                </h4>
+                </h3>
             </div>
         </div>
 
diff --git a/client/src/components/User/DiskUsage/StorageDashboard.vue b/client/src/components/User/DiskUsage/StorageDashboard.vue
index 164ac0187f7..9b2b921a3ff 100644
--- a/client/src/components/User/DiskUsage/StorageDashboard.vue
+++ b/client/src/components/User/DiskUsage/StorageDashboard.vue
@@ -4,7 +4,7 @@
             <h1 class="text-center my-3">
                 <b>{{ title }}</b>
             </h1>
-            <h4 class="text-center my-3">{{ subtitle }}</h4>
+            <h2 class="text-center my-3 h-sm">{{ subtitle }}</h2>
         </header>
         <DiskUsageSummary class="m-3" />
         <IconCard
diff --git a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue b/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
index 2e7f4c5d8f6..56aac75ac99 100644
--- a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
@@ -11,7 +11,7 @@
             >
 
             <hgroup class="external-id-title">
-                <h1>Manage External Identities</h1>
+                <h1 class="h-lg">Manage External Identities</h1>
             </hgroup>
 
             <p>
@@ -29,7 +29,7 @@
         </header>
 
         <div v-if="items.length" class="external-subheading">
-            <h3>Connected External Identities</h3>
+            <h2 class="h-md">Connected External Identities</h2>
             <b-button
                 v-for="item in items"
                 :key="item.email"
@@ -75,7 +75,7 @@
         </div>
 
         <div v-if="enable_oidc" class="external-subheading">
-            <h3>Connect Other External Identities</h3>
+            <h2 class="h-md">Connect Other External Identities</h2>
             <external-login :login_page="false" />
         </div>
     </section>
diff --git a/client/src/components/User/UserPreferences.vue b/client/src/components/User/UserPreferences.vue
index b0d4d628c25..6c156e34fad 100644
--- a/client/src/components/User/UserPreferences.vue
+++ b/client/src/components/User/UserPreferences.vue
@@ -1,6 +1,6 @@
 <template>
     <b-container fluid class="p-0">
-        <h2 v-localize>User preferences</h2>
+        <h1 class="h-lg" v-localize>User preferences</h1>
         <b-alert :variant="messageVariant" :show="!!message">
             {{ message }}
         </b-alert>
diff --git a/client/src/components/Workflow/Editor/Recommendations.vue b/client/src/components/Workflow/Editor/Recommendations.vue
index 895d32c7b50..af3ce035e64 100644
--- a/client/src/components/Workflow/Editor/Recommendations.vue
+++ b/client/src/components/Workflow/Editor/Recommendations.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="workflow-recommendations">
         <div class="header-background">
-            <h4>{{ popoverHeaderText }}</h4>
+            <h2 class="h-sm">{{ popoverHeaderText }}</h2>
         </div>
         <LoadingSpan v-if="showLoading" message="Loading recommendations" />
         <div v-if="compatibleTools.length > 0 && !isDeprecated">
diff --git a/client/src/components/Workflow/Editor/ReportHelp.vue b/client/src/components/Workflow/Editor/ReportHelp.vue
index 556b5a39208..bb5fe3f6335 100644
--- a/client/src/components/Workflow/Editor/ReportHelp.vue
+++ b/client/src/components/Workflow/Editor/ReportHelp.vue
@@ -1,13 +1,13 @@
 <template>
     <div class="p-4">
-        <h3>Workflow Reports</h3>
+        <h2 class="h-md">Workflow Reports</h2>
         <p>
             The <b>Markdown</b> document you see will be used to generate a workflow invocation report. You can use
             Markdown with embedded commands for extracting and displaying parts of the workflow, its invocation
             metadata, its inputs and outputs, etc..
         </p>
         <div v-html="markdownGeneralHelpHtml" />
-        <h3>Workflow Commands</h3>
+        <h2 class="h-md">Workflow Commands</h2>
         <p>
             These commands do not take any arguments and do reference the whole workflow. For instance, the following
             example would display a representation of the workflow in the resulting report:
@@ -26,7 +26,7 @@ workflow_display()
             <dt><tt>invocation_outputs</tt></dt>
             <dd>Embed the labeled workflow outputs in the resulting report.</dd>
         </dl>
-        <h3>Step Commands</h3>
+        <h2 class="h-md">Step Commands</h2>
         <p>
             These commands reference a workflow step label and refer to job corresponding to that step. A current
             limitation is the report will break if these refer to a collection mapping step, these must identify a
@@ -55,7 +55,7 @@ job_parameters(step="qc", param="parameter_text")
         <dd>Embed the job metrics for this step in the resulting report (if user has permission).</dd>
         <dt><tt>job_parameters</tt></dt>
         <dd>Embed the tool parameters for this step in the resulting report.</dd>
-        <h3>Input/Output Commands</h3>
+        <h2 class="h-md">Input/Output Commands</h2>
         <p>
             These commands reference a workflow input or output by label. For instance, the following example would
             display the dataset collection corresponding to output "Merged BAM":
diff --git a/client/src/components/Workflow/Import/FromFileOrUrl.vue b/client/src/components/Workflow/Import/FromFileOrUrl.vue
index d93c696bba7..15f2c3e59c8 100644
--- a/client/src/components/Workflow/Import/FromFileOrUrl.vue
+++ b/client/src/components/Workflow/Import/FromFileOrUrl.vue
@@ -48,7 +48,7 @@ const submit = (ev) => {
 
 <template>
     <b-form class="mt-4" @submit="submit">
-        <h4>Import from a Galaxy workflow export URL or a workflow file</h4>
+        <h2 class="h-sm">Import from a Galaxy workflow export URL or a workflow file</h2>
         <b-form-group label="Archived Workflow URL">
             <b-form-input
                 id="workflow-import-url-input"
diff --git a/client/src/components/Workflow/Run/WorkflowRun.vue b/client/src/components/Workflow/Run/WorkflowRun.vue
index 3d630fe7dec..ab70b8cd1eb 100644
--- a/client/src/components/Workflow/Run/WorkflowRun.vue
+++ b/client/src/components/Workflow/Run/WorkflowRun.vue
@@ -1,7 +1,7 @@
 <template>
     <span>
         <b-alert v-if="error" variant="danger" show>
-            <h5>Workflow cannot be executed. Please resolve the following issue:</h5>
+            <h2 class="h-text">Workflow cannot be executed. Please resolve the following issue:</h2>
             {{ error }}
         </b-alert>
         <span v-else>
diff --git a/client/src/components/Workflow/WorkflowExport.vue b/client/src/components/Workflow/WorkflowExport.vue
index 3984d8e48a8..17b423cfc4c 100644
--- a/client/src/components/Workflow/WorkflowExport.vue
+++ b/client/src/components/Workflow/WorkflowExport.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div v-if="workflow">
-            <h3 class="mb-4">Workflow Export of `{{ workflow.name }}`</h3>
+            <h1 class="mb-4 h-lg">Workflow Export of `{{ workflow.name }}`</h1>
             <div v-if="workflow.importable && workflow.slug">
                 <a :href="importUrl">{{ importUrl }}</a>
                 <div>
diff --git a/client/src/components/Workflow/WorkflowImport.vue b/client/src/components/Workflow/WorkflowImport.vue
index c82c9c7b90b..a297ea2c5f2 100644
--- a/client/src/components/Workflow/WorkflowImport.vue
+++ b/client/src/components/Workflow/WorkflowImport.vue
@@ -6,20 +6,20 @@ import FromFileOrUrl from "./Import/FromFileOrUrl";
 
 <template>
     <section>
-        <h3>Import workflow</h3>
+        <h1 class="h-lg">Import workflow</h1>
         <b-tabs fill>
             <b-tab title="Archived file or url" active>
                 <FromFileOrUrl />
             </b-tab>
             <b-tab title="GA4GH servers">
                 <div class="mt-4">
-                    <h4>Import a Workflow from Configured GA4GH Tool Registry Servers (e.g. Dockstore)</h4>
+                    <h2 class="h-sm">Import a Workflow from Configured GA4GH Tool Registry Servers (e.g. Dockstore)</h2>
                     <TrsSearch />
                 </div>
             </b-tab>
             <b-tab title="TRS ID">
                 <div class="mt-4">
-                    <h4>Import from a TRS ID</h4>
+                    <h2 class="h-sm">Import from a TRS ID</h2>
                     <TrsImport />
                 </div>
             </b-tab>

From cfdf67056046fe679aa6cfa41e90c0f7da8d370f Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 21 Oct 2022 12:30:51 +0200
Subject: [PATCH 18/25] remove headings demo

---
 client/src/components/HeadingsDemo.vue | 27 --------------------------
 client/src/entry/analysis/router.js    |  5 -----
 2 files changed, 32 deletions(-)
 delete mode 100644 client/src/components/HeadingsDemo.vue

diff --git a/client/src/components/HeadingsDemo.vue b/client/src/components/HeadingsDemo.vue
deleted file mode 100644
index 5b1b8c2efad..00000000000
--- a/client/src/components/HeadingsDemo.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup>
-import Heading from "./Common/Heading.vue";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faAngleDoubleRight, faAngleRight, faQuestion } from "@fortawesome/free-solid-svg-icons";
-import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
-
-library.add(faAngleDoubleRight);
-library.add(faAngleRight);
-library.add(faQuestion);
-library.add(faQuestionCircle);
-</script>
-
-<template>
-    <div>
-        <Heading>Default Heading</Heading>
-        <Heading h2 size="xl">Large H2 Heading</Heading>
-        <Heading h3 separator size="md">Medium H3 Heading with Separator</Heading>
-        <Heading h3 size="md" icon="fa-angle-right">Heading with Icon</Heading>
-        <Heading h4 size="sm" icon="fa-angle-double-right">Small Heading with Icon</Heading>
-        <Heading h2 bold size="md">Medium Bold H2</Heading>
-        <span> <Heading h3 bold inline size="text">Inline Text Sized Bold H3</Heading> next to some text.</span>
-        <Heading h3 separator bold size="md">Bold H3 with Separator</Heading>
-        <Heading h4 bold size="md" icon="fa-question">Bold Medium H4 with Icon</Heading>
-        <Heading h4 size="sm" icon="far fa-question-circle">Small H4 with Icon</Heading>
-        <Heading h3 separator size="sm">Small H3 with Separator</Heading>
-    </div>
-</template>
diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
index a4f75b7f249..3348ec04db1 100644
--- a/client/src/entry/analysis/router.js
+++ b/client/src/entry/analysis/router.js
@@ -62,7 +62,6 @@ import { CloudAuth } from "components/User/CloudAuth";
 import { ExternalIdentities } from "components/User/ExternalIdentities";
 import { HistoryExport } from "components/HistoryExport/index";
 import { StorageDashboardRouter } from "components/User/DiskUsage";
-import HeadingsDemo from "components/HeadingsDemo";
 
 Vue.use(VueRouter);
 
@@ -472,10 +471,6 @@ export function getRouter(Galaxy) {
                         component: StoredWorkflowInvocations,
                         props: true,
                     },
-                    {
-                        path: "headings_demo",
-                        component: HeadingsDemo,
-                    },
                 ],
             },
         ],

From 3652e8776462e1f97811ca1361f26586036962ef Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 21 Oct 2022 13:05:03 +0200
Subject: [PATCH 19/25] add headings documentation

---
 client/docs/headings.md | 52 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 client/docs/headings.md

diff --git a/client/docs/headings.md b/client/docs/headings.md
new file mode 100644
index 00000000000..a7cf82bfb14
--- /dev/null
+++ b/client/docs/headings.md
@@ -0,0 +1,52 @@
+# Heading Levels and Sizing
+
+Heading Levels are used by screen readers, and other software, to get a rough idea of the document structure, so it is important to keep this structure in mind when deciding on a headings level.
+
+[Further reading on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)
+
+## Heading Level best practices
+
+ - Make sure every route has exactly one `<h1>` element, which best describes the content of the current page.
+
+ - When increasing a heading level, do not skip Levels.
+
+ - Do not use a headings level to determine it's size. Use one of the heading utility classes (e.g. `h-lg`) instead.
+
+ - Do not use a heading tag to make a non-heading text large. Use a heading utility class on a `<span>` instead.
+
+## Sizing Headings
+
+There are several utility classes which size headings:
+
+ - `h-xl` - Extra large headings
+ - `h-lg` - Large headings (most main headings should have this size)
+ - `h-md` - Medium headings
+ - `h-sm` - Small headings (many sub-headings have this size)
+ - `h-text` - Text sized headings
+
+Galaxy uses `h-lg` for most top-level (`<h1>`) headings.
+
+These sizes are purely visual, and do not necessarily have to follow the document structure.
+It is fine to use several headings on the same page with the same heading level, and different sizes. An example for this would be the heading of an error message, which has a heading level of 2 (`<h2>`) in most cases, but is visually smaller than other sub-headings.
+
+## Styling Headings with the `<Heading>` component
+
+For more visually distinct headings, there is an `Heading` component, found under [`components/Common/Heading.vue`](https://github.com/galaxyproject/galaxy/blob/dev/client/src/components/Common/Heading.vue)
+
+Make use of this component to break up flat layouts and add better separation to a page with multiple sections.
+
+### Usage
+
+Set the headings level, by setting aa `h1 ... h6` prop:
+
+```vue
+<Heading h1>Top Level Heading</Heading>
+```
+
+Following properties allow for further styling the component:
+
+ - `size=["xl", "lg", "md", "sm", "text"]` - sets the headings size class
+ - `bold` - makes a heading bold
+ - `inline` - displays the heading inline
+ - `separator` - draws a separating line, to better distinguish sections
+ - `icon="..."` - adds a font-awesome icon decoration to the left of the heading. Make sure to also load the icon with `library.add(...)`.

From 092fcdce72d89ed6d0f36b23073c11f928e9e6ba Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 24 Oct 2022 12:47:59 +0200
Subject: [PATCH 20/25] fix unit tests

---
 .../Dataset/DatasetStorage/DatasetStorage.test.js         | 6 +++---
 client/src/components/JobInformation/JobOutputs.test.js   | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Dataset/DatasetStorage/DatasetStorage.test.js b/client/src/components/Dataset/DatasetStorage/DatasetStorage.test.js
index 6b34492d590..e497c401d75 100644
--- a/client/src/components/Dataset/DatasetStorage/DatasetStorage.test.js
+++ b/client/src/components/Dataset/DatasetStorage/DatasetStorage.test.js
@@ -79,7 +79,7 @@ describe("Dataset Storage", () => {
         await mountWithResponse(TEST_STORAGE_API_RESPONSE_WITHOUT_ID);
         expect(wrapper.findAll("loading-span-stub").length).toBe(0);
         expect(wrapper.vm.descriptionRendered).toBeNull();
-        const header = wrapper.findAll("h3");
+        const header = wrapper.findAll("h2");
         expect(header.length).toBe(1);
         expect(header.at(0).text()).toBe("Dataset Storage");
         const byIdSpan = wrapper.findAll(".display-os-by-id");
@@ -95,7 +95,7 @@ describe("Dataset Storage", () => {
         expect(wrapper.findAll("loading-span-stub").length).toBe(0);
         expect(wrapper.vm.storageInfo.object_store_id).toBe("foobar");
         expect(wrapper.vm.descriptionRendered).toBeNull();
-        const header = wrapper.findAll("h3");
+        const header = wrapper.findAll("h2");
         expect(header.length).toBe(1);
         expect(header.at(0).text()).toBe("Dataset Storage");
         const byIdSpan = wrapper.findAll(".display-os-by-id");
@@ -109,7 +109,7 @@ describe("Dataset Storage", () => {
         expect(wrapper.findAll("loading-span-stub").length).toBe(0);
         expect(wrapper.vm.storageInfo.object_store_id).toBe("foobar");
         expect(wrapper.vm.descriptionRendered).toBe(TEST_RENDERED_MARKDOWN_AS_HTML);
-        const header = wrapper.findAll("h3");
+        const header = wrapper.findAll("h2");
         expect(header.length).toBe(1);
         expect(header.at(0).text()).toBe("Dataset Storage");
         const byIdSpan = wrapper.findAll(".display-os-by-id");
diff --git a/client/src/components/JobInformation/JobOutputs.test.js b/client/src/components/JobInformation/JobOutputs.test.js
index 6aa25d9a26a..505e118af41 100644
--- a/client/src/components/JobInformation/JobOutputs.test.js
+++ b/client/src/components/JobInformation/JobOutputs.test.js
@@ -17,7 +17,7 @@ describe("JobInformation/JobOutputs.vue", () => {
         });
         jobOutputsTable = wrapper.find("#job-outputs");
         // header should exist
-        expect(wrapper.find("h3").text()).toBe("my cool title");
+        expect(wrapper.find("h2").text()).toBe("my cool title");
         // table should exist
         expect(jobOutputsTable).toBeTruthy();
         // title should be set
@@ -38,7 +38,7 @@ describe("JobInformation/JobOutputs.vue", () => {
             propsData,
         });
         // no title
-        expect(wrapper.find("h3").exists()).toBeFalsy();
+        expect(wrapper.find("h2").exists()).toBeFalsy();
         jobOutputsTable = wrapper.find("#job-outputs");
         // table should exist
         expect(jobOutputsTable).toBeTruthy();
@@ -74,7 +74,7 @@ describe("JobInformation/JobOutputs.vue", () => {
         });
         // ---- Before all remaining outputs are paginated: ----
         // heading should exist and include count (due to pagination)
-        expect(wrapper.find("h3").text()).toContain("(showing 10 of " + Object.keys(propsData.jobOutputs).length + ")");
+        expect(wrapper.find("h2").text()).toContain("(showing 10 of " + Object.keys(propsData.jobOutputs).length + ")");
         jobOutputsTable = wrapper.find("#job-outputs");
         // table should exist
         expect(jobOutputsTable).toBeTruthy();
@@ -90,6 +90,6 @@ describe("JobInformation/JobOutputs.vue", () => {
         expect(rows.length).toBe(16);
         expect(wrapper.find("#paginate-btn").exists()).toEqual(false);
         // heading reverts to original value of title (as all ouputs are paginated)
-        expect(wrapper.find("h3").text()).toBe("Job Outputs");
+        expect(wrapper.find("h2").text()).toBe("Job Outputs");
     });
 });

From 74524ac802827c5ef925365dd513af29636dbf5d Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 24 Oct 2022 13:03:06 +0200
Subject: [PATCH 21/25] adjust separator heading gap

---
 client/src/components/Common/Heading.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
index 5373725d2bd..fc790ecba3a 100644
--- a/client/src/components/Common/Heading.vue
+++ b/client/src/components/Common/Heading.vue
@@ -72,7 +72,7 @@ h1, h2, h3, h4, h5, h6 {
 .separator {
     display: grid;
     grid-template-columns: 1rem auto 1fr;
-    gap: 0.5rem;
+    gap: 1rem;
     align-items: center;
     margin-bottom: 0.5rem;
 

From e81ef314411aef8eb5ea8f27905489a1e1dbb4c2 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 24 Oct 2022 13:07:29 +0200
Subject: [PATCH 22/25] remove tool card section

---
 client/src/components/Tool/ToolCard.vue       |  7 +--
 .../src/components/Tool/ToolCardSection.vue   | 43 -------------------
 client/src/components/Tool/ToolForm.vue       | 16 ++++---
 .../Workflow/Editor/Forms/FormTool.vue        | 14 +++---
 4 files changed, 21 insertions(+), 59 deletions(-)
 delete mode 100644 client/src/components/Tool/ToolCardSection.vue

diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue
index 802b2b52b06..1c7b0c7dab1 100644
--- a/client/src/components/Tool/ToolCard.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -5,7 +5,7 @@ import ToolVersionsButton from "components/Tool/Buttons/ToolVersionsButton.vue";
 import ToolOptionsButton from "components/Tool/Buttons/ToolOptionsButton.vue";
 import ToolFooter from "components/Tool/ToolFooter";
 import ToolHelp from "components/Tool/ToolHelp";
-import ToolCardSection from "./ToolCardSection";
+import Heading from "components/Common/Heading";
 
 import { computed, ref, watch } from "vue";
 import { useCurrentUser } from "composables/user";
@@ -114,9 +114,10 @@ const showVersions = computed(() => props.options.versions?.length > 1);
         <slot name="buttons" />
 
         <div>
-            <ToolCardSection title="Help">
+            <div class="mt-2 mb-4">
+                <Heading h2 separator bold size="sm"> Help </Heading>
                 <ToolHelp :content="props.options.help" />
-            </ToolCardSection>
+            </div>
 
             <ToolFooter
                 :id="props.id"
diff --git a/client/src/components/Tool/ToolCardSection.vue b/client/src/components/Tool/ToolCardSection.vue
deleted file mode 100644
index 73a0bea1f5c..00000000000
--- a/client/src/components/Tool/ToolCardSection.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup>
-const props = defineProps({
-    title: {
-        type: String,
-        required: true,
-    },
-});
-</script>
-
-<template>
-    <div class="mt-2 mb-4">
-        <div class="title-bar my-2">
-            <div class="stripe"></div>
-            <h2>{{ props.title }}</h2>
-            <div class="stripe"></div>
-        </div>
-
-        <slot />
-    </div>
-</template>
-
-<style scoped lang="scss">
-@import "scss/theme/blue.scss";
-
-.title-bar {
-    display: grid;
-    grid-template-columns: 1rem auto 1fr;
-    align-items: center;
-    gap: 1rem;
-
-    h2 {
-        font-size: $h4-font-size;
-        margin: 0;
-        font-weight: 700;
-    }
-}
-
-.stripe {
-    display: block;
-    height: 1px;
-    background-color: $brand-secondary;
-}
-</style>
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index d390d31c1a3..020e3f318a1 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -44,18 +44,20 @@
                         itemtype="https://schema.org/CreativeWork"
                         @onChangeVersion="onChangeVersion">
                         <template v-slot:body>
-                            <ToolCardSection title="Tool Parameters">
+                            <div class="mt-2 mb-4">
+                                <Heading h2 separator bold size="sm"> Tool Parameters </Heading>
                                 <FormDisplay
                                     :id="toolId"
                                     :inputs="formConfig.inputs"
                                     :validation-scroll-to="validationScrollTo"
                                     @onChange="onChange"
                                     @onValidation="onValidation" />
-                            </ToolCardSection>
+                            </div>
 
-                            <ToolCardSection
+                            <div
                                 v-if="emailAllowed(config, user) || remapAllowed || reuseAllowed(user)"
-                                title="Additional Options">
+                                class="mt-2 mb-4">
+                                <Heading h2 separator bold size="sm"> Additional Options </Heading>
                                 <FormElement
                                     v-if="emailAllowed(config, user)"
                                     id="send_email_notification"
@@ -77,7 +79,7 @@
                                     title="Attempt to re-use jobs with identical parameters?"
                                     help="This may skip executing jobs that you have already run."
                                     type="boolean" />
-                            </ToolCardSection>
+                            </div>
                         </template>
                         <template v-slot:header-buttons>
                             <ButtonSpinner
@@ -117,10 +119,10 @@ import FormDisplay from "components/Form/FormDisplay";
 import FormElement from "components/Form/FormElement";
 import ToolEntryPoints from "components/ToolEntryPoints/ToolEntryPoints";
 import ToolSuccess from "./ToolSuccess";
-import ToolCardSection from "./ToolCardSection";
 import ToolRecommendation from "../ToolRecommendation";
 import UserHistories from "components/providers/UserHistories";
 import Webhook from "components/Common/Webhook";
+import Heading from "components/Common/Heading";
 
 export default {
     components: {
@@ -136,7 +138,7 @@ export default {
         ToolRecommendation,
         UserHistories,
         Webhook,
-        ToolCardSection,
+        Heading,
     },
     props: {
         id: {
diff --git a/client/src/components/Workflow/Editor/Forms/FormTool.vue b/client/src/components/Workflow/Editor/Forms/FormTool.vue
index 2985c1166dc..628703fc7a6 100644
--- a/client/src/components/Workflow/Editor/Forms/FormTool.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormTool.vue
@@ -27,7 +27,8 @@
                     :area="true"
                     help="Add an annotation or notes to this step. Annotations are available when a workflow is viewed."
                     @input="onAnnotation" />
-                <ToolCardSection title="Tool Parameters">
+                <div class="mt-2 mb-4">
+                    <Heading h2 separator bold size="sm"> Tool Parameters </Heading>
                     <FormDisplay
                         :id="id"
                         :inputs="inputs"
@@ -36,8 +37,9 @@
                         text-disable="Set at Runtime"
                         :workflow-building-mode="true"
                         @onChange="onChange" />
-                </ToolCardSection>
-                <ToolCardSection title="Additional Options">
+                </div>
+                <div class="mt-2 mb-4">
+                    <Heading h2 separator bold size="sm"> Additional Options </Heading>
                     <FormSection
                         :id="nodeId"
                         :node-inputs="nodeInputs"
@@ -46,7 +48,7 @@
                         :datatypes="datatypes"
                         :post-job-actions="postJobActions"
                         @onChange="onChangePostJobActions" />
-                </ToolCardSection>
+                </div>
             </template>
         </ToolCard>
     </CurrentUser>
@@ -56,20 +58,20 @@
 import CurrentUser from "components/providers/CurrentUser";
 import FormDisplay from "components/Form/FormDisplay";
 import ToolCard from "components/Tool/ToolCard";
-import ToolCardSection from "components/Tool/ToolCardSection";
 import FormSection from "./FormSection";
 import FormElement from "components/Form/FormElement";
 import { checkLabels } from "components/Workflow/Editor/modules/utilities";
 import Utils from "utils/utils";
+import Heading from "components/Common/Heading";
 
 export default {
     components: {
         CurrentUser,
         FormDisplay,
         ToolCard,
-        ToolCardSection,
         FormElement,
         FormSection,
+        Heading,
     },
     props: {
         nodeId: {

From ff68ef9d006a3ba90f9b3a1765f84630ca30655b Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 24 Oct 2022 13:12:34 +0200
Subject: [PATCH 23/25] remove margin for inline headings

---
 client/src/components/Common/Heading.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
index fc790ecba3a..cc65a441075 100644
--- a/client/src/components/Common/Heading.vue
+++ b/client/src/components/Common/Heading.vue
@@ -66,6 +66,7 @@ h1, h2, h3, h4, h5, h6 {
 
     &.inline {
         display: inline-flex;
+        margin-bottom: 0;
     }
 }
 

From b8f97099b50dbc8a34d0956a86ef6376a33a8e96 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 24 Oct 2022 13:13:14 +0200
Subject: [PATCH 24/25] remove toolcard heading css override

---
 client/src/components/Tool/ToolCard.vue | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue
index 1c7b0c7dab1..a9ae1a5ce1a 100644
--- a/client/src/components/Tool/ToolCard.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -81,7 +81,7 @@ const showVersions = computed(() => props.options.versions?.length > 1);
                 <div class="py-1 d-flex flex-wrap flex-gapx-1">
                     <span>
                         <icon icon="wrench" class="fa-fw" />
-                        <h1 itemprop="name">{{ props.title }}</h1>
+                        <Heading h1 inline bold size="text" itemprop="name">{{ props.title }}</Heading>
                     </span>
                     <span itemprop="description">{{ props.description }}</span>
                     <span>(Galaxy Version {{ props.version }})</span>
@@ -133,16 +133,6 @@ const showVersions = computed(() => props.options.versions?.length > 1);
 <style lang="scss" scoped>
 @import "scss/theme/blue.scss";
 
-.tool-header {
-    h1 {
-        font-size: 1em;
-        line-height: 1em;
-        font-weight: 700;
-        margin: 0;
-        display: inline;
-    }
-}
-
 .underlay::after {
     content: "";
     display: block;

From c98f0c4ce3b0fb9fda362ae0c99ebe1f41239ed2 Mon Sep 17 00:00:00 2001
From: Dannon <dannon.baker@gmail.com>
Date: Tue, 25 Oct 2022 15:42:25 -0400
Subject: [PATCH 25/25] Update lib/galaxy/webapps/galaxy/buildapp.py

---
 lib/galaxy/webapps/galaxy/buildapp.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/galaxy/webapps/galaxy/buildapp.py b/lib/galaxy/webapps/galaxy/buildapp.py
index 1ba742634a2..ec91cd6cdf0 100644
--- a/lib/galaxy/webapps/galaxy/buildapp.py
+++ b/lib/galaxy/webapps/galaxy/buildapp.py
@@ -271,7 +271,6 @@ def app_pair(global_conf, load_app_kwds=None, wsgi_preflight=True, **kwargs):
     webapp.add_client_route("/interactivetool_entry_points/list")
     webapp.add_client_route("/libraries{path:.*?}")
     webapp.add_client_route("/storage{path:.*?}")
-    webapp.add_client_route("/headings_demo")
 
     # ==== Done
     # Indicate that all configuration settings have been provided