fix(*): add title or decorative prop to icons

Kong · Apr 17, 2024 · bc4f713 · bc4f713
1 parent 2dff8c3
commit bc4f713
Show file tree

Hide file tree

Showing 16 changed files with 55 additions and 20 deletions.
diff --git a/src/components/KCheckbox/KCheckbox.vue b/src/components/KCheckbox/KCheckbox.vue
@@ -18,13 +18,15 @@
         v-if="modelValue"
         class="checkbox-icon"
         data-testid="check-icon"
+        decorative
         :size="KUI_ICON_SIZE_40"
         tabindex="-1"
       />
       <IndeterminateSmallIcon
         v-if="isIndeterminate && !modelValue"
         class="checkbox-icon"
         data-testid="indeterminate-icon"
+        decorative
         :size="KUI_ICON_SIZE_40"
         tabindex="-1"
       />

diff --git a/src/components/KCodeBlock/KCodeBlock.vue b/src/components/KCodeBlock/KCodeBlock.vue
@@ -34,11 +34,12 @@
               type="button"
               @click="clearQuery"
             >
-              <CloseIcon />
+              <CloseIcon decorative />
             </button>
             <SearchIcon
               v-else
               class="code-block-search-icon"
+              decorative
             />
           </Transition>
         </template>
@@ -56,6 +57,7 @@
               :color="getIconColor"
               data-testid="code-block-processing-icon"
               :size="KUI_ICON_SIZE_30"
+              title="Loading spinner"
             />
           </Transition>
 
@@ -89,7 +91,7 @@
           :title="`Use regular expression (${ALT_SHORTCUT_LABEL}+R)`"
           @click="toggleRegExpMode"
         >
-          <RegexIcon />
+          <RegexIcon decorative />
         </KCodeBlockIconButton>
 
         <KCodeBlockIconButton
@@ -102,7 +104,7 @@
           :title="`Filter results (${ALT_SHORTCUT_LABEL}+F)`"
           @click="toggleFilterMode"
         >
-          <FilterIcon />
+          <FilterIcon decorative />
         </KCodeBlockIconButton>
 
         <KCodeBlockIconButton
@@ -114,7 +116,7 @@
           title="Previous match (Shift+F3)"
           @click="jumpToPreviousMatch"
         >
-          <ArrowUpIcon />
+          <ArrowUpIcon decorative />
         </KCodeBlockIconButton>
 
         <KCodeBlockIconButton
@@ -126,7 +128,7 @@
           title="Next match (F3)"
           @click="jumpToNextMatch"
         >
-          <ArrowDownIcon />
+          <ArrowDownIcon decorative />
         </KCodeBlockIconButton>
       </div>
     </div>
@@ -204,7 +206,7 @@
           :theme="theme"
           @click="copyCode"
         >
-          <CopyIcon />
+          <CopyIcon decorative />
         </KCodeBlockIconButton>
 
         <slot name="secondary-actions" />

diff --git a/src/components/KCopy/KCopy.vue b/src/components/KCopy/KCopy.vue
@@ -46,6 +46,7 @@
               class="text-icon"
               :hide-title="!!copyTooltip || undefined"
               :size="KUI_ICON_SIZE_30"
+              :title="tooltipText"
             />
           </button>
         </KClipboardProvider>

diff --git a/src/components/KDropdown/KDropdown.vue b/src/components/KDropdown/KDropdown.vue
@@ -36,6 +36,7 @@
               {{ triggerButtonText }}
               <ChevronDownIcon
                 v-if="showCaret"
+                decorative
               />
             </KButton>
           </slot>

diff --git a/src/components/KExternalLink/KExternalLink.vue b/src/components/KExternalLink/KExternalLink.vue
@@ -10,6 +10,7 @@
     <ExternalLinkIcon
       v-if="!hideIcon"
       :size="KUI_ICON_SIZE_30"
+      title="External link icon"
     />
   </a>
 </template>

diff --git a/src/components/KLabel/KLabel.vue b/src/components/KLabel/KLabel.vue
@@ -17,6 +17,7 @@
         class="tooltip-trigger-icon"
         :color="`var(--kui-color-text-neutral, ${KUI_COLOR_TEXT_NEUTRAL})`"
         tabindex="0"
+        title="More info"
       />
       <template #content>
         <slot name="tooltip">{{ info || help }}</slot>

diff --git a/src/components/KModal/KModal.vue b/src/components/KModal/KModal.vue
@@ -46,7 +46,10 @@
                 type="button"
                 @click="$emit('cancel')"
               >
-                <CloseIcon :color="KUI_COLOR_TEXT_NEUTRAL" />
+                <CloseIcon
+                  :color="KUI_COLOR_TEXT_NEUTRAL"
+                  decorative
+                />
               </button>
             </div>
             <div

diff --git a/src/components/KMultiselect/KMultiselect.vue b/src/components/KMultiselect/KMultiselect.vue
@@ -104,7 +104,7 @@
                     type="button"
                     @click="handleItemSelect(item)"
                   >
-                    <CloseIcon />
+                    <CloseIcon decorative />
                   </button>
                 </template>
               </KBadge>
@@ -139,10 +139,12 @@
                 v-else-if="loading"
                 class="multiselect-loading-icon"
                 :size="KUI_ICON_SIZE_40"
