data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix: media nav buttons should be a list (#1648)

Browse source 
More work on #1633, improves accessibility of the media nav buttons by cleaning up the list and labels a bit.
This commit is contained in:
Nolan Lawson 2019-11-23 11:25:42 -08:00 committed by GitHub
parent d03d223fd9
commit 4221ce1c72
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 45 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
src/routes/_components/dialog/components/MediaDialog.html
View file

@ -36,38 +36,46 @@
/>
{/if}
{#if dots.length > 1}
<div class="media-controls">
<IconButton
className="media-control-button"
svgClassName="media-control-button-svg"
disabled={scrolledItem === 0}
label="Show previous media"
href="#fa-angle-left"
on:click="prev()"
/>
{#each dots as dot, i (dot.i)}
<!-- TODO: this should probably be aria-current or something, not a toggle button -->
<!-- Roughly based on https://www.w3.org/WAI/tutorials/carousels/functionality/
Since this toolbar contains a mix of left/right/first/second/third/fourth buttons,
just list them and explicitly label the current one as "current." -->
<ul class="media-controls" aria-label="Navigate media items">
<li class="media-control">
<IconButton
className="media-control-button"
svgClassName="media-control-button-svg"
pressable={true}
label="Show {nth(i)} media"
pressedLabel="Showing {nth(i)} media"
pressed={i === scrolledItem}
href={i === scrolledItem ? '#fa-circle' : '#fa-circle-o'}
sameColorWhenPressed={true}
on:click="onButtonClick(i)"
disabled={scrolledItem === 0}
label="Show previous media"
href="#fa-angle-left"
on:click="prev()"
/>
</li>
{#each dots as dot, i (dot.i)}
<li class="media-control">
<IconButton
className="media-control-button"
svgClassName="media-control-button-svg"
pressable={true}
label="Show {nth(i)} media"
pressedLabel="Show {nth(i)} media (current)"
pressed={i === scrolledItem}
href={i === scrolledItem ? '#fa-circle' : '#fa-circle-o'}
sameColorWhenPressed={true}
on:click="onButtonClick(i)"
/>
</li>
{/each}
<IconButton
className="media-control-button"
svgClassName="media-control-button-svg"
disabled={scrolledItem === length - 1}
label="Show next media"
href="#fa-angle-right"
on:click="next()"
/>
</div>
<li class="media-control">
<IconButton
className="media-control-button"
svgClassName="media-control-button-svg"
disabled={scrolledItem === length - 1}
label="Show next media"
href="#fa-angle-right"
on:click="next()"
/>
</li>
</ul>
{/if}
{#if canPinchZoom}
<IconButton
@ -144,6 +152,16 @@
display: flex;
justify-content: space-between;
}
ul.media-controls {
margin: 0;
padding: 0;
list-style: none;
}
li.media-control {
margin: 0;
padding: 0;
display: flex;
}
:global(.media-pinch-zoom) {
width: 100%;