Skip to content

Fix/accesibilidad navegacion landmarks #74

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
categulario merged 8 commits into from
Jul 27, 2026
Merged

Fix/accesibilidad navegacion landmarks #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9dd2026
ajustando estructura. acomodando hover y focus de botones de pie de p…
flkt-crnpio Jul 26, 2026
aacbb1e
agregando color semitransparente para mejorar contraste en Hero y Nav
flkt-crnpio Jul 26, 2026
eb67400
agregando background a propiedades editables de navegacion principal
flkt-crnpio Jul 26, 2026
a06e3a8
agregando background a propiedades editables de navegacion principal
flkt-crnpio Jul 26, 2026
7f0cbcd
agregando variable de estado de menu colapsable. agregando funcion de…
flkt-crnpio Jul 26, 2026
4286aec
cambiando titulo a negro, enlace a fondo verde texto negro
flkt-crnpio Jul 26, 2026
a300980
agregando inline y fondo a titulos principales
flkt-crnpio Jul 26, 2026
e6bd4c1
agregando enlace a contenido principal para saltar todos los elemento…
flkt-crnpio Jul 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 22 additions & 28 deletions src/components/Footer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,43 +3,37 @@
class="Footer flex w-full h-full container justify-between gap-5 items-center flex-col md:flex-row"
>
<img
class="Image1 mix-blend-screen"
src="/img/logo-cmx-blanco.svg"
style="height: 44px;"
alt="Codeando México"
/>
<div class="Frame30 flex-col justify-start items-center gap-4 inline-flex">
<div class="HechoConPorLaComunidad text-neutral-50 text-sm font-normal leading-[21px]">
Hecho con ❤️ por la comunidad
</div>
</div>
<div class="Frame7 flex-col justify-center items-start gap-2 inline-flex">
<div class="Frame31 self-stretch justify-center items-center gap-4 inline-flex">
<div
class="Frame8 p-2 bg-neutral-50 rounded-[45px] flex-col justify-start items-start gap-px inline-flex"

<p class="text-neutral-50 text-sm">
Hecho con ❤️ por la comunidad
</p>

<div class="text-center">
<div class="flex justify-center items-center gap-4">
<a href="https://x.com/CodeandoMexico/" target="_blank" rel="noopener noreferrer"
class="rounded-full bg-neutral-50 p-2 transition ease-in duration-150 hover:bg-cmxgreen focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxgreen focus:bg-cmxgreen"
>
<a href="https://x.com/CodeandoMexico/" target="_blank" rel="noopener noreferrer"
><img src="/x.svg" alt="X (twitter)" srcset="" /></a
>
</div>
<div
class="Frame9 p-2 bg-neutral-50 rounded-[45px] flex-col justify-start items-start gap-px inline-flex"
<img src="/x.svg" alt="X (twitter)" srcset="" />
</a>
<a href="https://github.com/CodeandoMexico/" target="_blank" rel="noopener noreferrer"
class="rounded-full bg-neutral-50 p-2 transition ease-in duration-150 hover:bg-cmxgreen focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxgreen focus:bg-cmxgreen"
>
<a href="https://github.com/CodeandoMexico/" target="_blank" rel="noopener noreferrer"
><img src="/github.svg" alt="Github" srcset="" /></a
>
</div>
<div
class="Frame10 p-2 bg-neutral-50 rounded-[45px] flex-col justify-start items-start gap-px inline-flex"
<img src="/github.svg" alt="Github" srcset="" />
</a>

