fix saadeghi#2950 added aria-valuetext because guidelines state to us…

…e it for extra clarity alongside aria-valuenow
gjvalenz · Apr 14, 2024 · 0c26c24 · 0c26c24
1 parent 74a3551
commit 0c26c24
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 30 deletions.
diff --git a/src/docs/src/routes/(docs)/components/radial-progress/+page.svelte.md b/src/docs/src/routes/(docs)/components/radial-progress/+page.svelte.md
@@ -33,66 +33,66 @@ data="{[
 />
 
 <Component title="Radial progress">
-<div class="radial-progress" style="--value:70;" role="progressbar" aria-valuenow="70">70%</div>
+<div class="radial-progress" style="--value:70;" role="progressbar" aria-valuenow="70" aria-valuetext="70%">70%</div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
-`<div class="$$radial-progress" style="--value:70;" role="progressbar" aria-valuenow="70">70%</div>`
+`<div class="$$radial-progress" style="--value:70;" role="progressbar" aria-valuenow="70" aria-valuetext="70%">70%</div>`
 }</pre>
 <pre slot="jsx" use:replace={{ to: $prefix }}>{
-`<div className="$$radial-progress" style={{"--value":70}} role="progressbar" aria-valuenow="70">70%</div>`
+`<div className="$$radial-progress" style={{"--value":70}} role="progressbar" aria-valuenow="70" aria-valuetext="70%">70%</div>`
 }</pre>
 </Component>
 
 <Component title="Different values">
-<div class="radial-progress" style="--value:0;" role="progressbar" aria-valuenow="0">0%</div>
-<div class="radial-progress" style="--value:20;" role="progressbar" aria-valuenow="20">20%</div>
-<div class="radial-progress" style="--value:60;" role="progressbar" aria-valuenow="60">60%</div>
-<div class="radial-progress" style="--value:80;" role="progressbar" aria-valuenow="80">80%</div>
-<div class="radial-progress" style="--value:100;" role="progressbar" aria-valuenow="100">100%</div>
+<div class="radial-progress" style="--value:0;" role="progressbar" aria-valuenow="0" aria-valuetext="0%">0%</div>
+<div class="radial-progress" style="--value:20;" role="progressbar" aria-valuenow="20" aria-valuetext="20%">20%</div>
+<div class="radial-progress" style="--value:60;" role="progressbar" aria-valuenow="60" aria-valuetext="60%">60%</div>
+<div class="radial-progress" style="--value:80;" role="progressbar" aria-valuenow="80" aria-valuetext="80%">80%</div>
+<div class="radial-progress" style="--value:100;" role="progressbar" aria-valuenow="100" aria-valuetext="100%">100%</div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
-`<div class="$$radial-progress" style="--value:0;" role="progressbar" aria-valuenow="0">0%</div>
-<div class="$$radial-progress" style="--value:20;" role="progressbar" aria-valuenow="20">20%</div>
-<div class="$$radial-progress" style="--value:60;" role="progressbar" aria-valuenow="60">60%</div>
-<div class="$$radial-progress" style="--value:80;" role="progressbar" aria-valuenow="80">80%</div>
-<div class="$$radial-progress" style="--value:100;" role="progressbar" aria-valuenow="100">100%</div>`
+`<div class="$$radial-progress" style="--value:0;" role="progressbar" aria-valuenow="0" aria-valuetext="0%">0%</div>
+<div class="$$radial-progress" style="--value:20;" role="progressbar" aria-valuenow="20" aria-valuetext="20%">20%</div>
+<div class="$$radial-progress" style="--value:60;" role="progressbar" aria-valuenow="60" aria-valuetext="60%">60%</div>
+<div class="$$radial-progress" style="--value:80;" role="progressbar" aria-valuenow="80" aria-valuetext="80%">80%</div>
+<div class="$$radial-progress" style="--value:100;" role="progressbar" aria-valuenow="100" aria-valuetext="100%">100%</div>`
 }</pre>
 <pre slot="jsx" use:replace={{ to: $prefix }}>{
-`<div className="$$radial-progress" style={{"--value":0}} role="progressbar" aria-valuenow="0">0%</div>
-<div className="$$radial-progress" style={{"--value":20}} role="progressbar" aria-valuenow="20">20%</div>
-<div className="$$radial-progress" style={{"--value":60}} role="progressbar" aria-valuenow="60">60%</div>
-<div className="$$radial-progress" style={{"--value":80}} role="progressbar" aria-valuenow="80">80%</div>
-<div className="$$radial-progress" style={{"--value":100}} role="progressbar" aria-valuenow="100">100%</div>`
+`<div className="$$radial-progress" style={{"--value":0}} role="progressbar" aria-valuenow="0" aria-valuetext="0%">0%</div>
+<div className="$$radial-progress" style={{"--value":20}} role="progressbar" aria-valuenow="20" aria-valuetext="20%">20%</div>
+<div className="$$radial-progress" style={{"--value":60}} role="progressbar" aria-valuenow="60" aria-valuetext="60%">60%</div>
+<div className="$$radial-progress" style={{"--value":80}} role="progressbar" aria-valuenow="80" aria-valuetext="80%">80%</div>
+<div className="$$radial-progress" style={{"--value":100}} role="progressbar" aria-valuenow="100" aria-valuetext="100%">100%</div>`
 }</pre>
 </Component>
 
 <Component title="Custom color">
