Improve environments compat description and fix accessibility issues project-wide

This commit is contained in:
Prospector
2024-08-20 23:32:36 -07:00
parent 2d416d491c
commit 9deddbbe7c
32 changed files with 336 additions and 281 deletions

View File

@@ -37,13 +37,13 @@
<div class="flex gap-2">
<ButtonStyled color="brand">
<button @click="create">
<PlusIcon />
<PlusIcon aria-hidden="true" />
Create collection
</button>
</ButtonStyled>
<ButtonStyled>
<button @click="modal.hide()">
<XIcon />
<XIcon aria-hidden="true" />
Cancel
</button>
</ButtonStyled>

View File

@@ -68,13 +68,13 @@
<div class="flex gap-2">
<ButtonStyled color="brand">
<button @click="createProject">
<PlusIcon />
<PlusIcon aria-hidden="true" />
Create project
</button>
</ButtonStyled>
<ButtonStyled>
<button @click="cancel">
<XIcon />
<XIcon aria-hidden="true" />
Cancel
</button>
</ButtonStyled>

View File

@@ -28,7 +28,7 @@
<p>All permission checks complete!</p>
<div class="input-group modpack-buttons">
<button class="btn" @click="modPackIndex -= 1">
<LeftArrowIcon />
<LeftArrowIcon aria-hidden="true" />
Previous
</button>
</div>
@@ -142,7 +142,7 @@
</div>
<div class="input-group modpack-buttons">
<button class="btn" :disabled="modPackIndex <= 0" @click="modPackIndex -= 1">
<LeftArrowIcon />
<LeftArrowIcon aria-hidden="true" />
Previous
</button>
<button
@@ -150,7 +150,7 @@
:disabled="!modPackData[modPackIndex].status"
@click="modPackIndex += 1"
>
<RightArrowIcon />
<RightArrowIcon aria-hidden="true" />
Next project
</button>
</div>
@@ -273,20 +273,20 @@
</div>
</div>
<div class="input-group modpack-buttons">
<button v-if="!done" class="btn skip-btn" @click="goToNextProject">
<ExitIcon />
<button v-if="!done" class="btn skip-btn" aria-label="Skip" @click="goToNextProject">
<ExitIcon aria-hidden="true" />
<template v-if="futureProjects.length > 0">Skip</template>
<template v-else>Exit</template>
</button>
<button v-if="currentStepIndex > 0" class="btn" @click="previousPage() && !done">
<LeftArrowIcon /> Previous
<LeftArrowIcon aria-hidden="true" /> Previous
</button>
<button
v-if="currentStepIndex < steps.length - 1 && !done"
class="btn btn-primary"
@click="nextPage()"
>
<RightArrowIcon /> Next
<RightArrowIcon aria-hidden="true" /> Next
</button>
<button
v-else-if="!generatedMessage"
@@ -294,15 +294,15 @@
:disabled="loadingMessage"
@click="generateMessage"
>
<UpdatedIcon /> Generate message
<UpdatedIcon aria-hidden="true" /> Generate message
</button>
<template v-if="generatedMessage && !done">
<button class="btn btn-green" @click="sendMessage(project.requested_status ?? 'approved')">
<CheckIcon /> Approve
<CheckIcon aria-hidden="true" /> Approve
</button>
<div class="joined-buttons">
<button class="btn btn-danger" @click="sendMessage('rejected')">
<CrossIcon /> Reject
<CrossIcon aria-hidden="true" /> Reject
</button>
<OverflowMenu
class="btn btn-danger btn-dropdown-animation icon-only"
@@ -316,7 +316,7 @@
]"
>
<DropdownIcon style="rotate: 180deg" />
<template #withhold> <EyeOffIcon /> Withhold </template>
<template #withhold> <EyeOffIcon aria-hidden="true" /> Withhold </template>
</OverflowMenu>
</div>
</template>

View File

@@ -56,13 +56,13 @@
<div class="flex gap-2">
<ButtonStyled color="brand">
<button @click="createOrganization">
<PlusIcon />
<PlusIcon aria-hidden="true" />
Create organization
</button>
</ButtonStyled>
<ButtonStyled>
<button @click="modal.hide()">
<XIcon />
<XIcon aria-hidden="true" />
Cancel
</button>
</ButtonStyled>

View File

