nowaakademia/Trash_Assistant
Archived
1
0 Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

ARIA and accessibility

Browse Source
This commit is contained in:
mmacierzanka committed 2021-12-13 17:44:50 +01:00
1 parent 3b3ea1bf42
commit d9808693ef
7 files changed
+16 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/index.html
+2 -2
View File
@@ -38,8 +38,8 @@
<body>
<div id="app">
<div id="loading-cont" style="text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center">
<img src="%PUBLIC_URL%/logo192.png" alt="Trash Assistant logo" />
<img src="%PUBLIC_URL%/loadingCircle.png" width="45" height="45" alt="loading-circle" style="animation: spin 0.5s linear infinite; padding: 20px" />
<img src="%PUBLIC_URL%/logo192.png" alt="Trash Assistant" />
<img src="%PUBLIC_URL%/loadingCircle.png" width="45" height="45" alt="Wczytywanie aplikacji" style="animation: spin 0.5s linear infinite; padding: 20px" />
<noscript style="font-size: 25px; font-family: Arial, Helvetica, sans-serif; font-weight: 100; padding: 5px; color: #1a77aa"
>Do uruchomienia tej aplikacji wymagana jest obsługa języka JavaScript</noscript
>
src/components/About/index.tsx
+2 -1
View File
@@ -29,6 +29,7 @@ export const About: FC<{ cfn: (d: any) => void }> = (props) => {
</Box>
<Box className={style.buttons} gap={5} direction="row" verticalAlignment="center">
<button
aria-label="Pokaż prezentację"
style={{ flex: 1 }}
onClick={() => {
window.localStorage.setItem("intro", "false");
@@ -37,7 +38,7 @@ export const About: FC<{ cfn: (d: any) => void }> = (props) => {
>
Pokaż prezentację
</button>
<button autoFocus style={{ flex: 1 }} onClick={props.cfn} className="btn-inverse">
<button aria-label="Zamknij okno dialogowe" autoFocus style={{ flex: 1 }} onClick={props.cfn} className="btn-inverse">
Zamknij
</button>
</Box>
src/components/CreditTile/index.tsx
+1
View File
@@ -5,6 +5,7 @@ import style from "./index.module.scss";
export const CreditTile: FC<{ title: string; imageUrl?: string; gh?: string; delay?: number }> = (props) => {
return (
<a
aria-label={props.title}
target={"_blank"}
style={{ animationDelay: `${props.delay ? props.delay + 300 : 300}ms` }}
className={style.container}
src/components/Intro/index.tsx
+3 -1
View File
@@ -8,7 +8,7 @@ import style from "./index.module.scss";
const pages = [
<div></div>,
<IntroPage title={`Witaj w ${appName}`} content={<img alt="application logo" src="logo192.png" />} />,
<IntroPage title={`Witaj w ${appName}`} content={<img alt="Ikona aplikacji Trash Assistant" src="logo192.png" />} />,
<IntroPage
title="Jak to działa?"
content={
@@ -53,6 +53,7 @@ export const Intro: FC<{ closeFn: (data?: any) => void }> = (props) => {
<Box direction="row" verticalAlignment="center" gap={10}>
{page !== 0 && (
<button
aria-label="Wstecz"
style={{ flex: 1 }}
onClick={() => {
if (page === 1) {
@@ -66,6 +67,7 @@ export const Intro: FC<{ closeFn: (data?: any) => void }> = (props) => {
)}
{page !== 0 && (
<button
aria-label="Dalej"
autoFocus
onClick={() => {
if (page + 1 < pages.length) changePage(page + 1);
src/components/Overlay/index.tsx
+4 -1
View File
@@ -20,6 +20,7 @@ export const Overlay: FC = () => {
return (
<div className={style.container}>
<button
aria-label="Ustawienia aplikacji"
className={style.settingsBtn}
onClick={() =>
spawnDialog((c) => (
@@ -31,10 +32,11 @@ export const Overlay: FC = () => {
>
<Icon type="gear-fill" size={30} />
</button>
<button className={style.aboutBtn} onClick={() => spawnDialog((c) => <About cfn={c} />)}>
<button aria-label="Informacje o aplikacji" className={style.aboutBtn} onClick={() => spawnDialog((c) => <About cfn={c} />)}>
<Icon type="info-circle-fill" size={30} />
</button>
<button
aria-label="Przechwytywanie"
autoFocus
className={`${style.captureBtn} ${landscapeMode ? style.landscape : ""}`}
onClick={async () => {
@@ -48,6 +50,7 @@ export const Overlay: FC = () => {
<>
<Results type={result} />
<button
aria-label="Zamknij okno dialogowe"
autoFocus
style={{ width: "100%", backgroundColor: result?.color ?? accentColor, border: "0px transparent" }}
onClick={c}
src/components/Settings/index.tsx
+3 -2
View File
@@ -36,12 +36,13 @@ export const Settings: FC<{ cfn: (data?: any) => void }> = (props) => {
</option>
))}
</select>
<button onClick={getDevices}>
<button aria-label="Odśwież listę urządzeń" onClick={getDevices}>
<Icon className={style.refreshBtn} type="arrow-clockwise" size={20} />
</button>
</Box>
</label>
<button
aria-label="Zamknij okno i zapisz ustawienia"
autoFocus
style={{ width: "100%" }}
className={"btn-inverse"}
@@ -64,7 +65,7 @@ export const Settings: FC<{ cfn: (data?: any) => void }> = (props) => {
Nie można uzyskać obrazu z wybranej kamery. Upewnij się, że kamera działa i nie jest używana przez inną aplikację.
</h3>
<p style={{ color: "#666666" }}>{(e as Error).message}</p>
<button autoFocus className="btn-inverse" style={{ width: "100%" }} onClick={c}>
<button aria-label="Zamknij okno dialogowe" autoFocus className="btn-inverse" style={{ width: "100%" }} onClick={c}>
Zamknij
</button>
</Box>
src/components/Video/index.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export const Video: { Provider: FC<{ data: VideoData }>; initialize: () => Promi
Nie można uzyskać obrazu z wybranej kamery. Upewnij się, że kamera działa i nie jest używana przez inną aplikację.
</h3>
<p style={{ color: "#666666" }}>{(e as Error).message}</p>
<button autoFocus className="btn-inverse" style={{ width: "100%" }} onClick={c}>
<button aria-label="Zamknij okno dialogowe" autoFocus className="btn-inverse" style={{ width: "100%" }} onClick={c}>
Zamknij
</button>
</Box>