RevelaNetwork/Revela-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add skip to main content button, make things more semantic and accessible.

Browse source
This commit is contained in:
wearrrrr 2024-04-12 13:13:15 -05:00
parent 81bf6d6ed9
commit 19b4026a50
10 changed files with 88 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
pnpm-lock.yaml generated
View file

@ -47,6 +47,9 @@ dependencies:
node-fetch:
specifier: ^3.3.2
version: 3.3.2
notyf:
specifier: ^3.10.0
version: 3.10.0
rammerhead:
specifier: https://github.com/NebulaServices/rammerhead/releases/download/rammerhead-1.2.41-nebula.8/rammerhead-1.2.41-nebula.7.tgz
version: '@github.com/NebulaServices/rammerhead/releases/download/rammerhead-1.2.41-nebula.8/rammerhead-1.2.41-nebula.7.tgz(bufferutil@4.0.8)'
@ -4543,6 +4546,10 @@ packages:
engines: {node: '>=0.10.0'}
dev: false
/notyf@3.10.0:
resolution: {integrity: sha512-Mtnp+0qiZxgrH+TzVlzhWyZceHdAZ/UWK0/ju9U0HQeDpap1mZ8cC7H5wSI5mwgni6yeAjaxsTw0sbMK+aSuHw==}
dev: false
/npm-run-path@5.3.0:
resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}

4
src/components/SettingsContent/CustomizationTab.astro
View file

