Add titles for IconButtons (#1245)

web/src/assets/locales/en.json

@@ -9,6 +9,9 @@
     "username": "Username",
     "password": "Password",
     "url": "URL",
+    "back": "Back",
+    "color_scheme_light": "Switch between dark and light mode (currently light mode)",
+    "color_scheme_dark": "Switch between dark and light mode (currently dark mode)",
     "unknown_error": "An unknown error occurred",
     "not_found": {
         "not_found": "Whoa 404, either we broke something or you had a typing mishap :-/",
@@ -116,7 +119,9 @@
                 "events": {
                     "events": "Available at following events",
                     "pr_warning": "Please be careful with this option as a bad actor can submit a malicious pull request that exposes your secrets."
-                }
+                },
+                "edit": "Edit secret",
+                "delete":"Delete secret"
             },
             "registries": {
                 "registries": "Registries",
@@ -132,7 +137,9 @@
                 "address": {
                     "address": "Address",
                     "placeholder": "Registry Address (e.g. docker.io)"
-                }
+                },
+                "edit": "Edit registry",
+                "delete":"Delete registry"
             },
             "crons": {
                 "crons": "Crons",
@@ -157,7 +164,9 @@
                 "schedule": {
                     "title": "Schedule (based on UTC)",
                     "placeholder": "Schedule"
-                }
+                },
+                "edit": "Edit cron",
+                "delete": "Delete cron"
             },
             "badge": {
                 "badge": "Badge",

web/src/components/atomic/IconButton.vue

@@ -3,6 +3,8 @@
     :disabled="disabled"
     class="relative flex items-center justify-center text-color px-1 py-1 rounded-full bg-transparent hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-600 dark:hover:text-gray-700 cursor-pointer transition-all duration-150 focus:outline-none overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
     type="button"
+    :title="title"
+    :aria-label="title"
     @click="doClick"
   >
     <Icon :name="icon" />
@@ -48,6 +50,11 @@ export default defineComponent({
     isLoading: {
       type: Boolean,
     },
+
+    title: {
+      type: String,
+      required: true,
+    },
   },
 
   setup(props) {

web/src/components/layout/header/Navbar.vue

@@ -22,6 +22,7 @@
       <IconButton
         :icon="darkMode ? 'dark' : 'light'"
         class="!text-white !dark:text-gray-500 navbar-icon"
+        :title="darkMode ? $t('color_scheme_dark') : $t('color_scheme_light')"
         @click="darkMode = !darkMode"
       />
       <!-- Admin Settings -->
@@ -29,6 +30,7 @@
         v-if="user?.admin"
         icon="settings"
         class="!text-white !dark:text-gray-500 navbar-icon"
+        :title="$t('admin.settings.settings')"
         :to="{ name: 'admin-settings' }"
       />
       <!-- Active Builds Indicator -->

web/src/components/repo/settings/CronTab.vue

@@ -31,11 +31,17 @@
           {{ $t('repo.settings.crons.next_exec') }}: {{ date.toLocaleString(new Date(cron.next_exec * 1000)) }}</span
         >
         <span v-else class="ml-auto">{{ $t('repo.settings.crons.not_executed_yet') }}</span>
-        <IconButton icon="edit" class="ml-auto w-8 h-8" @click="selectedCron = cron" />
+        <IconButton
+          icon="edit"
+          class="ml-auto w-8 h-8"
+          :title="$t('repo.settings.crons.edit')"
+          @click="selectedCron = cron"
+        />
         <IconButton
           icon="trash"
           class="w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
           :is-loading="isDeleting"
+          :title="$t('repo.settings.crons.delete')"
           @click="deleteCron(cron)"
         />
       </ListItem>

web/src/components/repo/settings/RegistriesTab.vue

@@ -27,11 +27,17 @@
     <div v-if="!selectedRegistry" class="space-y-4 text-color">
       <ListItem v-for="registry in registries" :key="registry.id" class="items-center">
         <span>{{ registry.address }}</span>
-        <IconButton icon="edit" class="ml-auto w-8 h-8" @click="selectedRegistry = registry" />
+        <IconButton
+          icon="edit"
+          class="ml-auto w-8 h-8"
+          :title="$t('repo.settings.registries.edit')"
+          @click="selectedRegistry = registry"
+        />
         <IconButton
           icon="trash"
           class="w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
           :is-loading="isDeleting"
+          :title="$t('repo.settings.registries.delete')"
           @click="deleteRegistry(registry)"
         />
       </ListItem>

web/src/components/secrets/SecretList.vue

@@ -11,11 +11,17 @@
           {{ event }}
         </span>
       </div>
-      <IconButton icon="edit" class="ml-2 w-8 h-8" @click="editSecret(secret)" />
+      <IconButton
+        icon="edit"
+        class="ml-2 w-8 h-8"
+        :title="$t('repo.settings.secrets.edit')"
+        @click="editSecret(secret)"
+      />
       <IconButton
         icon="trash"
         class="ml-2 w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
         :is-loading="isDeleting"
+        :title="$t('repo.settings.secrets.delete')"
         @click="deleteSecret(secret)"
       />
     </ListItem>

web/src/views/RepoAdd.vue

@@ -1,7 +1,7 @@
 <template>
   <FluidContainer class="flex flex-col">
     <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-dark-200">
-      <IconButton :to="{ name: 'repos' }" icon="back" />
+      <IconButton :to="{ name: 'repos' }" :title="$t('back')" icon="back" />
       <h1 class="text-xl ml-2 text-color">{{ $t('repo.add') }}</h1>
       <TextField v-model="search" class="w-auto ml-auto" :placeholder="$t('search')" />
       <Button

web/src/views/ReposOwner.vue

@@ -3,7 +3,13 @@
     <div class="flex flex-row flex-wrap md:grid md:grid-cols-3 border-b pb-4 mb-4 dark:border-dark-200">
       <h1 class="text-xl text-color">{{ repoOwner }}</h1>
       <TextField v-model="search" class="w-auto md:ml-auto md:mr-auto" :placeholder="$t('search')" />
-      <IconButton v-if="orgPermissions.admin" icon="settings" :to="{ name: 'org-settings' }" class="ml-auto" />
+      <IconButton
+        v-if="orgPermissions.admin"
+        icon="settings"
+        :to="{ name: 'org-settings' }"
+        :title="$t('org.settings.settings')"
+        class="ml-auto"
+      />
     </div>
 
     <div class="space-y-4">

web/src/views/admin/AdminSettings.vue

@@ -1,7 +1,7 @@
 <template>
   <FluidContainer>
     <div class="flex border-b items-center pb-4 mb-4 dark:border-gray-600">
-      <IconButton icon="back" @click="goBack" />
+      <IconButton icon="back" :title="$t('back')" @click="goBack" />
       <h1 class="text-xl ml-2 text-color">{{ $t('admin.settings.settings') }}</h1>
     </div>
 

web/src/views/org/OrgSettings.vue

@@ -1,7 +1,7 @@
 <template>
   <FluidContainer>
     <div class="flex border-b items-center pb-4 mb-4 dark:border-gray-600">
-      <IconButton icon="back" @click="goBack" />
+      <IconButton icon="back" :title="$t('back')" @click="goBack" />
       <h1 class="text-xl ml-2 text-color">{{ $t('org.settings.settings') }}</h1>
     </div>
 

web/src/views/org/OrgWrapper.vue

@@ -4,7 +4,13 @@
       <h1 class="text-xl text-color w-full md:w-auto text-center mb-4 md:mb-0">
         {{ org.name }}
       </h1>
-      <IconButton v-if="orgPermissions.admin" class="ml-2" :to="{ name: 'repo-settings' }" icon="settings" />
+      <IconButton
+        v-if="orgPermissions.admin"
+        class="ml-2"
+        :to="{ name: 'repo-settings' }"
+        :title="$t('org.settings.settings')"
+        icon="settings"
+      />
     </div>
 
     <router-view />

web/src/views/repo/RepoSettings.vue

@@ -1,7 +1,7 @@
 <template>
   <FluidContainer>
     <div class="flex border-b items-center pb-4 mb-4 dark:border-gray-600">
-      <IconButton icon="back" @click="goBack" />
+      <IconButton icon="back" :title="$t('back')" @click="goBack" />
       <h1 class="text-xl ml-2 text-color">{{ $t('repo.settings.settings') }}</h1>
     </div>
 

web/src/views/repo/RepoWrapper.vue

@@ -21,7 +21,13 @@
         <Icon v-else-if="forge === 'bitbucket' || forge === 'stash'" name="bitbucket" />
         <Icon v-else name="repo" />
       </a>
-      <IconButton v-if="repoPermissions.admin" class="ml-2" :to="{ name: 'repo-settings' }" icon="settings" />
+      <IconButton
+        v-if="repoPermissions.admin"
+        class="ml-2"
+        :to="{ name: 'repo-settings' }"
+        :title="$t('repo.settings.settings')"
+        icon="settings"
+      />
     </div>
     <div class="flex flex-wrap gap-y-2 items-center justify-between">
       <Tabs v-model="activeTab" disable-hash-mode class="mb-4">

web/src/views/repo/build/BuildWrapper.vue

@@ -2,7 +2,7 @@
   <template v-if="build && repo">
     <FluidContainer class="flex flex-col min-w-0 dark:border-gray-600">
       <div class="flex mb-2 items-center <md:flex-wrap">
-        <IconButton icon="back" class="flex-shrink-0" @click="goBack" />
+        <IconButton icon="back" :title="$t('back')" class="flex-shrink-0" @click="goBack" />
 
         <h1
           class="order-3 w-full <md:flex-wrap md:order-none md:w-auto md:ml-2 flex text-center text-xl text-color whitespace-nowrap overflow-hidden overflow-ellipsis"