+                title="Loading spinner"
               />
               <ChevronDownIcon
                 v-else
                 class="multiselect-chevron-icon"
+                decorative
                 :size="KUI_ICON_SIZE_40"
               />
             </div>

diff --git a/src/components/KPagination/KPagination.vue b/src/components/KPagination/KPagination.vue
@@ -22,7 +22,10 @@
             type="button"
             @click="pageBack"
           >
-            <BackIcon class="pagination-arrow-icon" />
+            <BackIcon
+              class="pagination-arrow-icon"
+              decorative
+            />
           </KButton>
         </li>
         <li v-if="!disablePageJump && firstDetached">
@@ -85,7 +88,10 @@
             type="button"
             @click="pageForward"
           >
-            <ForwardIcon class="pagination-arrow-icon" />
+            <ForwardIcon
+              class="pagination-arrow-icon"
+              decorative
+            />
           </KButton>
         </li>
       </ul>
@@ -113,7 +119,10 @@
           :disabled="pageSizeOptions.length <= 1"
           type="button"
         >
-          {{ pageSizeText }}<ChevronDownIcon v-if="pageSizeOptions.length > 1" />
+          {{ pageSizeText }}<ChevronDownIcon
+            v-if="pageSizeOptions.length > 1"
+            decorative
+          />
         </KButton>
       </KDropdown>
     </div>

diff --git a/src/components/KPagination/PaginationOffset.vue b/src/components/KPagination/PaginationOffset.vue
@@ -9,7 +9,7 @@
       type="button"
       @click.prevent="emit('getPreviousOffset')"
     >
-      <BackIcon />
+      <BackIcon decorative />
     </KButton>
     <KButton
       appearance="tertiary"
@@ -20,7 +20,7 @@
       type="button"
       @click.prevent="emit('getNextOffset')"
     >
-      <ForwardIcon />
+      <ForwardIcon decorative />
     </KButton>
   </div>
 </template>

diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue
@@ -69,11 +69,12 @@
                 type="button"
                 @click="clearSelection"
               >
-                <CloseIcon />
+                <CloseIcon decorative />
               </button>
               <ChevronDownIcon
                 class="chevron-down-icon"
                 :class="{ 'disabled': isDisabled }"
+                decorative
               />
             </template>
             <template
@@ -110,7 +111,10 @@
               data-testid="select-loading"
             >
               <slot name="loading">
-                <ProgressIcon class="loading-icon" />
+                <ProgressIcon
+                  class="loading-icon"
+                  title="Loading in progress"
+                />
               </slot>
             </div>
             <div

diff --git a/src/components/KSkeleton/KSkeleton.vue b/src/components/KSkeleton/KSkeleton.vue
@@ -50,6 +50,7 @@
       v-else-if="type === 'spinner'"
       class="skeleton-spinner"
       :color="KUI_COLOR_TEXT_NEUTRAL"
+      title="Loading in progress"
     />
 
     <Skeleton v-else />

diff --git a/src/components/KSlideout/KSlideout.vue b/src/components/KSlideout/KSlideout.vue
@@ -31,7 +31,10 @@
             type="button"
             @click.stop="$emit('close')"
           >
-            <CloseIcon :color="KUI_COLOR_TEXT_NEUTRAL" />
+            <CloseIcon
+              :color="KUI_COLOR_TEXT_NEUTRAL"
+              decorative
+            />
           </button>
         </div>
         <div class="slideout-content">

diff --git a/src/components/KTable/ColumnVisibilityMenu.vue b/src/components/KTable/ColumnVisibilityMenu.vue
@@ -7,12 +7,13 @@
       <KTooltip text="Show/Hide Columns">
         <KButton
           appearance="secondary"
+          aria-label="Show/Hide Columns"
           class="menu-button"
           data-testid="column-visibility-menu-button"
           size="large"
         >
           <template #icon>
-            <TableColumnsIcon />
+            <TableColumnsIcon decorative />
           </template>
         </KButton>
       </KTooltip>

diff --git a/src/components/KTreeList/KTreeItem.vue b/src/components/KTreeList/KTreeItem.vue
@@ -16,7 +16,7 @@
       data-testid="tree-item-icon"
     >
       <slot name="item-icon">
-        <ServiceDocumentIcon />
+        <ServiceDocumentIcon decorative />
       </slot>
     </div>
     <div

diff --git a/src/components/KTruncate/KTruncate.vue b/src/components/KTruncate/KTruncate.vue
@@ -20,6 +20,7 @@
           :truncated-count="truncatedCount"
         >
           <button
+            :aria-label="`Show ${truncatedCount} more items`"
             class="expand-trigger"
             type="button"
             @click.stop="handleToggleClick"
@@ -43,12 +44,15 @@
           name="collapse-trigger"
         >
           <button
-            aria-label="Toggle"
+            aria-label="Collapse content"
             class="collapse-trigger"
             type="button"
             @click.stop="handleToggleClick"
           >
-            <ChevronUpIcon :size="KUI_ICON_SIZE_30" />
+            <ChevronUpIcon
+              decorative
+              :size="KUI_ICON_SIZE_30"
+            />
           </button>
         </slot>
       </div>