<a href="https://codeandomexico.slack.com/" target="_blank" rel="noopener noreferrer"
class="rounded-full bg-neutral-50 p-2 transition ease-in duration-150 hover:bg-cmxgreen focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxgreen focus:bg-cmxgreen"
>
<a href="https://codeandomexico.slack.com/" target="_blank" rel="noopener noreferrer"
><img src="/slack.svg" alt="Slack" srcset="" /></a
>
</div>
<img src="/slack.svg" alt="Slack" srcset="" />
</a>
</div>
<div class="HolaCodeandomexicoOrg text-neutral-50 text-sm font-normal leading-[21px]">
<p class="text-neutral-50 text-sm mt-2">
equipo@codeandomexico.org
</div>
</p>
</div>
</div>
</footer>
7 changes: 7 additions & 0 deletions src/components/Header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<header>
<a
href="#main"
class="sr-only font-semibold uppercase focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-cmxblack focus:text-white focus:px-10 focus:py-5 focus:rounded focus:shadow-lg focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-white">
Ir a contenido principal
</a>
</header>
6 changes: 5 additions & 1 deletion src/components/Hero.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,11 @@
<div class="container px-5 py-28">
<div class="flex-col-reverse md:flex-row flex items-center gap-10 columns-2">
<div class="md:w-1/2 md:p-5">
<h1 class="text-6xl font-bold text-white leading-tight">{title}</h1>
<h1
class="text-6xl font-bold text-white leading-tight box-decoration-clone px-3 inline rounded-sm bg-cmxnuanced"
>
{title}
</h1>
<p
class="md:py-6 text-2xl leading-normal"
style:color={contrastedColor}
Expand Down
118 changes: 58 additions & 60 deletions src/components/Navbar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,23 @@
<script>
<script lang="ts">
import { principalMenuStore } from '@/store';

let isMenuOpen = false;

function closeHambMenu() {
document.getElementById('hamburger-menu')?.classList.toggle('hidden');
isMenuOpen = false;
}
function openHambMenu() {
document.getElementById('hamburger-menu')?.classList.toggle('hidden');
isMenuOpen = true;
}

function handleKeydown(event: KeyboardEvent) {
if (event.key === 'Escape' && isMenuOpen) {
closeHambMenu()
}
}

let menuItems = [
{ name: 'Proyectos', url: '/proyectos' },
{ name: 'Blog', url: '/blog' },
Expand All @@ -17,21 +27,23 @@
];
</script>

<svelte:window on:keydown={handleKeydown} />

<nav class="absolute w-full py-5 max-lg:bg-white">
<div class="flex container m-auto items-center px-5">
<a href="/">
<span class="sr-only">Codeando México</span>
<a href="/" class="rounded-sm transition ease-in duration-150 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxnuanced">
<span class="sr-only">Inicio</span>
<img src="/img/logo-cmx.svg" style="height: 44px;" alt="Codeando México" />
</a>
<div class="flex-grow"></div>