-<div class="radial-progress text-primary" style="--value:70;" role="progressbar" aria-valuenow="70">70%</div>
+<div class="radial-progress text-primary" style="--value:70;" role="progressbar" aria-valuenow="70" aria-valuetext="70%">70%</div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
-`<div class="$$radial-progress text-primary" style="--value:70;" role="progressbar" aria-valuenow="70">70%</div>`
+`<div class="$$radial-progress text-primary" style="--value:70;" role="progressbar" aria-valuenow="70" aria-valuetext="70%">70%</div>`
 }</pre>
 <pre slot="jsx" use:replace={{ to: $prefix }}>{
-`<div className="$$radial-progress text-primary" style={{"--value":70}} role="progressbar" aria-valuenow="70">70%</div>`
+`<div className="$$radial-progress text-primary" style={{"--value":70}} role="progressbar" aria-valuenow="70" aria-valuetext="70%">70%</div>`
 }</pre>
 </Component>
 
 <Component title="With background color and border">
-<div class="radial-progress bg-primary text-primary-content border-4 border-primary" style="--value:70;" role="progressbar" aria-valuenow="70">70%</div>
+<div class="radial-progress bg-primary text-primary-content border-4 border-primary" style="--value:70;" role="progressbar" aria-valuenow="70" aria-valuetext="70%">70%</div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
-`<div class="$$radial-progress bg-primary text-primary-content border-4 border-primary" style="--value:70;" role="progressbar" aria-valuenow="70">70%</div>`
+`<div class="$$radial-progress bg-primary text-primary-content border-4 border-primary" style="--value:70;" role="progressbar" aria-valuenow="70" aria-valuetext="70%">70%</div>`
 }</pre>
 <pre slot="jsx" use:replace={{ to: $prefix }}>{
-`<div className="$$radial-progress bg-primary text-primary-content border-4 border-primary" style={{"--value":70}} role="progressbar" aria-valuenow="70">70%</div>`
+`<div className="$$radial-progress bg-primary text-primary-content border-4 border-primary" style={{"--value":70}} role="progressbar" aria-valuenow="70" aria-valuetext="70%">70%</div>`
 }</pre>
 </Component>
 
 <Component title="Custom size and custom thickness">
-<div class="radial-progress" style="--value:70; --size:12rem; --thickness: 2px;" role="progressbar" aria-valuenow="70">70%</div>
-<div class="radial-progress" style="--value:70; --size:12rem; --thickness: 2rem;" role="progressbar" aria-valuenow="70">70%</div>
+<div class="radial-progress" style="--value:70; --size:12rem; --thickness: 2px;" role="progressbar" aria-valuenow="70" aria-valuetext="70%">70%</div>
+<div class="radial-progress" style="--value:70; --size:12rem; --thickness: 2rem;" role="progressbar" aria-valuenow="70" aria-valuetext="70%">70%</div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
-`<div class="$$radial-progress" style="--value:70; --size:12rem; --thickness: 2px;" role="progressbar" aria-valuenow="70">70%</div>
-<div class="$$radial-progress" style="--value:70; --size:12rem; --thickness: 2rem;" role="progressbar" aria-valuenow="70">70%</div>`
+`<div class="$$radial-progress" style="--value:70; --size:12rem; --thickness: 2px;" role="progressbar" aria-valuenow="70" aria-valuetext="70%">70%</div>
+<div class="$$radial-progress" style="--value:70; --size:12rem; --thickness: 2rem;" role="progressbar" aria-valuenow="70" aria-valuetext="70%">70%</div>`
 }</pre>
 <pre slot="jsx" use:replace={{ to: $prefix }}>{
-`<div className="$$radial-progress" style={{ "--value": "70", "--size": "12rem", "--thickness": "2px" }} role="progressbar" aria-valuenow="70">70%</div>
-<div className="$$radial-progress" style={{ "--value": "70", "--size": "12rem", "--thickness": "2rem" }} role="progressbar" aria-valuenow="70">70%</div>`
+`<div className="$$radial-progress" style={{ "--value": "70", "--size": "12rem", "--thickness": "2px" }} role="progressbar" aria-valuenow="70" aria-valuetext="70%">70%</div>
+<div className="$$radial-progress" style={{ "--value": "70", "--size": "12rem", "--thickness": "2rem" }} role="progressbar" aria-valuenow="70" aria-valuetext="70%">70%</div>`
 }</pre>
 </Component>
diff --git a/src/docs/src/routes/(docs)/components/tab/+page.svelte.md b/src/docs/src/routes/(docs)/components/tab/+page.svelte.md
@@ -170,6 +170,7 @@ data="{[
 }</pre>
 </Component>
 
+<!--  Requires changes to how tablist works to resolve tab accessibility issues -->
 <Component title="radio tab lifted + tab content">
 <div role="tablist" class="tabs tabs-lifted w-full my-10 lg:mx-10">
   <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 1" />