opensourcemirror
/
daisyui
mirror of https://github.com/saadeghi/daisyui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Docs: Accessibility Note on Radial Progress Bar (#2474) 

* Add aria role to examples + explanation

* Missing space in last JSX example
This commit is contained in:
jodylecompte 2023-11-08 07:02:41 -06:00 committed by GitHub
parent a2b099cb52
commit bdfcd3fa54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/docs/src/routes/(docs)/components/radial-progress/+page.svelte.md
View File

@ -15,9 +15,11 @@ layout: components
<Translate text="Radial progress needs `--value` CSS variable to work.<br />To change the size, use `--size` CSS variable which has a default value of `4rem`.<br />To change the thickness, use `--thickness` CSS variable which is 10% of the size by default.<br />" />
<div class="alert alert-info text-sm">
<div class="alert alert-info text-sm mt-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info-content flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
For radial progress we use &lt;div&gt; instead of &lt;progress&gt; tag because Browsers are unable to show the text inside &lt;progress&gt; tag and Firefox doesn't show the pseudo elements inside &lt;progress&gt; bar at all.
For accessibility, a role of 'progressbar' is given to each &lt;div&gt; explicitly, while
&lt;progress&gt; receives this role implicitly.
</div>
<ClassTable
@ -27,66 +29,66 @@ data="{[
/>
<Component title="Radial progress">
<div class="radial-progress" style="--value:70;">70%</div>
<div class="radial-progress" style="--value:70;" role="progressbar">70%</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$radial-progress" style="--value:70;">70%</div>`
`<div class="$$radial-progress" style="--value:70;" role="progressbar">70%</div>`
}</pre>
<pre slot="jsx" use:replace={{ to: $prefix }}>{
`<div className="$$radial-progress" style={{"--value":70}}>70%</div>`
`<div className="$$radial-progress" style={{"--value":70}} role="progressbar">70%</div>`
}</pre>
</Component>
<Component title="Different values">
<div class="radial-progress" style="--value:0;">0%</div>
<div class="radial-progress" style="--value:20;">20%</div>
<div class="radial-progress" style="--value:60;">60%</div>
<div class="radial-progress" style="--value:80;">80%</div>
<div class="radial-progress" style="--value:100;">100%</div>
<div class="radial-progress" style="--value:0;" role="progressbar">0%</div>
<div class="radial-progress" style="--value:20;" role="progressbar">20%</div>
<div class="radial-progress" style="--value:60;" role="progressbar">60%</div>
<div class="radial-progress" style="--value:80;" role="progressbar">80%</div>
<div class="radial-progress" style="--value:100;" role="progressbar">100%</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$radial-progress" style="--value:0;">0%</div>
<div class="$$radial-progress" style="--value:20;">20%</div>
<div class="$$radial-progress" style="--value:60;">60%</div>
<div class="$$radial-progress" style="--value:80;">80%</div>
<div class="$$radial-progress" style="--value:100;">100%</div>`
`<div class="$$radial-progress" style="--value:0;" role="progressbar">0%</div>
<div class="$$radial-progress" style="--value:20;" role="progressbar">20%</div>
<div class="$$radial-progress" style="--value:60;" role="progressbar">60%</div>
<div class="$$radial-progress" style="--value:80;" role="progressbar">80%</div>
<div class="$$radial-progress" style="--value:100;" role="progressbar">100%</div>`
}</pre>
<pre slot="jsx" use:replace={{ to: $prefix }}>{
`<div className="$$radial-progress" style={{"--value":0}}>0%</div>
<div className="$$radial-progress" style={{"--value":20}}>20%</div>
<div className="$$radial-progress" style={{"--value":60}}>60%</div>
<div className="$$radial-progress" style={{"--value":80}}>80%</div>
<div className="$$radial-progress" style={{"--value":100}}>100%</div>`
`<div className="$$radial-progress" style={{"--value":0}} role="progressbar">0%</div>
<div className="$$radial-progress" style={{"--value":20}} role="progressbar">20%</div>
<div className="$$radial-progress" style={{"--value":60}} role="progressbar">60%</div>
<div className="$$radial-progress" style={{"--value":80}} role="progressbar">80%</div>
<div className="$$radial-progress" style={{"--value":100}} role="progressbar">100%</div>`
}</pre>
</Component>
<Component title="Custom color">
<div class="radial-progress text-primary" style="--value:70;">70%</div>
<div class="radial-progress text-primary" style="--value:70;" role="progressbar">70%</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$radial-progress text-primary" style="--value:70;">70%</div>`
`<div class="$$radial-progress text-primary" style="--value:70;" role="progressbar">70%</div>`
}</pre>
<pre slot="jsx" use:replace={{ to: $prefix }}>{
`<div className="$$radial-progress text-primary" style={{"--value":70}}>70%</div>`
`<div className="$$radial-progress text-primary" style={{"--value":70}} role="progressbar">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;">70%</div>
<div class="radial-progress bg-primary text-primary-content border-4 border-primary" style="--value:70;" role="progressbar">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;">70%</div>`
`<div class="$$radial-progress bg-primary text-primary-content border-4 border-primary" style="--value:70;" role="progressbar">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}}>70%</div>`
`<div className="$$radial-progress bg-primary text-primary-content border-4 border-primary" style={{"--value":70}} role="progressbar">70%</div>`
}</pre>
</Component>
<Component title="Custom size and custom thickness">
<div class="radial-progress" style="--value:70; --size:12rem; --thickness: 2px;">70%</div>
<div class="radial-progress" style="--value:70; --size:12rem; --thickness: 2rem;">70%</div>
<div class="radial-progress" style="--value:70; --size:12rem; --thickness: 2px;" role="progressbar">70%</div>
<div class="radial-progress" style="--value:70; --size:12rem; --thickness: 2rem;" role="progressbar">70%</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$radial-progress" style="--value:70; --size:12rem; --thickness: 2px;">70%</div>
<div class="$$radial-progress" style="--value:70; --size:12rem; --thickness: 2rem;">70%</div>`
`<div class="$$radial-progress" style="--value:70; --size:12rem; --thickness: 2px;" role="progressbar">70%</div>
<div class="$$radial-progress" style="--value:70; --size:12rem; --thickness: 2rem;" role="progressbar">70%</div>`
}</pre>
<pre slot="jsx" use:replace={{ to: $prefix }}>{
`<div className="$$radial-progress" style={{ "--value": "70", "--size": "12rem", "--thickness": "2px" }}>70%</div>
<div className="$$radial-progress" style={{ "--value": "70", "--size": "12rem", "--thickness": "2rem" }}>70%</div>`
`<div className="$$radial-progress" style={{ "--value": "70", "--size": "12rem", "--thickness": "2px" }} role="progressbar">70%</div>
<div className="$$radial-progress" style={{ "--value": "70", "--size": "12rem", "--thickness": "2rem" }} role="progressbar">70%</div>`
}</pre>
</Component>