@@ -13,16 +13,17 @@
</div>
<ButtonStyled color="brand">
<a :href="downloadUrl" class="min-w-0" @click="emit('onDownload')">
<DownloadIcon /> Download
<DownloadIcon aria-hidden="true" /> Download
</a>
</ButtonStyled>
<ButtonStyled circular>
<nuxt-link
:to="`/project/${props.version.project_id}/version/${props.version.id}`"
class="min-w-0"
aria-label="Open project page"
@click="emit('onNavigate')"
>
<ExternalIcon />
<ExternalIcon aria-hidden="true" />
</nuxt-link>
</ButtonStyled>
</div>

View File

@@ -28,7 +28,7 @@
:disabled="!submissionConfirmation"
@click="resubmit()"
>
<ModerationIcon /> Resubmit for review
<ModerationIcon aria-hidden="true" /> Resubmit for review
</button>
</div>
</div>
@@ -52,7 +52,7 @@
<template v-if="report && report.closed">
<p>This thread is closed and new messages cannot be sent to it.</p>
<button v-if="isStaff(auth.user)" class="iconified-button" @click="reopenReport()">
<CloseIcon /> Reopen thread
<CloseIcon aria-hidden="true" /> Reopen thread
</button>
</template>
<template v-else-if="!report || !report.closed">
@@ -70,10 +70,10 @@
:disabled="!replyBody"
@click="sendReply()"
>
<ReplyIcon /> Reply
<ReplyIcon aria-hidden="true" /> Reply
</button>
<button v-else class="btn btn-primary" :disabled="!replyBody" @click="sendReply()">
<SendIcon /> Send
<SendIcon aria-hidden="true" /> Send
</button>
<button
v-if="isStaff(auth.user)"
@@ -81,7 +81,7 @@
:disabled="!replyBody"
@click="sendReply(null, true)"
>
<ModerationIcon /> Add private note
<ModerationIcon aria-hidden="true" /> Add private note
</button>
<template v-if="currentMember && !isStaff(auth.user)">
<template v-if="isRejected(project)">
@@ -90,14 +90,14 @@
class="iconified-button moderation-button"
@click="openResubmitModal(true)"
>
<ModerationIcon /> Resubmit for review with reply
<ModerationIcon aria-hidden="true" /> Resubmit for review with reply
</button>
<button
v-else
class="iconified-button moderation-button"
@click="openResubmitModal(false)"
>
<ModerationIcon /> Resubmit for review
<ModerationIcon aria-hidden="true" /> Resubmit for review
</button>
</template>
</template>
@@ -110,10 +110,10 @@
class="iconified-button danger-button"
@click="closeReport(true)"
>
<CloseIcon /> Close with reply
<CloseIcon aria-hidden="true" /> Close with reply
</button>
<button v-else class="iconified-button danger-button" @click="closeReport()">
<CloseIcon /> Close thread
<CloseIcon aria-hidden="true" /> Close thread
</button>
</template>
</template>
@@ -125,7 +125,7 @@
:disabled="isApproved(project)"
@click="sendReply(requestedStatus)"
>
<CheckIcon /> Approve with reply
<CheckIcon aria-hidden="true" /> Approve with reply
</button>
<button
v-else
@@ -133,7 +133,7 @@
:disabled="isApproved(project)"
@click="setStatus(requestedStatus)"
>
<CheckIcon /> Approve
<CheckIcon aria-hidden="true" /> Approve
</button>
<div class="joined-buttons">
<button
@@ -142,7 +142,7 @@
:disabled="project.status === 'rejected'"
@click="sendReply('rejected')"
>
<CrossIcon /> Reject with reply
<CrossIcon aria-hidden="true" /> Reject with reply
</button>
<button
v-else
@@ -150,7 +150,7 @@
:disabled="project.status === 'rejected'"
@click="setStatus('rejected')"
>
<CrossIcon /> Reject
<CrossIcon aria-hidden="true" /> Reject
</button>
<OverflowMenu
class="btn btn-danger btn-dropdown-animation icon-only"
@@ -180,9 +180,11 @@
]
"
>
<DropdownIcon style="rotate: 180deg" />
<template #withhold-reply> <EyeOffIcon /> Withhold with reply </template>
<template #withhold> <EyeOffIcon /> Withhold </template>
<DropdownIcon style="rotate: 180deg" aria-hidden="true" />
<template #withhold-reply>
<EyeOffIcon aria-hidden="true" /> Withhold with reply
</template>
<template #withhold> <EyeOffIcon aria-hidden="true" /> Withhold </template>
</OverflowMenu>
</div>
</template>