Skip to content

Accessibility errors fix in home page #175

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

Open
Sanindu wants to merge 1 commit into
base: main
Choose a base branch
from
+47 −8
Open

Accessibility errors fix in home page #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 3 additions & 1 deletion src/components/Checkbox.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const { label, name, checked } = Astro.props;
type="button"
role="checkbox"
aria-checked="false"
aria-label={label}
>
<svg
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -32,7 +33,8 @@ const { label, name, checked } = Astro.props;
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
class="icon"><path d="M20 6 9 17l-5-5"></path></svg
class="icon"
aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg
>
</button>
{label}
Expand Down
2 changes: 2 additions & 0 deletions src/layouts/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ const {
stroke-linecap="round"
stroke-linejoin="round"
class="nav-toggle__icon nav-toggle__icon--close"
aria-hidden="true"
><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg
>
<svg
Expand All @@ -115,6 +116,7 @@ const {
stroke-linecap="round"
stroke-linejoin="round"
class="nav-toggle__icon nav-toggle__icon--open"
aria-hidden="true"
><line x1="4" x2="20" y1="12" y2="12"></line><line
x1="4"
x2="20"
Expand Down
28 changes: 27 additions & 1 deletion src/sections/Connect.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import Input from "../components/Input.astro";
/>
<button class="connect__submit">Subscribe</button>
</form>
<div class="sr-only" aria-live="polite" id="form-status"></div>
Copy link
Collaborator

@pawelgrzybek pawelgrzybek Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no styling around this one and the spacing looks bit awkward. Any chance we can add some styling to it, and also reduce the specificity of this selector please to match others? There is no need for such a high specificity of this one.

<div class="connect__buttons">
<a
href="https://github.com/nn1dev"
Expand All @@ -34,6 +35,7 @@ import Input from "../components/Input.astro";
class="button__icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
aria-hidden="true"
>
<path
d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9a17.56 17.56 0 003.8.4c8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1a102.4 102.4 0 01-22.6 2.7c-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1a63 63 0 0025.6-6c2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8a18.64 18.64 0 015-.5c8.1 0 26.4 3.1 56.6 24.1a208.21 208.21 0 01112.2 0c30.2-21 48.5-24.1 56.6-24.1a18.64 18.64 0 015 .5c12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5a19.35 19.35 0 004-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"
Expand All @@ -49,6 +51,7 @@ import Input from "../components/Input.astro";
class="button__icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
aria-hidden="true"
>
<path
d="M444.17 32H70.28C49.85 32 32 46.7 32 66.89v374.72C32 461.91 49.85 480 70.28 480h373.78c20.54 0 35.94-18.21 35.94-38.39V66.89C480.12 46.7 464.6 32 444.17 32zm-273.3 373.43h-64.18V205.88h64.18zM141 175.54h-.46c-20.54 0-33.84-15.29-33.84-34.43 0-19.49 13.65-34.42 34.65-34.42s33.85 14.82 34.31 34.42c-.01 19.14-13.31 34.43-34.66 34.43zm264.43 229.89h-64.18V296.32c0-26.14-9.34-44-32.56-44-17.74 0-28.24 12-32.91 23.69-1.75 4.2-2.22 9.92-2.22 15.76v113.66h-64.18V205.88h64.18v27.77c9.34-13.3 23.93-32.44 57.88-32.44 42.13 0 74 27.77 74 87.64z"
Expand All @@ -67,6 +70,7 @@ import Input from "../components/Input.astro";
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
class="button__icon"
aria-hidden="true"
>
<path
fill-rule="evenodd"
Expand All @@ -87,6 +91,7 @@ import Input from "../components/Input.astro";
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="button__icon"
aria-hidden="true"
>
<path
d="M2083.33 1041.67C2083.33 466.371 1616.96 0 1041.67 0C466.371 0 0 466.371 0 1041.67C0 1530.19 336.312 1940.09 790.025 2052.66V1359.98H575.225V1041.67H790.025V904.504C790.025 549.954 950.475 385.621 1298.56 385.621C1364.55 385.621 1478.42 398.558 1525 411.5V700.058C1500.42 697.471 1457.72 696.175 1404.66 696.175C1233.86 696.175 1167.86 760.875 1167.86 929.092V1041.67H1508.11L1449.66 1359.98H1167.86V2075.7C1683.64 2013.41 2083.33 1574.24 2083.33 1041.67Z"
Expand All @@ -103,6 +108,7 @@ import Input from "../components/Input.astro";
class="button__icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
aria-hidden="true"
>
<path
d="M480 173.59c0-104.13-68.26-134.65-68.26-134.65C377.3 23.15 318.2 16.5 256.8 16h-1.51c-61.4.5-120.46 7.15-154.88 22.94 0 0-68.27 30.52-68.27 134.65 0 23.85-.46 52.35.29 82.59C34.91 358 51.11 458.37 145.32 483.29c43.43 11.49 80.73 13.89 110.76 12.24 54.47-3 85-19.42 85-19.42l-1.79-39.5s-38.93 12.27-82.64 10.77c-43.31-1.48-89-4.67-96-57.81a108.44 108.44 0 01-1-14.9 558.91 558.91 0 0096.39 12.85c32.95 1.51 63.84-1.93 95.22-5.67 60.18-7.18 112.58-44.24 119.16-78.09 10.42-53.34 9.58-130.17 9.58-130.17zm-80.54 134.16h-50V185.38c0-25.8-10.86-38.89-32.58-38.89-24 0-36.06 15.53-36.06 46.24v67h-49.66v-67c0-30.71-12-46.24-36.06-46.24-21.72 0-32.58 13.09-32.58 38.89v122.37h-50V181.67q0-38.65 19.75-61.39c13.6-15.15 31.4-22.92 53.51-22.92 25.58 0 44.95 9.82 57.75 29.48L256 147.69l12.45-20.85c12.81-19.66 32.17-29.48 57.75-29.48 22.11 0 39.91 7.77 53.51 22.92q19.79 22.72 19.75 61.39z"
Expand All @@ -118,6 +124,7 @@ import Input from "../components/Input.astro";
class="button__icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 64 57"
aria-hidden="true"
><path
d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
></path></svg
Expand All @@ -132,6 +139,7 @@ import Input from "../components/Input.astro";
class="button__icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
aria-hidden="true"
>
<path
d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.122-48.597C458.59 64 288 64 288 64s-170.59 0-213.533 11.486c-23.335 6.32-41.841 24.947-48.122 48.597C16 167.197 16 256.001 16 256.001s0 88.804 10.345 131.918c6.281 23.65 24.787 42.276 48.122 48.597C117.41 448 288 448 288 448s170.59 0 213.533-11.486c23.335-6.32 41.841-24.947 48.122-48.597C560 344.805 560 256.001 560 256.001s0-88.804-10.345-131.918zM232.001 334.839V177.163l142.739 78.838-142.739 78.838z"
Expand All @@ -147,6 +155,7 @@ import Input from "../components/Input.astro";
class="button__icon"
viewBox="0 0 640 512"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
><path
d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"
></path></svg
Expand All @@ -162,6 +171,7 @@ import Input from "../components/Input.astro";
import * as Sentry from "@sentry/astro";

const form = document.querySelector("form");
const formStatus = document.getElementById("form-status");
const FORM_LOADING_CLASS = "connect__form--loading";

const traceData = Sentry.getTraceData();
Expand All @@ -170,13 +180,17 @@ import Input from "../components/Input.astro";
form?.addEventListener("submit", async (e) => {
Copy link
Collaborator

@pawelgrzybek pawelgrzybek Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When submit is triggered, status should also be cleared.

e.preventDefault();
form.classList.add(FORM_LOADING_CLASS);
form.setAttribute("aria-busy", "true");
if (formStatus) formStatus.textContent = "Submitting...";
const formData = new FormData(form);
const { data, error } = await actions.submitFormNewsletter(formData);

if (error) {
Sentry.captureException(error);
form.classList.remove(FORM_LOADING_CLASS);
throw new Error(error.message);
form.removeAttribute("aria-busy");
if (formStatus) formStatus.textContent = "Something went wrong. Please try again.";
return;
}

window.location.href = `/newsletter/${data}`;
Expand Down Expand Up @@ -307,4 +321,16 @@ import Input from "../components/Input.astro";
height: calc(var(--lh) * 0.75);
fill: currentColor;
}

.sr-only {
Copy link
Collaborator

@pawelgrzybek pawelgrzybek Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is very verbose way of doing it. Ana Tudor recently published a post about a way more concise way. I think only opacity and clip is more than enough at this point.

position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
</style>
5 changes: 4 additions & 1 deletion src/sections/Events.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ const formatTime = (date: Date) =>
viewBox="0 0 16 16"
fill="currentColor"
class="events__item-icon"
aria-hidden="true"
>
<path
fill-rule="evenodd"
Expand All @@ -72,6 +73,7 @@ const formatTime = (date: Date) =>
viewBox="0 0 16 16"
fill="currentColor"
class="events__item-icon"
aria-hidden="true"
>
<path
fill-rule="evenodd"
Expand All @@ -87,6 +89,7 @@ const formatTime = (date: Date) =>
viewBox="0 0 16 16"
fill="currentColor"
class="events__item-icon"
aria-hidden="true"
>
<path
fill-rule="evenodd"
Expand All @@ -97,7 +100,7 @@ const formatTime = (date: Date) =>
FREE
</li>
</ul>
<p class="events__more" aria-label={`Read more ${name}`}>
<p class="events__more" aria-hidden="true">
Copy link
Collaborator

@pawelgrzybek pawelgrzybek Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this change a lot. Sometimes less is more, and the surrounding partner already has enough of a context for the assistive tech. Good one mate.

Read more »
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/sections/Hero.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const { title, description } = Astro.props;
---

<section class="hero">
<div class="hero__grid">
<div class="hero__grid" aria-hidden="true">
Copy link
Collaborator

@pawelgrzybek pawelgrzybek Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no need for this one. This is is purely decorative and totally transparent for accessibility tree.

<div class="hero__grid-item"></div>
<div class="hero__grid-item"></div>
<div class="hero__grid-item"></div>
Expand Down
Loading