AkkomaGang/akkoma-fe
5
13
Fork 64
Code Issues 81 Pull requests 19 Projects Releases 1 Wiki Activity

a11y: draw gap around notification dot in favicon #94

Merged
floatingghost merged 1 commit from :a11y/colorblind-favicon into develop 2022-08-02 09:14:42 +00:00
Conversation 0 Commits 1 Files changed 1 +9
1 changed files with 9 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/services/favicon_service/favicon_service.js
View file

@ -3,6 +3,7 @@ const createFaviconService = () => {
const faviconWidth = 128 const faviconWidth = 128
const faviconHeight = 128 const faviconHeight = 128
const badgeRadius = 32 const badgeRadius = 32
const gapWidth = 24
const initFaviconService = () => { const initFaviconService = () => {
const nodes = document.querySelectorAll('link[rel="icon"]') const nodes = document.querySelectorAll('link[rel="icon"]')
@ -47,6 +48,14 @@ const createFaviconService = () => {
if (isImageLoaded(favimg)) { if (isImageLoaded(favimg)) {
favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight) 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.fillStyle = badgeColor
favcontext.beginPath() favcontext.beginPath()
favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius, 0, 2 * Math.PI, false) favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius, 0, 2 * Math.PI, false)