mirror
/
wildebeest
kopia lustrzana https://github.com/cloudflare/wildebeest
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Merge pull request #69 from cloudflare/a11y-improvements 

Improve lighthouse accessibility score
pull/73/head
Dario Piotrowicz 2023-01-11 13:36:18 +00:00 zatwierdzone przez GitHub
rodzic 86e8ea218c 273f97de68
commit 6d87ec2acb
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
10 zmienionych plików z 40 dodań i 13 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
frontend/src/components/Status/index.tsx
Wyświetl plik

@ -26,7 +26,7 @@ export default component$((props: Props) => {
<div onClick$={handleContentClick}>
<div class="flex justify-between mb-3">
<div class="flex">
<Avatar src={status.account.avatar} />
<Avatar accountDisplayName={status.account.display_name} src={status.account.avatar} />
<div class="flex-col ml-3">
<div>
{/* TODO: this should either have an href or not being an `a` element (also consider using QwikCity's `Link` instead) */}

5
frontend/src/components/avatar/index.tsx
Wyświetl plik

@ -2,8 +2,9 @@ import { component$ } from '@builder.io/qwik'
type Props = {
src: string
accountDisplayName: string
}
export const Avatar = component$<Props>(({ src }) => {
return <img class="rounded h-12 w-12" src={src} />
export const Avatar = component$<Props>(({ src, accountDisplayName }) => {
return <img class="rounded h-12 w-12" src={src} alt={`Avatar of ${accountDisplayName}`} />
})

4
frontend/src/components/layout/RightColumn/RightColumn.tsx
Wyświetl plik

@ -22,7 +22,7 @@ export default component$(() => {
}
return (
<Link href={linkTarget} class={classList}>
<Link href={linkTarget} class={classList} aria-label={linkText}>
<i style={{ width: '1.25rem', height: '1rem' }} class={`fa ${iconName} fa-fw md:mr-3 w-5 h-4`} />
<span class="hidden md:inline">{linkText}</span>
</Link>
@ -41,7 +41,7 @@ export default component$(() => {
<div class="bg-wildebeest-600 xl:bg-transparent flex flex-col justify-between right-column-wrapper text-wildebeest-200 flex-1">
<div class="sticky top-[3.9rem] xl:top-0">
<div class="xl:p-4">
<a class="no-underline hidden xl:flex items-center" href="https://mastodon.social">
<a class="no-underline hidden xl:flex items-center" aria-label="Wildebeest Home" href="/">
<WildebeestLogo size="medium" />
</a>
</div>

13
frontend/src/routes/(admin)/first-login/index.tsx
Wyświetl plik

@ -1,4 +1,5 @@
import { component$ } from '@builder.io/qwik'
import { DocumentHead } from '@builder.io/qwik-city'
import { WildebeestLogo } from '~/components/MastodonLogo'
import { useDomain } from '~/utils/useDomain'
@ -45,3 +46,15 @@ export default component$(() => {
</div>
)
})
export const head: DocumentHead = () => {
return {
title: 'Wildebeest Login',
meta: [
{
name: 'description',
content: 'Wildebeest Login page',
},
],
}
}

13
frontend/src/routes/(admin)/start-instance/index.tsx
Wyświetl plik

@ -1,4 +1,5 @@
import { $, component$, useStore, useClientEffect$, useSignal } from '@builder.io/qwik'
import { DocumentHead } from '@builder.io/qwik-city'
import { WildebeestLogo } from '~/components/MastodonLogo'
import { useDomain } from '~/utils/useDomain'
import Step1 from './step-1'
@ -58,3 +59,15 @@ export default component$(() => {
</div>
)
})
export const head: DocumentHead = () => {
return {
title: 'Wildebeest Start Instance',
meta: [
{
name: 'description',
content: 'Wildebeest Instance Setup page',
},
],
}
}

8
frontend/src/routes/(admin)/start-instance/step-1.tsx
Wyświetl plik

@ -20,7 +20,7 @@ export default component$<Props>(({ instanceConfig, setLoading, setInstanceConfi
<input
id="start-instance-title"
name="title"
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-400 focus:border-wildebeest-vibrant-400 invalid:border-red-400 flex-1 w-full"
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500 invalid:border-red-400 flex-1 w-full"
value={instanceConfig.title}
onInput$={(ev) => (instanceConfig.title = (ev.target as HTMLInputElement).value)}
/>
@ -36,7 +36,7 @@ export default component$<Props>(({ instanceConfig, setLoading, setInstanceConfi
id="start-instance-email"
name="email"
type="email"
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-400 focus:border-wildebeest-vibrant-400 invalid:border-red-400 flex-1 w-full"
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500 invalid:border-red-400 flex-1 w-full"
value={instanceConfig.email}
onInput$={(ev) => (instanceConfig.email = (ev.target as HTMLInputElement).value)}
/>
@ -51,7 +51,7 @@ export default component$<Props>(({ instanceConfig, setLoading, setInstanceConfi
<input
id="start-instance-description"
name="description"
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-400 focus:border-wildebeest-vibrant-400 invalid:border-red-400 flex-1 w-full"
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500 invalid:border-red-400 flex-1 w-full"
value={instanceConfig.description}
onInput$={(ev) => (instanceConfig.description = (ev.target as HTMLInputElement).value)}
/>
@ -60,7 +60,7 @@ export default component$<Props>(({ instanceConfig, setLoading, setInstanceConfi
<button
type="submit"
class="mb-9 bg-wildebeest-vibrant-400 hover:bg-wildebeest-vibrant-500 p-3 text-white text-uppercase border-wildebeest-vibrant-400 text-lg text-semi outline-none border rounded hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500"
class="mb-9 bg-wildebeest-vibrant-500 hover:bg-wildebeest-vibrant-600 p-3 text-white text-uppercase border-wildebeest-vibrant-500 text-lg text-semi outline-none border rounded hover:border-wildebeest-vibrant-600 focus:border-wildebeest-vibrant-600"
preventdefault:click
onClick$={async () => {
setLoading(true)

2
frontend/src/routes/(frontend)/[accountId]/[statusId]/index.tsx
Wyświetl plik

@ -36,7 +36,7 @@ export default component$(() => {
<div class="bg-wildebeest-700 p-4">
{/* Account Card */}
<div class="flex">
<Avatar src={status.account.avatar} />
<Avatar accountDisplayName={status.account.display_name} src={status.account.avatar} />
<div class="flex flex-col">
<div class="p-1">
{/* TODO: this should either have an href or not being an `a` element (also consider using QwikCity's `Link` instead) */}

2
frontend/src/routes/(frontend)/explore/links/index.tsx
Wyświetl plik

@ -25,7 +25,7 @@ export default component$(() => {
<div class="text-sm text-wildebeest-400">{formatHistory(link.history)}</div>
</div>
<div>
<img class="w-32 max-w-fit h-32 object-cover" src={link.image} />
<img class="w-32 max-w-fit h-32 object-cover" src={link.image} alt="" />
</div>
</div>
</a>

2
frontend/src/routes/(frontend)/layout.tsx
Wyświetl plik

@ -27,7 +27,7 @@ export default component$(() => {
return (
<>
<header class="h-[3.9rem] z-50 sticky top-0 bg-wildebeest-600 p-3 w-full border-b border-wildebeest-700 xl:hidden">
<a class="no-underline flex items-center w-max" href="https://mastodon.social">
<a class="no-underline flex items-center w-max" aria-label="Wildebeest Home" href="/">
<WildebeestLogo size="small" />
</a>
</header>

2
frontend/src/styles.scss
Wyświetl plik

@ -10,7 +10,7 @@
--wildebeest-vibrant-hue: calc( var(--wildebeest-hue) + 15 );
--wildebeest-color-200: hsl(var(--wildebeest-hue), 25%, 88%);
--wildebeest-color-400: hsl(var(--wildebeest-hue), 29%, 70%);
--wildebeest-color-500: hsl(var(--wildebeest-hue), 16%, 45%);
--wildebeest-color-500: hsl(var(--wildebeest-hue), 16%, 65%);
--wildebeest-color-700: hsl(var(--wildebeest-hue), 16%, 23%);
--wildebeest-color-600: hsl(var(--wildebeest-hue), 15%, 19%);
--wildebeest-color-800: hsl(var(--wildebeest-hue), 16%, 15%);