From 1e9b8f7ade546a09162240c8aea9490d88a76a7c Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Mon, 1 Aug 2022 10:42:57 +0300
Subject: [PATCH] a11y: draw gap around notification dot in favicon

---
 src/services/favicon_service/favicon_service.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/services/favicon_service/favicon_service.js b/src/services/favicon_service/favicon_service.js
index 7e19629d..801c65b8 100644
--- a/src/services/favicon_service/favicon_service.js
+++ b/src/services/favicon_service/favicon_service.js
@@ -3,6 +3,7 @@ const createFaviconService = () => {
   const faviconWidth = 128
   const faviconHeight = 128
   const badgeRadius = 32
+  const gapWidth = 24
 
   const initFaviconService = () => {
     const nodes = document.querySelectorAll('link[rel="icon"]')
@@ -47,6 +48,14 @@ const createFaviconService = () => {
       if (isImageLoaded(favimg)) {
         favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight)
       }
+
+      // draw bigger transparent circle to create gap
+      favcontext.globalCompositeOperation = 'destination-out'
+      favcontext.beginPath()
+      favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius + gapWidth, 0, 2 * Math.PI, false)
+      favcontext.fill()
+
+      favcontext.globalCompositeOperation = 'source-over'
       favcontext.fillStyle = badgeColor
       favcontext.beginPath()
       favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius, 0, 2 * Math.PI, false)
-- 
2.43.0