fix(template): add pointer events rule (#429)

* fix(template): add pointer events rule

* test: regen snapshots

* fix: address pr feedback

* test: regen snapshots

* fix: minor fix

* fix: address pr feedback

* docs: minor tweak

* docs: minor tweak

* fix: address pr feedback

README.md

@@ -81,7 +81,7 @@ Set the CSS `display` property for the icon wrapper element.
 - required: `false`
 - default: `false`
 
-Whether the SVG is meaningful to the page, or just complimentary. Utilized to expose or hide the SVG from screen readers.
+Whether the SVG is meaningful to the page, or just complimentary. Utilized to expose or hide the SVG from screen readers and enable or disable pointer events.
 
 #### `size`
 

src/__template__/ComponentTemplate.vue

@@ -90,14 +90,15 @@ const iconSize = computed((): string => {
  * We are adding styles inline to avoid additional stylesheet imports in the host application/component.
  * All of the properties should be mapped to component props for customization.
  */
-const rootElementStyles = computed((): Record<string, string> => ({
+const rootElementStyles = computed((): Record<string, string | undefined> => ({
   boxSizing: 'border-box',
   color: props.color,
   display: props.display,
   flexShrink: '0',
   height: iconSize.value,
   lineHeight: '0',
   width: iconSize.value,
+  pointerEvents: props.decorative ? 'none' : undefined,
 }))
 
 /**
@@ -155,6 +156,7 @@ const svgProcessedContent = `${svgTitleContent}${!props.staticIds ? prefixSvgIds
     class="kui-icon {%%KONG_COMPONENT_ICON_CLASS%%}"
     data-testid="kui-icon-wrapper-{%%KONG_COMPONENT_ICON_CLASS%%}"
     :style="rootElementStyles"
+    :tabindex="decorative ? '-1' : undefined"
   >
     <svg
       :aria-hidden="decorative ? 'true' : undefined"