Add pointerEvents='none' for svg element click tracking

Author: abhi-agg

src/components/Icons/BugIcon.js

@@ -15,6 +15,7 @@ const BugIcon = () => {
       fill='currentColor'
       className='bi bi-bug'
       viewBox='0 0 16 16'
+      pointerEvents='none'
     >
       <path d='M4.355.522a.5.5 0 0 1 .623.333l.291.956A4.979 4.979 0 0 1 8 1c1.007 0 1.946.298 2.731.811l.29-.956a.5.5 0 1 1 .957.29l-.41 1.352A4.985 4.985 0 0 1 13 6h.5a.5.5 0 0 0 .5-.5V5a.5.5 0 0 1 1 0v.5A1.5 1.5 0 0 1 13.5 7H13v1h1.5a.5.5 0 0 1 0 1H13v1h.5a1.5 1.5 0 0 1 1.5 1.5v.5a.5.5 0 1 1-1 0v-.5a.5.5 0 0 0-.5-.5H13a5 5 0 0 1-10 0h-.5a.5.5 0 0 0-.5.5v.5a.5.5 0 1 1-1 0v-.5A1.5 1.5 0 0 1 2.5 10H3V9H1.5a.5.5 0 0 1 0-1H3V7h-.5A1.5 1.5 0 0 1 1 5.5V5a.5.5 0 0 1 1 0v.5a.5.5 0 0 0 .5.5H3c0-1.364.547-2.601 1.432-3.503l-.41-1.352a.5.5 0 0 1 .333-.623zM4 7v4a4 4 0 0 0 3.5 3.97V7H4zm4.5 0v7.97A4 4 0 0 0 12 11V7H8.5zM12 6a3.989 3.989 0 0 0-1.334-2.982A3.983 3.983 0 0 0 8 2a3.983 3.983 0 0 0-2.667 1.018A3.989 3.989 0 0 0 4 6h8z' />
     </svg>

src/components/Icons/HelpIcon.js

@@ -15,6 +15,7 @@ const HelpIcon = () => {
       fill='currentColor'
       className='bi bi-question-circle'
       viewBox='0 0 16 16'
+      pointerEvents='none'
     >
       <path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z' />
       <path d='M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z' />

src/components/Icons/MoonIcon.js

@@ -8,7 +8,7 @@ import React from 'react';
 
 const MoonIcon = () => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' width='1.75em' height='1.75em' viewBox='0 0 50 50'>
+    <svg xmlns='http://www.w3.org/2000/svg' width='1.75em' height='1.75em' viewBox='0 0 50 50' pointerEvents='none'>
       <path
         d='M 43.81 29.354 C 43.688 28.958 43.413 28.626 43.046 28.432 C 42.679 28.238 42.251 28.198 41.854 28.321 C 36.161 29.886 30.067 28.272 25.894 24.096 C 21.722 19.92 20.113 13.824 21.683 8.133 C 21.848 7.582 21.697 6.985 21.29 6.578 C 20.884 6.172 20.287 6.022 19.736 6.187 C 10.659 8.728 4.691 17.389 5.55 26.776 C 6.408 36.163 13.847 43.598 23.235 44.451 C 32.622 45.304 41.28 39.332 43.816 30.253 C 43.902 29.96 43.9 29.647 43.81 29.354 Z'
         fill='currentColor'

src/components/Icons/SignOut.js

@@ -15,6 +15,7 @@ const SignOutIcon = () => {
       fill='currentColor'
       className='bi bi-box-arrow-right'
       viewBox='0 0 16 16'
+      pointerEvents='none'
     >
       <path
         fillRule='evenodd'

src/components/Icons/SunIcon.js

@@ -14,6 +14,7 @@ const SunIcon = () => {
       viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      pointerEvents='none'
     >
       <circle cx='11.9998' cy='11.9998' r='5.75375' fill='currentColor' />
       <g>

src/components/NavBar.js

@@ -43,6 +43,7 @@ const NavBar = ({ authenticated, theme, themeToggler }) => {
                     target='_blank'
                     rel='noopener noreferrer'
                     style={{ all: 'unset ' }}
+                    data-glean-label='Bug'
                     onClick={() => {
                       recordClick('Bug');
                     }}
@@ -51,7 +52,7 @@ const NavBar = ({ authenticated, theme, themeToggler }) => {
                   </a>
                 </div>
                 <div className='nav-item nav-link cursor-pointer'>
-                  <Link to={`/help`} style={{ all: 'unset' }} onClick={() => {
+                  <Link to={`/help`} style={{ all: 'unset' }} data-glean-label='Help' onClick={() => {
                     recordClick('Help');
                   }}>
                     <HelpIcon />
@@ -60,6 +61,7 @@ const NavBar = ({ authenticated, theme, themeToggler }) => {
                 <div
                   className='nav-item nav-link cursor-pointer'
                   type='btn btn-lg '
+                  data-glean-label='Sign out'
                   onClick={() => {
                     recordClick('Sign out');
                     auth.signOut();

src/components/Theme/ThemeToggle.js

@@ -14,7 +14,7 @@ const ThemeToggle = ({ theme, toggleTheme }) => {
   const isDarkMode = theme === 'dark';
 
   return (
-    <button style={{ all: 'unset', cursor: 'pointer' }} onClick={toggleTheme}>
+    <button style={{ all: 'unset', cursor: 'pointer' }} data-glean-label='Theme' onClick={toggleTheme}>
       {isDarkMode ? <SunIcon /> : <MoonIcon />}
     </button>
   );