Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-18 06:44:46 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Add a11y labels for buttons

Browse source
This commit is contained in:
Sam Carlton 2021-10-21 12:55:48 -05:00
parent c29b1084b3
commit 434a9cfb42
4 changed files with 5 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
components-eleventy/video/player.js
View file

@ -16,6 +16,7 @@ function renderTimestamps ( video ) {
const timestampButtonsHtml = timestampsForRender.map( timestamp => (/* html */` const timestampButtonsHtml = timestampsForRender.map( timestamp => (/* html */`
<button <button
time="${timestamp.time}" time="${timestamp.time}"
aria-label="Jump to ${timestamp.fullText}"
class="inline-block text-xs rounded-lg py-1 px-2 border-2 border-white focus:outline-none border-opacity-0 neumorphic-shadow-inner"> class="inline-block text-xs rounded-lg py-1 px-2 border-2 border-white focus:outline-none border-opacity-0 neumorphic-shadow-inner">
${ timestamp.fullText } ${ timestamp.fullText }
</button> </button>

2
components-eleventy/video/row.js
View file

@ -62,6 +62,7 @@ export default async function ( videos, options = {} ) {
distance="${ cardWidth * -1 }" distance="${ cardWidth * -1 }"
scroll-target="#${ rowId }" scroll-target="#${ rowId }"
onclick="scrollHorizontalCarousel( event )" onclick="scrollHorizontalCarousel( event )"
aria-label="Scroll to previous videos"
> >
<svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" style="transform: scaleX(-1);"> <svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" style="transform: scaleX(-1);">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
@ -73,6 +74,7 @@ export default async function ( videos, options = {} ) {
distance="${ cardWidth }" distance="${ cardWidth }"
scroll-target="#${ rowId }" scroll-target="#${ rowId }"
onclick="scrollHorizontalCarousel( event )" onclick="scrollHorizontalCarousel( event )"
aria-label="Scroll to next videos"
> >
<svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400"> <svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>

1
components/search.vue
View file

@ -35,6 +35,7 @@
'border-2 border-white focus:outline-none', 'border-2 border-white focus:outline-none',
query.includes(button.query) ? 'border-opacity-50 bg-darkest' : 'border-opacity-0 neumorphic-shadow-inner' query.includes(button.query) ? 'border-opacity-50 bg-darkest' : 'border-opacity-0 neumorphic-shadow-inner'
]" ]"
:aria-label="`Filter list by ${button.label}`"
@click="toggleFilter(button.query); queryResults(query)" @click="toggleFilter(button.query); queryResults(query)"
>{{ button.label }}</button> >{{ button.label }}</button>
</div> </div>

1
pages/apple-silicon-app-test.vue
View file

@ -31,6 +31,7 @@
'rounded-xl text-3xl font-semibold scale-150 bg-darkest neumorphic-shadow focus:outline-none py-4 px-6', 'rounded-xl text-3xl font-semibold scale-150 bg-darkest neumorphic-shadow focus:outline-none py-4 px-6',
isLoadingFiles ? 'shimmer' : '' isLoadingFiles ? 'shimmer' : ''
]" ]"
aria-label="Pick an app to scan"
@click="triggerFilepicker" @click="triggerFilepicker"
>{{ isLoadingFiles ? 'Loading Files' : 'Select Apps' }}</button> >{{ isLoadingFiles ? 'Loading Files' : 'Select Apps' }}</button>