<ul class="gap-5 hidden lg:flex">
<ul class="gap-2 hidden lg:flex">
{#each menuItems as item}
<li>
<a
class={`hover:underline hover:gray-800 uppercase font-bold ${
$principalMenuStore.urlActive.includes(item.url) ? $principalMenuStore.color : ''
}`.trim()}
class={`p-2 rounded-sm transition ease-in duration-150 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxnuanced hover:underline hover:gray-800 uppercase font-bold
${$principalMenuStore.urlActive.includes(item.url) ? $principalMenuStore.color : ''}
${$principalMenuStore.urlActive.includes(item.url) ? $principalMenuStore.background : ''}`.trim()}
href={item.url}
>
{item.name}
Expand All @@ -40,70 +52,56 @@
{/each}
</ul>

<button
type="button"
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700 lg:hidden"
onclick={openHambMenu}
>
<span class="sr-only">Open main menu</span>
<svg
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
{#if !isMenuOpen}
<button
aria-label="Abrir menú principal"
type="button"
onclick={openHambMenu}
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700 lg:hidden hover:bg-gray-100 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxgreen"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
></path>
</svg>
</button>
<svg aria-hidden="true" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
</svg>
</button>
{/if}
</div>
</nav>
<div id="hamburger-menu" class="lg:hidden hidden" role="dialog" aria-modal="true">
<!-- Background backdrop, show/hide based on slide-over state. -->
<div class="fixed inset-0 z-10"></div>
<div
class="fixed inset-y-0 right-0 z-40 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
>

<div class={['fixed inset-0 transition duration-500 ease-in-out bg-stone-900/50', isMenuOpen?'opacity-1':'opacity-0']} ></div>

<div class="fixed inset-y-0 right-0 z-40 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between">
<a href="/" class="-m-1.5 p-1.5">
<span class="sr-only">Codeando México</span>
<img class="h-8 w-auto" src="/img/logo-cmx.svg" style="width: 100%;" alt="" />
<a href="/" onclick={closeHambMenu} class="-m-1.5 p-1.5 rounded-sm hover:bg-gray-100 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxgreen">
<span class="sr-only">Inicio</span>
<img class="h-8 w-auto" src="/img/logo-cmx.svg" style="width: 100%;" alt="Codeando México" />
</a>
<button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700" onclick={closeHambMenu}>
<span class="sr-only">Close menu</span>
<svg
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
<button
aria-label="Cerrar menú"
type="button"
onclick={closeHambMenu}
class="-m-2.5 rounded-md p-2.5 text-gray-700 hover:bg-gray-100 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxgreen"
>
<svg aria-hidden="true" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="mt-6 flow-root">
<div class="-my-6">
<div class="space-y-2 py-6">
{#each menuItems as item}
<div class="mx-3 block px-3 py-2 divide-y divide-gray-500 hover:bg-gray-50">
<a
href={item.url}
class={`-text-base font-semibold leading-7 uppercase ${
$principalMenuStore.urlActive.includes(item.url)
? 'text-cmxgreen'
: 'text-gray-900'
}`}>{item.name}</a
>
</div>
{/each}
</div>
<div class="my-6 py-6">
{#each menuItems as item}
<a
href={item.url}
onclick={closeHambMenu}
class={`my-2 block px-3 py-2 rounded-sm transition text-cmxblack ease-in duration-150 hover:bg-gray-100 hover:underline focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxgreen font-semibold leading-7 uppercase ${
$principalMenuStore.urlActive.includes(item.url)
? 'bg-cmxgreen'
: ''
}`}
>
{item.name}
</a>
{/each}
</div>
</div>
</div>
Expand Down
4 changes: 3 additions & 1 deletion src/lib/menuSelectorUpdater.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
import { principalMenuStore } from "@/store";

export function updateMenuSelector({url = '/', color = 'text-white'}) {
export function updateMenuSelector({url = '/', color = 'text-white', background = 'bg-cmxnuanced'}) {
principalMenuStore.update(data => {
data.urlActive = url;
data.color = color;
data.background = background;
return data;
});

return () => {
principalMenuStore.update(data => {
data.urlActive = '';
data.color = '';
data.background = '';
return data;
});
};
Expand Down
8 changes: 6 additions & 2 deletions src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script>
import Footer from '@/components/Footer.svelte';
import Navbar from '@/components/Navbar.svelte';
import Header from '@/components/Header.svelte';
import '../app.css';
/**
* @typedef {Object} Props
Expand All @@ -24,9 +25,12 @@
<meta property="og:image" content={image} />
</svelte:head>

<Navbar />
<Header />

{@render children?.()}
<Navbar />

<main id="main">
{@render children?.()}
</main>

<Footer />
4 changes: 2 additions & 2 deletions src/routes/blog/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@
activeTag = tag.toLocaleLowerCase();
};

$effect(() => updateMenuSelector({ url: '/blog', color: 'text-cmxgreen' }));
$effect(() => updateMenuSelector({ url: '/blog', color: 'color-cmxblack', background: 'bg-cmxgreen' }));
</script>

<div class="container my-20 pt-hero mx-auto">
<div class="container m-auto px-3 mb-8">
<div class="my-7">
<h1 class="text-5xl text-cmxgreen font-bold">Blog</h1>
<h1 class="text-5xl font-bold">Blog</h1>
</div>
<BlogHero
slug={highlightedPost.slug}
Expand Down
3 changes: 2 additions & 1 deletion src/store/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@ import { writable } from "svelte/store";

export const principalMenuStore = writable({
urlActive: '',
color: ''
color: '',
background: ''
});
11 changes: 6 additions & 5 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,17 @@ export default {
theme: {
extend: {
dropShadow: {
'full': '20px 20px 0px #000000',
'mid': '10px 10px 0px #000000',
'low': '5px 5px 0px #000000',
},
'full': '20px 20px 0px #000000',
'mid': '10px 10px 0px #000000',
'low': '5px 5px 0px #000000',
},
colors: {
cmxblack: "#030303",
cmxgreen: "#00D690",
cmxyellow: "#F2D301",
cmxred: "#FF6D53",
cmxblue: "#0073F4"
cmxblue: "#0073F4",
cmxnuanced: "#4004"
},
padding: {
hero: '83px'
Expand Down