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}
{#if dots.length > 1} {#if dots.length > 1}
<div class="media-controls"> <!-- Roughly based on https://www.w3.org/WAI/tutorials/carousels/functionality/
<IconButton Since this toolbar contains a mix of left/right/first/second/third/fourth buttons,
className="media-control-button" just list them and explicitly label the current one as "current." -->
svgClassName="media-control-button-svg" <ul class="media-controls" aria-label="Navigate media items">
disabled={scrolledItem === 0} <li class="media-control">
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 -->
<IconButton <IconButton
className="media-control-button" className="media-control-button"
svgClassName="media-control-button-svg" svgClassName="media-control-button-svg"
pressable={true} disabled={scrolledItem === 0}
label="Show {nth(i)} media" label="Show previous media"
pressedLabel="Showing {nth(i)} media" href="#fa-angle-left"
pressed={i === scrolledItem} on:click="prev()"
href={i === scrolledItem ? '#fa-circle' : '#fa-circle-o'}
sameColorWhenPressed={true}
on:click="onButtonClick(i)"
/> />
</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} {/each}
<IconButton <li class="media-control">
className="media-control-button" <IconButton
svgClassName="media-control-button-svg" className="media-control-button"
disabled={scrolledItem === length - 1} svgClassName="media-control-button-svg"
label="Show next media" disabled={scrolledItem === length - 1}
href="#fa-angle-right" label="Show next media"
on:click="next()" href="#fa-angle-right"
/> 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%;