@ -19,11 +19,11 @@ const languageList = [
<div class="settings-container">
<div class="setting__theme">
<label class="setting-label">{t("settings.customization.theme")}</label>
<label aria-label="Theme" class="setting-label">{t("settings.customization.theme")}</label>
<Dropdown buttonNameDefault="Alu" dropdownList={themeList} id="dropdown__selected-theme" />
</div>
<div class="setting__language">
<label class="setting-label">{t("settings.customization.language")}</label>
<label aria-label="Language" class="setting-label">{t("settings.customization.language")}</label>
<Dropdown
buttonNameDefault="English"
dropdownList={languageList}

14
src/components/SettingsContent/ProxyTab.astro
View file

@ -33,7 +33,7 @@ const transportsList = [
<div class="settings-container">
<div class="setting__selected-proxy">
<label class="setting-label">{t("settings.proxy.selectedProxy")}</label>
<label aria-label="Selected Proxy" class="setting-label">{t("settings.proxy.selectedProxy")}</label>
<Dropdown
buttonNameDefault="Ultraviolet"
dropdownList={proxyList}
@ -42,7 +42,7 @@ const transportsList = [
/>
</div>
<div class="setting__search-engine">
<label class="setting-label">{t("settings.proxy.searchEngine")}</label>
<label aria-label="Search Engine" class="setting-label">{t("settings.proxy.searchEngine")}</label>
<Dropdown
buttonNameDefault="Google"
dropdownList={searchEngineList}
@ -51,7 +51,7 @@ const transportsList = [
/>
</div>
<div class="setting__open_with">
<label class="setting-label">{t("settings.proxy.openPageWith")}</label>
<label aria-label="Open Page With" class="setting-label">{t("settings.proxy.openPageWith")}</label>
<Dropdown
buttonNameDefault={t("settings.proxy.openPageWith.embed")}
dropdownList={openPageWith}
@ -60,15 +60,15 @@ const transportsList = [
/>
</div>
<div class="setting__wisp_url">
<label for="wisp-url-input" class="setting-label">{t("settings.proxy.wispURL")}</label>
<label aria-label="Wisp URL" for="wisp-url-input" class="setting-label">{t("settings.proxy.wispURL")}</label>
<Input height="50px" inputName="wisp-url" />
</div>
<div class="setting__bare_url">
<label for="bare-url-input" class="setting-label">{t("settings.proxy.bareURL")}</label>
<label aria-label="Bare Server URL" for="bare-url-input" class="setting-label">{t("settings.proxy.bareURL")}</label>
<Input height="50px" inputName="bare-url" />
</div>
<div class="setting__transport">
<label class="setting-label">{t("settings.proxy.transport")}</label>
<label aria-label="Wisp Transport" class="setting-label">{t("settings.proxy.transport")}</label>
<Dropdown
buttonNameDefault="Epoxy"
dropdownList={transportsList}
@ -78,6 +78,6 @@ const transportsList = [
</div>
</div>
<div class="setting__searxng-url">
<label for="searxng-url-input" class="setting-label">{t("settings.proxy.searxngURL")}</label>
<label aria-label="SearXNG URL" for="searxng-url-input" class="setting-label">{t("settings.proxy.searxngURL")}</label>
<Input height="50px" inputName="searxng-url" defaultTextContent="https://searxng.site/" />
</div>

6
src/components/UI/Footer.astro
View file

@ -5,8 +5,8 @@ import WaveSVG from "../WaveSVG.astro";
const t = i18n.inferLangUseTranslations(Astro.url);
---
<div class="footer">
<div class="wave-svg-container">
<footer class="footer">
<div aria-hidden="true" class="wave-svg-container">
<WaveSVG />
</div>
<div class="footer-top">
@ -63,4 +63,4 @@ const t = i18n.inferLangUseTranslations(Astro.url);
color: var(--text-color);
}
</style>
</div>
</footer>

4
src/components/UI/Header.astro
View file

@ -4,7 +4,7 @@ const lang = i18n.getLangFromUrl(Astro.url);
const t = i18n.useTranslations(lang);
---
<div class="top-header">
<nav class="top-header">
<div id="title-background" class="title-background">
<div class="left">
<a href={`/${lang}/`} class="header-item">{t("nav.brand")}</a>
@ -14,7 +14,7 @@ const t = i18n.useTranslations(lang);
<a href={`/${lang}/settings/`} class="header-item">{t("nav.settings")}</a>
</div>
</div>
</div>
</nav>
<style>
.top-header {

21
src/layouts/Layout.astro
View file

@ -63,6 +63,7 @@ const { title, optionalPreloads } = Astro.props;
<ViewTransitions />
</head>
<body>
<a href="#main-content" class="skip-to-main-content-link">Skip to main content</a>
<Header />
<slot transition:animate={"fade"} />
<script src="/uv/uv.bundle.js" is:inline transition:persist></script>
@ -116,6 +117,26 @@ const { title, optionalPreloads } = Astro.props;
--dropdown-background-color: #1f1d2e;
}
.skip-to-main-content-link {
position: absolute;
top: 10px;
left: 15px;
z-index: 999;
padding: 0.75em;
padding-inline: 20px;
background-color: var(--background-highlight);
color: var(--text-color);
border-radius: 15px;
opacity: 0;
transition: opacity 250ms ease-in-out;
}
.skip-to-main-content-link:focus {
top: 10px;
left: 15px;
opacity: 1;
outline: none;
}
body,
html {
margin: 0;

6
src/pages/404.astro
View file

@ -3,17 +3,17 @@ import Layout from "../layouts/Layout.astro";
---
<Layout title="404 | Alu">
<div class="main-content error-page">
<main id="main-content" class="main-content error-page">
<h1>404!</h1>
<p>The content you have requested could not be found!</p>
</div>
</main>
</Layout>
<style>
.error-page {
color: white;
}
.main-content {
#main-content {
display: flex;
justify-content: center;
align-items: center;

4
src/pages/[lang]/games.astro
View file

@ -13,14 +13,14 @@ export function getStaticPaths() {
<Layout title={t("pages.games")}>
<h1 class="title-text">{t("games.title")}</h1>
<div class="grid">
<main id="main-content" class="grid">
{
Object.keys(games).map((key) => {
const game = (games as any)[key];
return <GameItem name={game.name} image={game.image} slugName={game.slug} />;
})
}
</div>
</main>
</Layout>
<style>

6
src/pages/[lang]/index.astro
View file

@ -13,7 +13,7 @@ export function getStaticPaths() {
---
<Layout title={t("pages.home")}>
<div class="main-content">
<main id="main-content">
<h1 class="title-text">{t("menu.welcome")}</h1>
<div class="form-wrapper">
<form class="url-input-form" id="url-input-form">
@ -67,7 +67,7 @@ export function getStaticPaths() {
</p>
</div>
</div>
</div>
</main>
<ProxyRegistrar />
<script>
import { initTransport, registerSW } from "@components/ts/TransportManager";
@ -142,7 +142,7 @@ export function getStaticPaths() {
<style is:global>
.main-content {
#main-content {
width: 100%;
margin-top: 50px;
}

74
src/pages/[lang]/settings.astro
View file

@ -15,44 +15,46 @@ export function getStaticPaths() {
---
<Layout title={t("pages.settings")}>
<h1 class="title-text">{t("settings.title")}</h1>
<div class="content-hidden">
<div id="content-setting-tab-proxy">
<h1 class="content-setting-header">{t("settings.proxy")}</h1>
<ProxyTab />
</div>
<div id="content-setting-tab-customization">
<h1 class="content-setting-header">{t("settings.customization")}</h1>
<CustomizationTab />
</div>
<div id="content-setting-tab-cloaking">
<h1 class="content-setting-header">{t("settings.cloaking")}</h1>
<p class="content-setting-subtext">{t("settings.cloaking.subtext")}</p>
<CloakingTab />
</div>
<div id="content-setting-tab-credits">
<h1 class="content-setting-header">{t("settings.credits")}</h1>
<CreditsTab />
</div>
</div>
<div class="popup">
<div class="tabs">
<input type="radio" id="setting-tab-proxy" class="setting-tab" name="tab" checked="true" />
<label for="setting-tab-proxy">Proxy</label>
<input type="radio" id="setting-tab-customization" class="setting-tab" name="tab" />
<label for="setting-tab-customization">Customization</label>
<input type="radio" id="setting-tab-cloaking" class="setting-tab" name="tab" />
<label for="setting-tab-cloaking">Cloaking</label>
<input type="radio" id="setting-tab-credits" class="setting-tab" name="tab" />
<label for="setting-tab-credits">Credits</label>
<div class="marker">
<div id="top"></div>
<div id="bottom"></div>
<main id="main-content">
<h1 class="title-text">{t("settings.title")}</h1>
<div class="content-hidden">
<div id="content-setting-tab-proxy">
<h1 class="content-setting-header">{t("settings.proxy")}</h1>
<ProxyTab />
</div>
<div id="content-setting-tab-customization">
<h1 class="content-setting-header">{t("settings.customization")}</h1>
<CustomizationTab />
</div>
<div id="content-setting-tab-cloaking">
<h1 class="content-setting-header">{t("settings.cloaking")}</h1>
<p class="content-setting-subtext">{t("settings.cloaking.subtext")}</p>
<CloakingTab />
</div>
<div id="content-setting-tab-credits">
<h1 class="content-setting-header">{t("settings.credits")}</h1>
<CreditsTab />
</div>
</div>
<div id="current-content"></div>
</div>
<div class="popup">
<div class="tabs">
<input type="radio" id="setting-tab-proxy" class="setting-tab" name="tab" checked="true" />
<label for="setting-tab-proxy">Proxy</label>
<input type="radio" id="setting-tab-customization" class="setting-tab" name="tab" />
<label for="setting-tab-customization">Customization</label>
<input type="radio" id="setting-tab-cloaking" class="setting-tab" name="tab" />
<label for="setting-tab-cloaking">Cloaking</label>
<input type="radio" id="setting-tab-credits" class="setting-tab" name="tab" />
<label for="setting-tab-credits">Credits</label>
<div class="marker">
<div id="top"></div>
<div id="bottom"></div>
</div>
</div>
<div id="current-content"></div>
</div>
</main>
<script is:inline>
window.loadedContentStorage = {};
window.currentlySelectedTab;