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

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

@ -36,7 +36,11 @@
/> />
{/if} {/if}
{#if dots.length > 1} {#if dots.length > 1}
<div class="media-controls"> <!-- 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 <IconButton
className="media-control-button" className="media-control-button"
svgClassName="media-control-button-svg" svgClassName="media-control-button-svg"
@ -45,20 +49,23 @@
href="#fa-angle-left" href="#fa-angle-left"
on:click="prev()" on:click="prev()"
/> />
</li>
{#each dots as dot, i (dot.i)} {#each dots as dot, i (dot.i)}
<!-- TODO: this should probably be aria-current or something, not a toggle button --> <li class="media-control">
<IconButton <IconButton
className="media-control-button" className="media-control-button"
svgClassName="media-control-button-svg" svgClassName="media-control-button-svg"
pressable={true} pressable={true}
label="Show {nth(i)} media" label="Show {nth(i)} media"
pressedLabel="Showing {nth(i)} media" pressedLabel="Show {nth(i)} media (current)"
pressed={i === scrolledItem} pressed={i === scrolledItem}
href={i === scrolledItem ? '#fa-circle' : '#fa-circle-o'} href={i === scrolledItem ? '#fa-circle' : '#fa-circle-o'}
sameColorWhenPressed={true} sameColorWhenPressed={true}
on:click="onButtonClick(i)" on:click="onButtonClick(i)"
/> />
</li>
{/each} {/each}
<li class="media-control">
<IconButton <IconButton
className="media-control-button" className="media-control-button"
svgClassName="media-control-button-svg" svgClassName="media-control-button-svg"
@ -67,7 +74,8 @@
href="#fa-angle-right" href="#fa-angle-right"
on:click="next()" on:click="next()"
/> />
</div> </li>
</ul>
{/if} {/if}
{#if canPinchZoom} {#if canPinchZoom}
<IconButton <IconButton
@ -144,6 +152,16 @@
display: flex; display: flex;
justify-content: space-between; 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) { :global(.media-pinch-zoom) {
width: 100%; width: 100%;