Merge pull request #15517 from hujambo-dunia/accessibility-tooltip

Added title on anchor tag on keyboard Focus for W3C Accessibility Compliance
galaxyproject · Feb 15, 2023 · 9de2630 · 9de2630
2 parents 4017e7f + 3826282
commit 9de2630
Showing 1 changed file with 17 additions and 9 deletions.
diff --git a/client/src/components/Workflow/WorkflowDropdown.vue b/client/src/components/Workflow/WorkflowDropdown.vue
@@ -1,22 +1,21 @@
 <template>
     <div>
         <b-link
+            v-b-tooltip.hover
             class="workflow-dropdown font-weight-bold"
             data-toggle="dropdown"
+            :title="getWorkflowTooltip(sourceType, workflow)"
             aria-haspopup="true"
             aria-expanded="false">
             <font-awesome-icon icon="caret-down" />
             <span class="workflow-dropdown-name">{{ workflow.name }}</span>
+            <span v-if="sourceType.includes('trs')">
+                <font-awesome-icon icon="check" class="workflow-trs-icon" />
+            </span>
+            <span v-if="sourceType == 'url'">
+                <font-awesome-icon class="workflow-external-link" icon="link" />
+            </span>
         </b-link>
-        <span
-            v-if="sourceType.includes('trs')"
-            v-b-tooltip.hover
-            :title="`Imported from TRS ID (version ${workflow.source_metadata.trs_version_id})`">
-            <font-awesome-icon icon="check" class="workflow-trs-icon" />
-        </span>
-        <span v-if="sourceType == 'url'" v-b-tooltip.hover :title="`Imported from ${workflow.source_metadata.url}`">
-            <font-awesome-icon class="workflow-external-link" icon="link" />
-        </span>
         <p v-if="workflow.description" class="workflow-dropdown-description">{{ workflow.description }}</p>
         <div class="dropdown-menu" aria-labelledby="workflow-dropdown">
             <a
@@ -218,6 +217,15 @@ export default {
                     this.$emit("onError", error);
                 });
         },
+        getWorkflowTooltip: function (sourceType, workflow) {
+            let tooltip = "";
+            if (sourceType.includes("trs")) {
+                tooltip = `Imported from TRS ID (version ${workflow.source_metadata.trs_version_id})`;
+            } else if (sourceType == "url") {
+                tooltip = `Imported from ${workflow.source_metadata.url}`;
+            }
+            return tooltip;
+        },
     },
 };
 </script>