beenull/simple-note
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

changed #id and added .class for <button> description

Browse source 
the new .class is pretty much useless since the element is screen reader only, but i'm adding it for consistency.
This commit is contained in:
westtle 2024-01-29 05:56:02 +07:00
parent 82b8f70e88
commit acf683d88c
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
index.html
View file

@ -22,13 +22,13 @@
<textarea id="simple-note__input--body" class="simple-note__input simple-note__input--body" spellcheck="false">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque amet veniam nulla quia harum explicabo.</textarea>
</div>
<div class="simple-note__buttons">
<button class="simple-note__button simple-note__button--download" aria-label="Download note" aria-describedby="simple-note__button--download">
<button class="simple-note__button simple-note__button--download" aria-label="Download note" aria-describedby="simple-note__button-description--download">
<svg class="simple-note__button-svg" aria-hidden="true" focusable="false" 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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
<span id="simple-note__button--download" class="sr-only">Press to download the contents of the note.</span>
<span id="simple-note__button-description--download" class="simple-note__button-description simple-note__button-description--download sr-only">Press to download the contents of the note.</span>
</button>
<button class="simple-note__button simple-note__button--clear" aria-label="Clear note" aria-describedby="simple-note__button--clear">
<button class="simple-note__button simple-note__button--clear" aria-label="Clear note" aria-describedby="simple-note__button-description--clear">
<svg class="simple-note__button-svg" aria-hidden="true" focusable="false" 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"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
<span id="simple-note__button--clear" class="sr-only">Press to delete all contents of the note.</span>
<span id="simple-note__button-description--clear" class="simple-note__button-description simple-note__button-description--clear sr-only">Press to delete all contents of the note.</span>
</button>
</div>
</section>