From 061d91fa1cc82e2458631d0f77cf057945bb4393 Mon Sep 17 00:00:00 2001
From: Shivam Daksh <shivamdakshshivam@gmail.com>
Date: Tue, 8 Oct 2024 14:31:36 +0530
Subject: [PATCH 1/2] add computedAriaLabel feature

---
 lib/buttons-and-links/KIconButton.vue | 44 ++++-----------------------
 1 file changed, 6 insertions(+), 38 deletions(-)

diff --git a/lib/buttons-and-links/KIconButton.vue b/lib/buttons-and-links/KIconButton.vue
index 5e7e98634..73e64b474 100644
--- a/lib/buttons-and-links/KIconButton.vue
+++ b/lib/buttons-and-links/KIconButton.vue
@@ -6,11 +6,10 @@
     :appearance="appearance"
     :appearanceOverrides="appearanceOverrides"
     :type="buttonType"
-    :aria-label="ariaLabel"
+    :aria-label="computedAriaLabel"
     text=""
     v-on="$listeners"
   >
-    <!-- if no "position" is passed as a prop, defaults to bottom, as previously -->
     <UiTooltip
       v-if="tooltip"
       :zIndex="24"
@@ -19,15 +18,12 @@
     >
       {{ tooltip }}
     </UiTooltip>
-    <!-- UiIconButton used flexbox - 7px is the magic centering number -->
     <KIcon :icon="icon" :color="color" :style="iconStyles" />
-    <!-- @slot Pass sub-components into the button, typically `KDropdownMenu` -->
     <slot name="menu"></slot>
   </KButton>
 
 </template>
 
-
 <script>
 
   import UiTooltip from '../keen/UiTooltip.vue';
@@ -36,65 +32,38 @@
     name: 'KIconButton',
     components: { UiTooltip },
     props: {
-      /**
-       * Name of icon to display
-       */
       icon: {
         type: String,
         required: true,
       },
-      /**
-       * Button appearance: `'raised-button'` or `'flat-button'`
-       */
       appearance: {
         type: String,
         default: 'flat-button',
       },
-      /**
-       * Optional hex or rgb[a] color for the button background
-       */
       color: {
         type: String,
         default: null,
       },
-      /**
-       * Whether or not button is disabled
-       */
       disabled: {
         type: Boolean,
         default: false,
       },
-      /**
-       * HTML button `type` attribute (e.g. `'submit'`, `'reset'`)
-       */
       buttonType: {
         type: String,
         default: 'button',
       },
-      /**
-       * Button size: `'mini'`, `'small'`, `'regular'`, or `'large'`
-       */
       size: {
         type: String,
         default: 'regular',
       },
-      /**
-       * `aria-label` attribute
-       */
       ariaLabel: {
         type: String,
-        default: null, // https://github.com/learningequality/kolibri-design-system/issues/168
+        default: null,
       },
-      /**
-       * Tooltip label
-       */
       tooltip: {
         type: String,
-        default: null, // https://github.com/learningequality/kolibri-design-system/issues/168
+        default: null,
       },
-      /**
-       * Tooltip position: `'top', 'right', 'bottom', 'left'`
-       */
       tooltipPosition: {
         type: String,
         default: 'bottom',
@@ -106,11 +75,8 @@
           this.appearance === 'flat-button' ? { backgroundColor: 'rgba(0,0,0,.1)' } : {};
         return {
           ...this.sizeStyles,
-          // Circle
           borderRadius: '50%',
-          // Added minWidth to prevent squished/oval effect
           minWidth: '32px',
-          // Remove minHeight & padding
           minHeight: '0px',
           padding: '0',
           ':hover': hover,
@@ -139,10 +105,12 @@
             return { ...sizes, top: '7px' };
         }
       },
+      computedAriaLabel() {
+        return this.ariaLabel || this.tooltip;
+      },
     },
   };
 
 </script>
 
-
 <style lang="scss" scoped></style>

From 16fc7812d56f989e40352e67c6e190291f9da0f8 Mon Sep 17 00:00:00 2001
From: Shivam Daksh <shivamdakshshivam@gmail.com>
Date: Tue, 8 Oct 2024 14:37:16 +0530
Subject: [PATCH 2/2] update and cleanup the code

---
 lib/buttons-and-links/KIconButton.vue | 39 +++++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/lib/buttons-and-links/KIconButton.vue b/lib/buttons-and-links/KIconButton.vue
index 73e64b474..e1d8033c8 100644
--- a/lib/buttons-and-links/KIconButton.vue
+++ b/lib/buttons-and-links/KIconButton.vue
@@ -10,6 +10,7 @@
     text=""
     v-on="$listeners"
   >
+    <!-- if no "position" is passed as a prop, defaults to bottom, as previously -->
     <UiTooltip
       v-if="tooltip"
       :zIndex="24"
@@ -18,12 +19,15 @@
     >
       {{ tooltip }}
     </UiTooltip>
+    <!-- UiIconButton used flexbox - 7px is the magic centering number -->
     <KIcon :icon="icon" :color="color" :style="iconStyles" />
+    <!-- @slot Pass sub-components into the button, typically `KDropdownMenu` -->
     <slot name="menu"></slot>
   </KButton>
 
 </template>
 
+
 <script>
 
   import UiTooltip from '../keen/UiTooltip.vue';
@@ -32,38 +36,65 @@
     name: 'KIconButton',
     components: { UiTooltip },
     props: {
+      /**
+       * Name of icon to display
+       */
       icon: {
         type: String,
         required: true,
       },
+      /**
+       * Button appearance: `'raised-button'` or `'flat-button'`
+       */
       appearance: {
         type: String,
         default: 'flat-button',
       },
+      /**
+       * Optional hex or rgb[a] color for the button background
+       */
       color: {
         type: String,
         default: null,
       },
+      /**
+       * Whether or not button is disabled
+       */
       disabled: {
         type: Boolean,
         default: false,
       },
+      /**
+       * HTML button `type` attribute (e.g. `'submit'`, `'reset'`)
+       */
       buttonType: {
         type: String,
         default: 'button',
       },
+      /**
+       * Button size: `'mini'`, `'small'`, `'regular'`, or `'large'`
+       */
       size: {
         type: String,
         default: 'regular',
       },
+      /**
+       * `aria-label` attribute
+       */
       ariaLabel: {
         type: String,
-        default: null,
+        default: null, // https://github.com/learningequality/kolibri-design-system/issues/168
       },
+      /**
+       * Tooltip label
+       */
       tooltip: {
         type: String,
-        default: null,
+        default: null, // https://github.com/learningequality/kolibri-design-system/issues/168
       },
+      /**
+       * Tooltip position: `'top', 'right', 'bottom', 'left'`
+       */
       tooltipPosition: {
         type: String,
         default: 'bottom',
@@ -75,8 +106,11 @@
           this.appearance === 'flat-button' ? { backgroundColor: 'rgba(0,0,0,.1)' } : {};
         return {
           ...this.sizeStyles,
+          // Circle
           borderRadius: '50%',
+          // Added minWidth to prevent squished/oval effect
           minWidth: '32px',
+          // Remove minHeight & padding
           minHeight: '0px',
           padding: '0',
           ':hover': hover,
@@ -113,4 +147,5 @@
 
 </script>
 
+
 <style lang="scss" scoped></style>