vielle.dev / site-archive
[Archived] Archived WIP of vielle.dev
fork atom

Improve accessibility of SVG files

vielle.dev ca62c443 da1bc30d

options
unified split
Changed files
+17 -7
.prettierrc
src
assets
hamburger.svg
x.svg
components
generic
Nav.astro
+10 -2
.prettierrc
··· 1 1 { 2 - "plugins": ["prettier-plugin-astro"], 2 + "plugins": [ 3 + "prettier-plugin-astro" 4 + ], 3 5 "overrides": [ 4 6 { 5 7 "files": "*.astro", 6 8 "options": { 7 9 "parser": "astro" 8 10 } 11 + }, 12 + { 13 + "files": "*.svg", 14 + "options": { 15 + "parser": "html" 16 + } 9 17 } 10 18 ] 11 - } 19 + }
+1 -1
src/assets/hamburger.svg
··· 1 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu-icon lucide-menu"><path d="M4 12h16"/><path d="M4 18h16"/><path d="M4 6h16"/></svg> 1 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu-icon lucide-menu"><title><!-- no alt text as used for buttons --></title><path d="M4 12h16"/><path d="M4 18h16"/><path d="M4 6h16"/></svg>
+1 -1
src/assets/x.svg
··· 1 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> 1 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><title><!-- no alt text as used for buttons --></title><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+5 -3
src/components/generic/Nav.astro
··· 13 13 const { data, startOpen = false, current } = Astro.props; 14 14 --- 15 15 16 - <button popovertarget="nav" popovertargetaction="show"><Hamburger /></button> 16 + <button popovertarget="nav" popovertargetaction="show" aria-label="Nav Menu"> 17 + <Hamburger role="img" /> 18 + </button> 17 19 <dialog closedby="any" open={startOpen} id="nav" popover> 18 20 <div class="top"> 19 21 <h1>{current}</h1> 20 - <button popovertarget="nav" popovertargetaction="hide" 21 - ><X width={32} height={32} /></button 22 + <button popovertarget="nav" popovertargetaction="hide" aria-label="close" 23 + ><X width={32} height={32} role="img" /></button 22 24 > 23 25 </div> 24 26 {(<NavEntry {data} />)}