Accessibility update

This commit is contained in:
MeowcaTheoRange 2023-11-11 12:27:11 -06:00
parent cf4e26f4c9
commit 8e8e2e063a
7 changed files with 89 additions and 16 deletions

View file

@ -199,15 +199,27 @@ export default function Home() {
}`}
id="top"
>
<h1>
<h1 aria-label="About M T R dot Link">
ABTMTR
<wbr />
.LINK
</h1>
<Time time={time} date={date} />
<Floaty top>
<input
id="accessibility"
type="checkbox"
onClick={function (x) {
(x.target as HTMLInputElement).checked
? document.body.parentElement?.classList.add("a11y")
: document.body.parentElement?.classList.remove("a11y");
}}
/>
<label htmlFor="accessibility">Accessibility</label>
</Floaty>
<Floaty>
<LastFM player={player} />
</Floaty>
<Time time={time} date={date} />
<Floaty start>
<p className="hv">Scroll down for more!</p>
</Floaty>
@ -215,7 +227,11 @@ export default function Home() {
<Page scroll={body.current} color={Color3.fromHex("FFFFFF")} id="hi">
<h1>Welcome 👋</h1>
<p>
I'm <b>MeowcaTheoRange</b> <small>(miau-kuh-thee~oh-ray~nj)</small>.
I'm <b>MeowcaTheoRange</b>{" "}
<small aria-label="Pronounced: meow, cuh, the, oh, range">
(miau-kuh-thee~oh-ray~nj)
</small>
.
<br />
I'm a web developer, Fediverse enthusiast, and compulsory Minnesotan.
</p>
@ -597,7 +613,7 @@ export default function Home() {
.
</p>
<ProjectList projects={images} markdown />
<ProjectList projects={blog} markdown double />
<ProjectList projects={blog} markdown double tooLong />
</Page>
<Page
scroll={body.current}
@ -656,7 +672,7 @@ export default function Home() {
<br />
<small>Primary Negative</small>
</ColourChip>
<p style={{ color: "#00BFFF" }}>
<p style={{ color: "#00c0FF" }} className="color-collapse-on-a11y">
<b>Iszac Blue</b> is literally <strong>Rocco Orange</strong> but
inverted. This colour is named after <strong>Iszac</strong>, an OC of
mine that I came up with, for the setting of Ætherglow.
@ -668,7 +684,7 @@ export default function Home() {
If you were to use any of these colours to represnt me as a{" "}
<strong>person</strong>, use this one.
</p>
<p style={{ color: "#FF4000" }}>
<p style={{ color: "#FF4000" }} className="color-collapse-on-a11y">
<b>Rocco Orange</b> is my favourite colour orange, but now more red.
The name comes from my character <strong>Rocco</strong>, whose hair is
this colour - though this colour has been applied to more characters
@ -687,12 +703,12 @@ export default function Home() {
<br />
<small>Secondary Negative</small>
</ColourChip>
<p style={{ color: "#8000FF" }}>
<p style={{ color: "#8000FF" }} className="color-collapse-on-a11y">
<b>Grape Soda</b> represents my love for grape soda.
<br />
My favourite is Fanta Grape. :]
</p>
<p style={{ color: "#80FF00" }}>
<p style={{ color: "#80FF00" }} className="color-collapse-on-a11y">
<b>Avalonian Waste</b> is also literally <strong>Grape Soda</strong>{" "}
but inverted. This represents some{" "}
<a

View file

@ -19,7 +19,7 @@ export default function Floaty({
start ? styles.FloatyStart : ""
} ${keepFloat ? styles.FloatyKeep : ""} ${
sticky ? styles.FloatySticky : ""
}`}
} FL-collapse-on-a11y`}
>
{children}
</div>

View file

@ -40,11 +40,12 @@ export default function Page({
ref={pageobj}
className={`${styles.Page} ${preview ? styles.PagePreview : ""} ${
footer ? styles.PageFooter : ""
} ${floaty ? styles.PageSpace : ""} block`}
} ${floaty ? styles.PageSpace : ""} block PG-collapse-on-a11y`}
style={
{
"--backgroundColor": "#" + color?.darken(75).toHex(),
"--color": "#" + color?.toHex(),
"--color-a11y": "#" + color?.lighten(75).toHex(),
background: bg,
backgroundColor: "#" + color?.darken(90).toHex(),
color: "var(--color)",

View file

@ -16,10 +16,12 @@ export default function ProjectList({
projects,
markdown = false,
double = false,
tooLong = false,
}: {
projects: Project[];
markdown?: boolean;
double?: boolean;
tooLong?: boolean;
}) {
const router = useRouter();
return (
@ -31,7 +33,7 @@ export default function ProjectList({
{projects.map((project, i) => (
<a
key={i}
className={`${styles.ProjectListProject} notInline`}
className={`${styles.ProjectListProject} notInline color-collapse-on-a11y`}
href={project.url}
target="_blank"
>
@ -49,7 +51,10 @@ export default function ProjectList({
<p className={styles.ProjectListProjectDescriptionTitle}>
{project.name}
</p>
<p className={styles.ProjectListProjectDescriptionDescription}>
<p
className={styles.ProjectListProjectDescriptionDescription}
aria-hidden={tooLong}
>
{markdown ? (
<ReactMarkdown
remarkPlugins={[remarkBreaks]}

View file

@ -14,6 +14,7 @@ export default function ScrollBackInd<T>({
}) {
return (
<button
aria-hidden="true"
className={`${styles.ScrollBackInd} ${
hide ? styles.ScrollBackIndHidden : ""
}`}

View file

@ -11,9 +11,9 @@ export default function LastFM({
{player?.recenttracks.track[0]["@attr"]?.nowplaying === "true" ? (
<p>Currently listening to</p>
) : (
<p className={styles.LastFMError}>Last listened to</p>
<p className="hv">Last listened to</p>
)}
<div className={styles.LastFM}>
<div className={`${styles.LastFM} LFM-collapse-on-a11y`}>
<div className={styles.LastFMMetadata}>
<p className={styles.LastFMMetadataTitle}>
{player?.recenttracks.track[0].name}
@ -24,7 +24,7 @@ export default function LastFM({
</p>
</div>
<img
className={styles.LastFMAlbumArt}
className={`${styles.LastFMAlbumArt} LFMA-collapse-on-a11y`}
src={player?.recenttracks.track[0].image[2]["#text"]}
alt=""
width="96"
@ -33,6 +33,6 @@ export default function LastFM({
</div>
</>
) : (
<p className={styles.LastFMError}>Hold on...</p>
<p className="hv">Hold on...</p>
);
}

View file

@ -18,6 +18,50 @@ div.body {
scroll-snap-type: y mandatory;
}
/* A11y */
html.a11y div.body {
scroll-snap-type: unset;
}
html.a11y .hv {
opacity: 0.75 !important;
}
html.a11y .FL-collapse-on-a11y {
position: static !important;
text-align: start !important;
display: block !important;
margin: 2em 0 !important;
max-width: none !important;
}
html.a11y .FL-collapse-on-a11y {
position: static !important;
text-align: start !important;
display: block !important;
margin: 2em 0 !important;
max-width: none !important;
}
html.a11y .LFM-collapse-on-a11y {
grid-auto-flow: column !important;
grid-template-columns: 96px auto !important;
}
html.a11y .LFMA-collapse-on-a11y {
order: -1 !important;
}
html.a11y .PG-collapse-on-a11y {
min-height: 0 !important;
color: var(--color-a11y) !important;
}
html.a11y .color-collapse-on-a11y {
color: white !important;
}
/* Markup */
.block > h1,
@ -176,3 +220,9 @@ a.special:active::after {
font-size: 16px;
}
}
@media only screen and (max-height: 800px) {
:root {
font-size: 16px;
}
}