Compare commits

..

2 commits

Author SHA1 Message Date
838190b8e5
Fixed Navbar audit
All checks were successful
/ checking (push) Successful in 33s
/ build-site (push) Successful in 3m48s
/ publish (push) Successful in 28s
2024-01-03 20:39:58 +01:00
e0cf2af0c0
Bumped version + deps
Some checks failed
/ checking (push) Successful in 14s
/ publish (push) Successful in 32s
/ build-site (push) Failing after 37s
2024-01-03 20:29:27 +01:00
5 changed files with 47 additions and 15 deletions

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "fgo-ta-com-website", "name": "fgo-ta-com-website",
"version": "0.1.7", "version": "0.1.10",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "fgo-ta-com-website", "name": "fgo-ta-com-website",
"version": "0.1.7", "version": "0.1.10",
"dependencies": { "dependencies": {
"@astro-community/astro-embed-youtube": "^0.4.3", "@astro-community/astro-embed-youtube": "^0.4.3",
"@astrojs/check": "^0.3.4", "@astrojs/check": "^0.3.4",

View file

@ -1,7 +1,7 @@
{ {
"name": "fgo-ta-com-website", "name": "fgo-ta-com-website",
"type": "module", "type": "module",
"version": "0.1.9", "version": "0.1.10",
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",
"start": "astro dev", "start": "astro dev",

View file

@ -6,23 +6,25 @@ const hamburger_src_url = `url("${hamburger.src}")`
--- ---
<header> <header>
<a href="/" rel="noopener noreferrer" aria-label="Home"> <a href="/" rel="noopener noreferrer" aria-label="Home" role="navigation">
<Image src={logo} alt="Website Logo" /> <Image src={logo} alt="Website Logo" />
<span class="visually-hidden">Website Logo</span>
</a> </a>
<ul class="desktop"> <ul class="desktop">
<slot /> <slot name="desktop" />
</ul> </ul>
<button <button
class="mobile" class="mobile"
aria-label="Navigation Button" aria-label="Navigation Button"
tabindex="0" tabindex="0"
onclick="this.focus()" onclick="this.focus()"
role="navigation"
> >
<ul> <ul>
<slot /> <slot name="mobile" />
</ul> </ul>
<div class="placeholder"></div> <div class="placeholder"></div>
<div class="hamburger-menu"></div> <div class="hamburger-menu" role="navigation"></div>
</button> </button>
</header> </header>
@ -39,7 +41,7 @@ const hamburger_src_url = `url("${hamburger.src}")`
line-height: 1.5em; line-height: 1.5em;
} }
header > a { header > a {
padding-left: 16px; margin-left: 16px;
padding-top: 8px; padding-top: 8px;
display: block; display: block;
height: 48px; height: 48px;
@ -113,12 +115,12 @@ const hamburger_src_url = `url("${hamburger.src}")`
.hamburger-menu { .hamburger-menu {
mask: var(--hamburger_src_url) no-repeat center; mask: var(--hamburger_src_url) no-repeat center;
background-color: white; background-color: white;
width: 2em; width: 2rem;
height: 2em; height: 2rem;
position: static; position: static;
align-self: flex-start; align-self: flex-start;
padding-right: 1em; margin-right: 1rem;
padding-top: 2.5em; margin-top: 1rem;
} }
@media (min-width: 1140px) { @media (min-width: 1140px) {

View file

@ -1,12 +1,13 @@
--- ---
export interface Props { export interface Props {
currentPage?: string currentPage?: string
navtype: 'mobile' | 'desktop'
link: string link: string
text: string text: string
icon: ImageMetadata icon: ImageMetadata
} }
const { icon, text, link, currentPage } = Astro.props const { icon, text, link, navtype, currentPage } = Astro.props
let currPage = '' let currPage = ''
const slug = link.replace(new RegExp('/', 'g'), '') const slug = link.replace(new RegExp('/', 'g'), '')
@ -19,6 +20,8 @@ if (currentPage === slug) {
const icon_src_url = `url("${icon.src}")` const icon_src_url = `url("${icon.src}")`
const fulllink = `/${slug}` const fulllink = `/${slug}`
let extraattributes = navtype === 'mobile' ? { tabindex: '0' } : {}
--- ---
<li> <li>
@ -27,7 +30,8 @@ const fulllink = `/${slug}`
rel="noopener noreferrer" rel="noopener noreferrer"
aria-label={text} aria-label={text}
class={currPage} class={currPage}
tabindex="0" role="navigation"
{...extraattributes}
> >
<div class="icon"></div> <div class="icon"></div>
{text} {text}

View file

@ -63,7 +63,22 @@ const mapped_navdata = navdata.map((item) => ({
<Navbar> <Navbar>
{ {
mapped_navdata.map((item) => ( mapped_navdata.map((item) => (
<NavbarEntry currentPage={currentpage} {...item} /> <NavbarEntry
currentPage={currentpage}
navtype="desktop"
{...item}
slot="desktop"
/>
))
}
{
mapped_navdata.map((item) => (
<NavbarEntry
currentPage={currentpage}
navtype="mobile"
{...item}
slot="mobile"
/>
)) ))
} }
</Navbar> </Navbar>
@ -88,4 +103,15 @@ const mapped_navdata = navdata.map((item) => ({
background: var(--c-lightgray); background: var(--c-lightgray);
margin: 0px; margin: 0px;
} }
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
</style> </style>