Tooltips (#10039)

First solution for #9828, just using HTML `title` attribute.
enso-org · May 23, 2024 · a0a6f8c · a0a6f8c
1 parent 4ca26c8
commit a0a6f8c
Show file tree

Hide file tree

Showing 18 changed files with 55 additions and 86 deletions.
diff --git a/app/gui2/e2e/collapsingAndEntering.spec.ts b/app/gui2/e2e/collapsingAndEntering.spec.ts
@@ -79,7 +79,7 @@ test('Collapsing nodes', async ({ page }) => {
     .locator('.icon')
     .click({ modifiers: ['Shift'] })
 
-  await page.getByAltText('Group components').click()
+  await page.getByTitle('Group Selected Components').click()
   await expect(locate.graphNode(page)).toHaveCount(initialNodesCount - 2)
   const collapsedNode = locate.graphNodeByBinding(page, 'prod')
   await expect(collapsedNode.locator('.WidgetToken')).toHaveText(['Main', '.', 'collapsed', 'five'])

diff --git a/app/gui2/e2e/componentBrowser.spec.ts b/app/gui2/e2e/componentBrowser.spec.ts
@@ -264,7 +264,7 @@ test('Visualization preview: user visualization selection', async ({ page }) =>
   await expect(input).toHaveValue('4')
   await expect(locate.jsonVisualization(page)).toExist()
   await expect(locate.jsonVisualization(page)).toContainText('"visualizedExpr": "4"')
-  await locate.showVisualizationSelectorButton(page).click()
+  await locate.toggleVisualizationSelectorButton(page).click()
   await page.getByRole('button', { name: 'Table' }).click()
   // The table visualization is not currently working with `executeExpression` (#9194), but we can test that the JSON
   // visualization is no longer selected.

diff --git a/app/gui2/e2e/graphNodeVisualization.spec.ts b/app/gui2/e2e/graphNodeVisualization.spec.ts
@@ -13,7 +13,7 @@ test('node can open and load visualization', async ({ page }) => {
   await locate.toggleVisualizationButton(page).click()
   await expect(locate.anyVisualization(page)).toExist()
   await expect(locate.loadingVisualization(page)).toHaveCount(0)
-  await locate.showVisualizationSelectorButton(page).click()
+  await locate.toggleVisualizationSelectorButton(page).click()
   await page.getByText('JSON').click()
   const vis = locate.jsonVisualization(page)
   await expect(vis).toExist()
@@ -38,7 +38,7 @@ test('Warnings visualization', async ({ page }) => {
   await locate.toggleVisualizationButton(page).click()
   await expect(locate.anyVisualization(page)).toExist()
   await expect(locate.loadingVisualization(page)).toHaveCount(0)
-  await locate.showVisualizationSelectorButton(page).click()
+  await locate.toggleVisualizationSelectorButton(page).click()
   await page.locator('.VisualizationSelector').getByRole('button', { name: 'Warnings' }).click()
   await expect(locate.warningsVisualization(page)).toExist()
   // Click the remove-warnings button, and ensure a node is created.

diff --git a/app/gui2/e2e/locate.ts b/app/gui2/e2e/locate.ts
@@ -44,72 +44,22 @@ function or(a: (page: Locator | Page) => Locator, b: (page: Locator | Page) => L
   return (page: Locator | Page) => a(page).or(b(page))
 }
 
-export function playOrOpenProjectButton(page: Locator | Page) {
-  return page.getByAltText('Open in editor')
+export function toggleVisualizationButton(page: Locator | Page) {
+  return page.getByTitle('Visualization')
 }
 
-// === Auto-evaluation ===
-
-export function enableAutoEvaluationButton(page: Locator | Page) {
-  return page.getByAltText('Enable auto-evaluation')
-}
-
-export function disableAutoEvaluationButton(page: Locator | Page) {
-  return page.getByAltText('Disable auto-evaluation')
-}
-
-export const toggleAutoEvaluationButton = or(
-  enableAutoEvaluationButton,
-  disableAutoEvaluationButton,
-)
-
-// === Documentation ===
-
-export function showDocumentationButton(page: Locator | Page) {
-  return page.getByAltText('Show documentation')
-}
-
-export function hideDocumentationButton(page: Locator | Page) {
-  return page.getByAltText('Hide documentation')
-}
-
-export const toggleDocumentationButton = or(showDocumentationButton, hideDocumentationButton)
-
-// === Visualization ===
-
-export function showVisualizationButton(page: Locator | Page) {
-  return page.getByAltText('Show visualization')
-}
-
-export function hideVisualizationButton(page: Locator | Page) {
-  return page.getByAltText('Hide visualization')
+export function toggleVisualizationSelectorButton(page: Locator | Page) {
+  return page.getByTitle('Visualization Selector')
 }
 
-export const toggleVisualizationButton = or(showVisualizationButton, hideVisualizationButton)
-
-// === Visualization selector ===
-
-export function showVisualizationSelectorButton(page: Locator | Page) {
-  return page.getByAltText('Show visualization selector')
-}
-
-export function hideVisualizationSelectorButton(page: Locator | Page) {
-  return page.getByAltText('Hide visualization selector')
-}
-
-export const toggleVisualizationSelectorButton = or(
-  showVisualizationSelectorButton,
-  hideVisualizationSelectorButton,
-)
-
 // === Fullscreen ===
 
 export function enterFullscreenButton(page: Locator | Page) {
-  return page.getByAltText('Enter fullscreen')
+  return page.getByTitle('Fullscreen')
 }
 
 export function exitFullscreenButton(page: Locator | Page) {
-  return page.getByAltText('Exit fullscreen')
+  return page.getByTitle('Exit Fullscreen')
 }
 
 export const toggleFullscreenButton = or(enterFullscreenButton, exitFullscreenButton)

diff --git a/app/gui2/src/components/CircularMenu.vue b/app/gui2/src/components/CircularMenu.vue
@@ -41,41 +41,42 @@ const showColorPicker = ref(false)
         v-if="isFullMenuVisible"
         name="comment"
         class="slot2"
-        :alt="`Edit comment`"
+        title="Comment"
         @click.stop="emit('startEditingComment')"
       />
       <SvgButton
         v-if="isFullMenuVisible"
         name="paint_palette"
         class="slot3"
-        :alt="`Choose color`"
+        title="Color"
         @click.stop="showColorPicker = true"
       />
       <SvgButton
         v-if="isFullMenuVisible"
         name="trash2"
         class="slot4"
-        :alt="`Delete component`"
+        title="Delete"
         @click.stop="emit('delete')"
       />
       <ToggleIcon
         icon="eye"
         class="slot5"
-        :alt="`${props.isVisualizationVisible ? 'Hide' : 'Show'} visualization`"
+        title="Visualization"
         :modelValue="props.isVisualizationVisible"
         @update:modelValue="emit('update:isVisualizationVisible', $event)"
       />
       <SvgButton
         name="edit"
         class="slot6"
+        title="Code Edit"
         data-testid="edit-button"
         @click.stop="emit('startEditing')"
       />
       <ToggleIcon
         icon="record"
         class="overrideRecordingButton slot7"
         data-testid="overrideRecordingButton"
-        :alt="`${props.isRecordingOverridden ? 'Disable' : 'Enable'} recording`"
+        title="Record"
         :modelValue="props.isRecordingOverridden"
         @update:modelValue="emit('update:isRecordingOverridden', $event)"
       />

diff --git a/app/gui2/src/components/CodeEditor.vue b/app/gui2/src/components/CodeEditor.vue
@@ -347,7 +347,12 @@ const editorStyle = computed(() => {
         <circle cx="14" cy="14" r="1.5" />
       </svg>
     </div>
-    <SvgIcon name="close" class="closeButton button" @click="emit('close')" />
+    <SvgIcon
+      name="close"
+      class="closeButton button"
+      title="Close Code Editor"
+      @click="emit('close')"
+    />
   </div>
 </template>
 

diff --git a/app/gui2/src/components/ExtendedMenu.vue b/app/gui2/src/components/ExtendedMenu.vue
@@ -48,7 +48,12 @@ const toggleDocumentationEditorShortcut = documentationEditorBindings.bindings.t
 </script>
 
 <template>
-  <div ref="buttonElement" class="ExtendedMenu" @click.stop="toggleDropdown">
+  <div
+    ref="buttonElement"
+    class="ExtendedMenu"
+    title="Additional Options"
+    @click.stop="toggleDropdown"
+  >
     <SvgIcon name="3_dot_menu" class="moreIcon" />
   </div>
   <Transition name="dropdown">
@@ -59,16 +64,21 @@ const toggleDocumentationEditorShortcut = documentationEditorBindings.bindings.t
           <SvgButton
             class="zoomButton"
             name="minus"
-            title="Decrease zoom"
+            title="Decrease Zoom"
             @click="emit('zoomOut')"
           />
           <span
             class="zoomScaleLabel"
             v-text="props.zoomLevel ? props.zoomLevel.toFixed(0) + '%' : '?'"
           ></span>
-          <SvgButton class="zoomButton" name="add" title="Increase zoom" @click="emit('zoomIn')" />
+          <SvgButton class="zoomButton" name="add" title="Increase Zoom" @click="emit('zoomIn')" />
           <div class="divider"></div>
-          <SvgButton name="show_all" class="showAllIcon" @click="emit('fitToAllClicked')" />
+          <SvgButton
+            name="show_all"
+            class="showAllIcon"
+            title="Show All Components"
+            @click="emit('fitToAllClicked')"
+          />
         </div>
       </div>
       <div

diff --git a/app/gui2/src/components/GraphEditor.vue b/app/gui2/src/components/GraphEditor.vue
@@ -652,7 +652,7 @@ const groupColors = computed(() => {
       @collapseNodes="collapseNodes"
       @removeNodes="deleteSelected"
     />
-    <PlusButton @click.stop="addNodeAuto()" />
+    <PlusButton title="Add Component" @click.stop="addNodeAuto()" />
     <Transition>
       <Suspense ref="codeEditorArea">
         <CodeEditor v-if="showCodeEditor" @close="showCodeEditor = false" />

diff --git a/app/gui2/src/components/NavBar.vue b/app/gui2/src/components/NavBar.vue
@@ -19,13 +19,15 @@ const emit = defineEmits<{ back: []; forward: []; breadcrumbClick: [index: numbe
         draggable="false"
         class="icon button"
         :class="{ inactive: !props.allowNavigationLeft }"
+        title="Back"
         @click.stop="emit('back')"
       />
       <SvgIcon
         name="arrow_right"
         draggable="false"
         class="icon button"
         :class="{ inactive: !props.allowNavigationRight }"
+        title="Forward"
         @click.stop="emit('forward')"
       />
     </div>

diff --git a/app/gui2/src/components/NavBreadcrumbs.vue b/app/gui2/src/components/NavBreadcrumbs.vue
@@ -23,6 +23,7 @@ const emit = defineEmits<{ selected: [index: number] }>()
       <NavBreadcrumb
         :text="breadcrumb.label"
         :active="breadcrumb.active"
+        :title="index === 0 ? 'Project Name' : ''"
         @click.stop="emit('selected', index)"
       />
     </template>

diff --git a/app/gui2/src/components/RecordControl.vue b/app/gui2/src/components/RecordControl.vue
@@ -12,13 +12,13 @@ const emit = defineEmits<{ recordOnce: []; 'update:recordMode': [enabled: boolea
       <ToggleIcon
         icon="record"
         class="button"
-        :alt="`${props.recordMode ? 'Enable' : 'Disable'} record mode`"
+        title="Record"
         :modelValue="props.recordMode"
         @update:modelValue="emit('update:recordMode', $event)"
       />
     </div>
     <div class="control right-end" @click.stop="() => emit('recordOnce')">
-      <SvgButton alt="Record once" class="button" name="record_once" draggable="false" />
+      <SvgButton title="Record Once" class="button" name="record_once" draggable="false" />
     </div>
   </div>
 </template>

diff --git a/app/gui2/src/components/SelectionMenu.vue b/app/gui2/src/components/SelectionMenu.vue
@@ -16,18 +16,18 @@ const emit = defineEmits<{
     <span
       v-text="`${selectedComponents} component${selectedComponents === 1 ? '' : 's'} selected`"
     />
-    <SvgButton name="group" alt="Group components" @click.stop="emit('collapseNodes')" />
+    <SvgButton name="group" title="Group Selected Components" @click.stop="emit('collapseNodes')" />
     <ToggleIcon
       v-model="showColorPicker"
-      :alt="`${showColorPicker ? 'Hide' : 'Show'} the component color chooser`"
+      title="Color Selected Components"
       icon="paint_palette"
       :class="{
         // Any `pointerdown` event outside the color picker will close it. Ignore clicks that occur while the color
         // picker is open, so that it isn't toggled back open.
         disableInput: showColorPicker,
       }"
     />
-    <SvgButton name="trash" alt="Delete components" @click.stop="emit('removeNodes')" />
+    <SvgButton name="trash" title="Delete Selected Components" @click.stop="emit('removeNodes')" />
     <ColorPickerMenu v-if="showColorPicker" class="submenu" @close="showColorPicker = false" />
   </div>
 </template>

diff --git a/app/gui2/src/components/SmallPlusButton.vue b/app/gui2/src/components/SmallPlusButton.vue
@@ -12,7 +12,7 @@ function addNode() {
 </script>
 
 <template>
-  <div class="SmallPlusButton add-node button" @click.stop="addNode">
+  <div class="SmallPlusButton add-node button" title="Add Component" @click.stop="addNode">
     <SvgIcon name="add" class="icon" />
   </div>
 </template>

diff --git a/app/gui2/src/components/SvgIcon.vue b/app/gui2/src/components/SvgIcon.vue
@@ -10,11 +10,13 @@ import type { Icon } from '@/util/iconName'
 
 const props = defineProps<{
   name: Icon | URLString
+  title?: string
 }>()
 </script>
 
 <template>
   <svg>
+    <title v-if="title" v-text="title"></title>
     <use :href="props.name.includes(':') ? props.name : `${icons}#${props.name}`"></use>
   </svg>
 </template>

diff --git a/app/gui2/src/components/VisualizationContainer.vue b/app/gui2/src/components/VisualizationContainer.vue
@@ -144,15 +144,13 @@ const nodeShortType = computed(() =>
         <div class="toolbar">
           <SvgButton
             :name="config.fullscreen ? 'exit_fullscreen' : 'fullscreen'"
-            :alt="config.fullscreen ? 'Exit fullscreen' : 'Enter fullscreen'"
+            :title="config.fullscreen ? 'Exit Fullscreen' : 'Fullscreen'"
             @click.stop.prevent="(config.fullscreen = !config.fullscreen), blur($event)"
           />
           <div class="icon-container">
             <SvgButton
               :name="config.icon ?? 'columns_increasing'"
-              :alt="
-                isSelectorVisible ? 'Hide visualization selector' : 'Show visualization selector'
-              "
+              title="Visualization Selector"
               @click.stop.prevent="
                 (!isSelectorVisible || isTriggeredByKeyboard($event)) &&
                   (isSelectorVisible = !isSelectorVisible)

diff --git a/app/gui2/src/components/visualizations/HistogramVisualization.vue b/app/gui2/src/components/visualizations/HistogramVisualization.vue
@@ -573,8 +573,8 @@ useEvent(document, 'scroll', endBrushing)
 <template>
   <VisualizationContainer :belowToolbar="true">
     <template #toolbar>
-      <SvgButton name="show_all" alt="Fit all" @click="zoomToSelected(false)" />
-      <SvgButton name="find" alt="Zoom to selected" @click="zoomToSelected(true)" />
+      <SvgButton name="show_all" title="Fit All" @click="zoomToSelected(false)" />
+      <SvgButton name="find" title="Zoom to Selected" @click="zoomToSelected(true)" />
     </template>
     <div ref="containerNode" class="HistogramVisualization" @pointerdown.stop>
       <svg :width="width" :height="height">

diff --git a/app/gui2/src/components/visualizations/ScatterplotVisualization.vue b/app/gui2/src/components/visualizations/ScatterplotVisualization.vue
@@ -539,10 +539,10 @@ useEvent(document, 'keydown', bindings.handler({ zoomToSelected: () => zoomToSel
 <template>
   <VisualizationContainer :belowToolbar="true">
     <template #toolbar>
-      <SvgButton name="show_all" alt="Fit all" @click.stop="zoomToSelected(false)" />
+      <SvgButton name="show_all" title="Fit All" @click.stop="zoomToSelected(false)" />
       <SvgButton
         name="find"
-        alt="Zoom to selected"
+        title="Zoom to Selected"
         :disabled="brushExtent == null"
         @click.stop="zoomToSelected"
       />

diff --git a/app/gui2/src/components/visualizations/WarningsVisualization.vue b/app/gui2/src/components/visualizations/WarningsVisualization.vue
@@ -32,7 +32,7 @@ const config = useVisualizationConfig()
       <SvgButton
         name="not_exclamation"
         data-testid="remove-warnings-button"
-        alt="Remove warnings"
+        title="Remove Warnings"
         :disabled="props.data.length === 0"
         @click="config.createNodes({ content: removeWarnings, commit: true })"
       />