Mostly accessibility stuff (#344)

This commit is contained in:
stairman06
2022-01-20 22:21:13 -06:00
committed by GitHub
parent 98c85441f8
commit 643cd87706
13 changed files with 212 additions and 162 deletions

View File

@@ -37,7 +37,7 @@
"
class="side-descriptor"
>
<InfoIcon />
<InfoIcon aria-hidden="true" />
Universal {{ project.project_type }}
</div>
<div
@@ -49,7 +49,7 @@
"
class="side-descriptor"
>
<InfoIcon />
<InfoIcon aria-hidden="true" />
Client {{ project.project_type }}
</div>
<div
@@ -61,7 +61,7 @@
"
class="side-descriptor"
>
<InfoIcon />
<InfoIcon aria-hidden="true" />
Server {{ project.project_type }}
</div>
<p class="description">
@@ -81,14 +81,14 @@
</div>
<div class="dates">
<div class="date">
<CalendarIcon />
<CalendarIcon aria-hidden="true" />
<span class="label">Created</span>
<span class="value">{{
$dayjs(project.published).fromNow()
}}</span>
</div>
<div class="date">
<UpdateIcon />
<UpdateIcon aria-hidden="true" />
<span class="label">Updated</span>
<span class="value">{{ $dayjs(project.updated).fromNow() }}</span>
</div>
@@ -100,7 +100,7 @@
:to="`/create/report?id=${project.id}&t=project`"
class="iconified-button"
>
<ReportIcon />
<ReportIcon aria-hidden="true" />
Report
</nuxt-link>
<button
@@ -110,7 +110,7 @@
class="iconified-button"
@click="$store.dispatch('user/followProject', project)"
>
<FollowIcon />
<FollowIcon aria-hidden="true" />
Follow
</button>
<button
@@ -120,7 +120,7 @@
class="iconified-button"
@click="$store.dispatch('user/unfollowProject', project)"
>
<FollowIcon fill="currentColor" />
<FollowIcon fill="currentColor" aria-hidden="true" />
Unfollow
</button>
</div>
@@ -215,7 +215,7 @@
class="title"
target="_blank"
>
<IssuesIcon />
<IssuesIcon aria-hidden="true" />
<span>Issues</span>
</a>
<a
@@ -224,7 +224,7 @@
class="title"
target="_blank"
>
<CodeIcon />
<CodeIcon aria-hidden="true" />
<span>Source</span>
</a>
<a
@@ -233,7 +233,7 @@
class="title"
target="_blank"
>
<WikiIcon />
<WikiIcon aria-hidden="true" />
<span>Wiki</span>
</a>
<a
@@ -244,8 +244,9 @@
<DiscordIcon
v-if="$colorMode.value === 'light'"
class="shrink"
aria-hidden="true"
/>
<DiscordIconWhite v-else class="shrink" />
<DiscordIconWhite v-else class="shrink" aria-hidden="true" />
<span>Discord</span>
</a>
<a
@@ -256,18 +257,20 @@
>
<BuyMeACoffeeLogo
v-if="donation.id === 'bmac' && $colorMode.value === 'light'"
aria-hidden="true"
/>
<BuyMeACoffeeLogoWhite
v-else-if="
donation.id === 'bmac' && $colorMode.value === 'dark'
"
aria-hidden="true"
/>
<img
v-else-if="
donation.id === 'patreon' && $colorMode.value === 'light'
"
class="shrink"
alt="patreon"
alt=""
src="~/assets/images/external/patreon.png"
/>
<img
@@ -275,7 +278,7 @@
donation.id === 'patreon' && $colorMode.value === 'dark'
"
class="shrink"
alt="patreon"
alt=""
src="~/assets/images/external/patreon-white.png"
/>
<img
@@ -283,7 +286,7 @@
donation.id === 'paypal' && $colorMode.value === 'light'
"
class="shrink"
alt="paypal"
alt=""
src="~/assets/images/external/paypal.png"
/>
<img
@@ -291,21 +294,21 @@
donation.id === 'paypal' && $colorMode.value === 'dark'
"
class="shrink"
alt="paypal"
alt=""
src="~/assets/images/external/paypal-white.png"
/>
<img
v-else-if="
donation.id === 'ko-fi' && $colorMode.value === 'light'
"
alt="kofi"
alt=""
src="~/assets/images/external/kofi.png"
/>
<img
v-else-if="
donation.id === 'ko-fi' && $colorMode.value === 'dark'
"
alt="kofi"
alt=""
src="~/assets/images/external/kofi-white.png"
/>
<FollowIcon v-else-if="donation.id === 'github'" />
@@ -332,6 +335,7 @@
<a
:href="findPrimary(version).url"
class="download"
:title="`Download ${version.name}`"
@click.prevent="
downloadFile(
findPrimary(version).hashes.sha1,
@@ -339,7 +343,7 @@
)
"
>
<DownloadIcon />
<DownloadIcon aria-hidden="true" />
</a>
<div class="info">
<nuxt-link

View File

@@ -38,6 +38,7 @@
<a
:href="$parent.findPrimary(version).url"
class="iconified-button download"
:title="`Download ${version.name}`"
@click.prevent="
$parent.downloadFile(
$parent.findPrimary(version).hashes.sha1,
@@ -45,7 +46,7 @@
)
"
>
<DownloadIcon />
<DownloadIcon aria-hidden="true" />
Download
</a>
</div>

View File

@@ -16,7 +16,7 @@
project.slug ? project.slug : project.id
}/versions`"
>
<BackIcon />
<BackIcon aria-hidden="true" />
Back to list
</nuxt-link>
</div>
@@ -25,14 +25,14 @@
<h2>{{ version.name }}</h2>
<div v-if="version.featured" class="featured">
<StarIcon />
<StarIcon aria-hidden="true" />
Featured
</div>
<div
v-else-if="featuredVersions.find((x) => x.id === version.id)"
class="featured"
>
<StarIcon />
<StarIcon aria-hidden="true" />
Auto-featured
</div>
</div>
@@ -41,7 +41,7 @@
class="action iconified-button brand-button-colors"
@click="saveEditedVersion"
>
<CheckIcon />
<CheckIcon aria-hidden="true" />
Save
</button>
<nuxt-link
@@ -51,7 +51,7 @@
}/version/${encodeURIComponent(version.version_number)}`"
class="action iconified-button"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
Discard changes
</nuxt-link>
</div>
@@ -60,7 +60,7 @@
class="action iconified-button brand-button-colors"
@click="createVersion"
>
<CheckIcon />
<CheckIcon aria-hidden="true" />
Save
</button>
<nuxt-link
@@ -70,7 +70,7 @@
}/versions`"
class="action iconified-button"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
Discard version
</nuxt-link>
</div>
@@ -79,11 +79,12 @@
v-if="primaryFile"
:href="primaryFile.url"
class="action iconified-button brand-button-colors"
:title="`Download ${primaryFile.filename}`"
@click.prevent="
$parent.downloadFile(primaryFile.hashes.sha1, primaryFile.url)
"
>
<DownloadIcon />
<DownloadIcon aria-hidden="true" />
Download
</a>
<nuxt-link
@@ -91,7 +92,7 @@
:to="`/create/report?id=${version.id}&t=version`"
class="action iconified-button"
>
<ReportIcon />
<ReportIcon aria-hidden="true" />
Report
</nuxt-link>
<button
@@ -99,7 +100,7 @@
class="action iconified-button"
@click="$refs.delete_version_popup.show()"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
Delete
</button>
<nuxt-link
@@ -110,7 +111,7 @@
}/version/${encodeURIComponent(version.version_number)}/edit`"
@click.prevent="mode = 'edit'"
>
<EditIcon />
<EditIcon aria-hidden="true" />
Edit
</nuxt-link>
</div>
@@ -409,14 +410,16 @@
v-if="primaryFile.hashes.sha1 === file.hashes.sha1"
class="featured"
>
<StarIcon />
<StarIcon aria-hidden="true" />
Primary
</div>
<a
class="action iconified-button"
:title="`Download ${file.filename}`"
tabindex="0"
@click.prevent="$parent.downloadFile(file.hashes.sha1, file.url)"
>
<DownloadIcon />
<DownloadIcon aria-hidden="true" />
Download
</a>
<button
@@ -427,7 +430,7 @@
version.files.splice(index, 1)
"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
Delete
</button>
<button
@@ -437,7 +440,7 @@
class="action iconified-button"
@click="primaryFile = file"
>
<StarIcon />
<StarIcon aria-hidden="true" />
Make primary
</button>
</div>
@@ -452,7 +455,7 @@
class="action iconified-button"
@click="newFiles.splice(index, 1)"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
Delete
</button>
</div>

View File

@@ -11,7 +11,7 @@
<table>
<thead>
<tr>
<th></th>
<th role="presentation"></th>
<th>Version</th>
<th>Supports</th>
<th>Stats</th>
@@ -23,6 +23,7 @@
<a
:href="$parent.findPrimary(version).url"
class="download-button"
:title="`Download ${version.name}`"
@click.prevent="
$parent.downloadFile(
$parent.findPrimary(version).hashes.sha1,
@@ -30,7 +31,7 @@
)
"
>
<DownloadIcon />
<DownloadIcon aria-hidden="true" />
</a>
</td>
<td>