From 7f61beff7a6597da4b46f74f174a81f29bc0a9a3 Mon Sep 17 00:00:00 2001 From: sfr Date: Tue, 2 Aug 2022 09:14:42 +0000 Subject: [PATCH] a11y: draw gap around notification dot in favicon (#94) Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/94 Co-authored-by: sfr Co-committed-by: sfr --- 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)