This is an automated email from the ASF dual-hosted git repository.
kaxil pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow-site.git
The following commit(s) were added to refs/heads/main by this push:
new 450cb8e68b Polish landing-page accessibility follow-up (#1546)
450cb8e68b is described below
commit 450cb8e68b04db3384cbca63a0a80e2a5a4f2dcd
Author: Shahar Epstein <[email protected]>
AuthorDate: Fri May 29 16:13:19 2026 +0300
Polish landing-page accessibility follow-up (#1546)
Polish heading structure, link/button semantics, and dark-mode contrast
across landing pages while keeping Lighthouse accessibility at 100 for all
static pages.
- Add skip-link and main-content id to taxonomy/baseof.html
- Promote Blog heading to h1 and label the search input/button on
taxonomy/tag.html
- Move accessible WCAG-AA shades into the $colors map and reference via
map-get
- Fix stale comment that cited the superseded #016bdb button shade
- Scope stylelint no-descending-specificity disables to the intentional
hover/dark-mode link rules
---------
Co-authored-by: Cursor <[email protected]>
---
.gitignore | 1 +
landing-pages/site/assets/scss/_blog-page.scss | 57 ++++++-
landing-pages/site/assets/scss/_colors.scss | 7 +
.../site/assets/scss/_share-social-media.scss | 20 +++
landing-pages/site/assets/scss/main-custom.scss | 189 +++++++++++++++++++--
.../site/content/en/announcements/_index.md | 6 +-
.../site/content/en/community/_index.html | 4 +-
landing-pages/site/content/en/docs/_index.md | 12 +-
landing-pages/site/layouts/blog/baseof.html | 3 +-
landing-pages/site/layouts/blog/content.html | 13 +-
landing-pages/site/layouts/blog/list.html | 5 +-
landing-pages/site/layouts/community/baseof.html | 3 +-
landing-pages/site/layouts/community/list.html | 28 +--
landing-pages/site/layouts/docs/baseof.html | 3 +-
landing-pages/site/layouts/meetups/baseof.html | 3 +-
landing-pages/site/layouts/meetups/list.html | 15 +-
.../site/layouts/partials/boxes/blogpost.html | 4 +-
.../site/layouts/partials/boxes/committer.html | 5 +-
.../site/layouts/partials/boxes/event.html | 4 +-
.../site/layouts/partials/boxes/testimonial.html | 2 +-
.../site/layouts/partials/boxes/use-cases.html | 2 +-
.../site/layouts/shortcodes/accordion.html | 2 +-
landing-pages/site/layouts/taxonomy/baseof.html | 3 +-
landing-pages/site/layouts/taxonomy/tag.html | 5 +-
landing-pages/site/layouts/use-cases/baseof.html | 3 +-
landing-pages/site/layouts/use-cases/list.html | 10 +-
26 files changed, 321 insertions(+), 88 deletions(-)
diff --git a/.gitignore b/.gitignore
index c3e1f96032..f3894ef53a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,4 @@ docs-archive/**/output-*.log
*.log
*.iml
.venv/
+.cursor
diff --git a/landing-pages/site/assets/scss/_blog-page.scss
b/landing-pages/site/assets/scss/_blog-page.scss
index 8756f72c23..15920bd659 100644
--- a/landing-pages/site/assets/scss/_blog-page.scss
+++ b/landing-pages/site/assets/scss/_blog-page.scss
@@ -22,15 +22,18 @@
.tag {
@extend .bodytext__medium--cerulean-blue;
+ color: map-get($colors, cerulean-blue-aa-text);
display: block;
- background-color: rgba(map-get($colors, cerulean-blue), 0.25);
+ background-color: #fff;
+ border: 1px solid map-get($colors, cerulean-blue-aa-text);
padding: 1px 15px;
border-radius: 5px;
transition: .2s;
- margin: 7px 7px;
+ margin: 0;
&.active, &:hover {
- background-color: map-get($colors, cerulean-blue);
+ background-color: map-get($colors, cerulean-blue-aa);
+ border-color: map-get($colors, cerulean-blue-aa);
color: map-get($colors, white);
}
}
@@ -40,11 +43,11 @@
justify-content: center;
flex-wrap: wrap;
width: fit-content;
- margin: -7px;
+ gap: 10px;
@media (max-width: $mobile) {
justify-content: center;
- margin-bottom: 7px;
+ margin-bottom: 0;
}
}
@@ -66,6 +69,7 @@
&--link {
@extend .bodytext__medium--cerulean-blue;
+ color: map-get($colors, cerulean-blue-aa);
font-weight: 500;
}
@@ -98,11 +102,16 @@
&--author {
@extend .bodytext__medium--cerulean-blue;
+ color: map-get($colors, cerulean-blue-aa-text);
font-weight: 500;
margin-bottom: 30px;
margin-right: 17px;
}
+ &--author-name {
+ color: map-get($colors, cerulean-blue-aa-text);
+ }
+
&--social-media-icon {
margin-right: 7px;
}
@@ -115,7 +124,7 @@
&--date {
@extend .bodytext__medium--brownish-grey;
- margin-top: 17px;
+ margin-top: 8px;
}
}
}
@@ -164,6 +173,12 @@
}
}
+.box-event__blogpost {
+ &--author {
+ color: #4a4a4a;
+ }
+}
+
// Dark mode support using Bootstrap CSS variables
[data-bs-theme="dark"] {
.blogpost-content {
@@ -172,19 +187,34 @@
color: var(--bs-emphasis-color);
}
+ &--author {
+ color: var(--bs-link-color);
+ }
+
+ &--author-name {
+ color: var(--bs-link-color);
+ }
+
&--description {
color: var(--bs-body-color);
}
&--date {
- color: var(--bs-secondary-color);
+ color: var(--bs-body-color);
}
}
}
+ .box-event__blogpost {
+ &--author {
+ color: var(--bs-secondary-color);
+ }
+ }
+
.tag {
- color: var(--bs-link-color);
- background-color: rgba(var(--bs-link-color-rgb), 0.15);
+ color: var(--bs-link-hover-color);
+ background-color: transparent;
+ border-color: var(--bs-link-color);
&.active, &:hover {
background-color: var(--bs-link-color);
@@ -195,6 +225,15 @@
.new-entry--link {
color: var(--bs-link-color);
}
+
+ .blogpost-content__metadata--social-media-icon {
+ transition: opacity 0.2s ease;
+
+ &:hover,
+ &:focus {
+ opacity: 0.85;
+ }
+ }
}
[data-bs-theme="dark"] .blog-pager h5 {
diff --git a/landing-pages/site/assets/scss/_colors.scss
b/landing-pages/site/assets/scss/_colors.scss
index 3d2b08dad7..8171f79209 100644
--- a/landing-pages/site/assets/scss/_colors.scss
+++ b/landing-pages/site/assets/scss/_colors.scss
@@ -19,6 +19,13 @@
$colors: (
cerulean-blue: #017cee,
+ // Accessible (WCAG AA) shades used to override brand cerulean-blue
(#017cee, ~4.1:1
+ // vs white) where it fails contrast. Per-component rationale lives in
main-custom.scss.
+ cerulean-blue-aa: #0052a3, // 6.8:1 on white — links, buttons, borders
(light mode)
+ cerulean-blue-aa-hover: #005ebc, // light-mode hover/focus state
+ cerulean-blue-aa-dark-hover: #0072e3, // dark-mode hover/focus state
+ cerulean-blue-aa-text: #0157b8, // ~4.5:1 — blog tag & author text
(light mode)
+ code-magenta: #5a1039, // accessible inline-code text (light mode);
overrides Bootstrap #d63384
shamrock: #00ad46,
bright-sky-blue: #0cb6ff,
melon: #ff7557,
diff --git a/landing-pages/site/assets/scss/_share-social-media.scss
b/landing-pages/site/assets/scss/_share-social-media.scss
index 6152ddd03e..b8a7ef3eca 100644
--- a/landing-pages/site/assets/scss/_share-social-media.scss
+++ b/landing-pages/site/assets/scss/_share-social-media.scss
@@ -25,5 +25,25 @@
&--icon {
margin-right: 12px;
cursor: pointer;
+ transition: opacity 0.2s ease;
+
+ &:hover {
+ opacity: 0.75;
+ }
+ }
+}
+
+[data-bs-theme="dark"] .share-section {
+ p {
+ color: var(--bs-body-color);
+ }
+
+ .share-section--icon {
+ transition: opacity 0.2s ease;
+
+ &:hover,
+ &:focus {
+ opacity: 0.85;
+ }
}
}
diff --git a/landing-pages/site/assets/scss/main-custom.scss
b/landing-pages/site/assets/scss/main-custom.scss
index 7e2f6b72c5..42c3d78393 100644
--- a/landing-pages/site/assets/scss/main-custom.scss
+++ b/landing-pages/site/assets/scss/main-custom.scss
@@ -60,36 +60,124 @@
@import "survey";
@import "suggest-change";
+/* Override Bootstrap's default --bs-code-color (#d63384, 4.2:1 vs white) with
an
+ accessible shade. Using `html` (specificity 0,0,1) so that the dark-mode
override
+ in _colors.scss ([data-bs-theme="dark"], specificity 0,1,0) always wins. */
+html {
+ --bs-code-color: #{map-get($colors, code-magenta)};
+}
+
/* Accessibility: .btn-filled uses #017cee (cerulean-blue) background with
white text.
WCAG AA requires 4.5:1; #017cee gives ~4.1:1. Override the button
background with
- a slightly darker shade (#016bdb) that achieves 4.7:1 while staying
brand-adjacent. */
+ cerulean-blue-aa (#0052a3, 6.8:1) while staying brand-adjacent. */
+button.btn-filled,
.btn-filled {
- background-color: #016bdb;
- border-color: #016bdb;
+ background-color: map-get($colors, cerulean-blue-aa);
+ border-color: map-get($colors, cerulean-blue-aa);
+ color: #fff !important;
&:focus {
- background-color: #017cee;
- border-color: #017cee;
+ background-color: map-get($colors, cerulean-blue-aa-hover);
+ border-color: map-get($colors, cerulean-blue-aa-hover);
}
&:hover {
- background-color: #017cee;
- border-color: #017cee;
+ background-color: map-get($colors, cerulean-blue-aa-hover);
+ border-color: map-get($colors, cerulean-blue-aa-hover);
+ }
+}
+
+/* button.btn-hollow.btn-blue: _buttons.scss uses cerulean-blue (#017cee,
3.8:1 vs white)
+ which fails WCAG AA. Override to cerulean-blue-aa (#0052a3, 6.8:1) in light
mode only. */
+button.btn-hollow.btn-blue {
+ color: map-get($colors, cerulean-blue-aa) !important;
+ border-color: map-get($colors, cerulean-blue-aa) !important;
+}
+
+[data-bs-theme="dark"] button.btn-hollow.btn-blue {
+ color: var(--bs-link-color) !important;
+ border-color: var(--bs-link-color) !important;
+}
+
+/* Button-styled anchor links (meetups, events) — full hover effect */
+a.btn-hollow.btn-blue {
+ display: inline-block;
+ background-color: #fff;
+ border: 1px solid map-get($colors, cerulean-blue-aa);
+ border-radius: 5px;
+ padding: 9px 29px;
+ color: map-get($colors, cerulean-blue-aa);
+ cursor: pointer;
+ transition: all ease-out 0.2s;
+ text-decoration: none !important;
+
+ &:hover,
+ &:focus {
+ background-color: map-get($colors, cerulean-blue-aa);
+ border-color: map-get($colors, cerulean-blue-aa);
+ color: #fff;
+ text-decoration: none !important;
+ }
+}
+
+[data-bs-theme="dark"] a.btn-hollow.btn-blue {
+ background-color: #1e1919;
+ color: var(--bs-link-color);
+ border-color: var(--bs-link-color);
+
+ &:hover,
+ &:focus {
+ background-color: var(--bs-link-color);
+ border-color: var(--bs-link-color);
+ color: var(--bs-body-bg);
}
}
+/* Use-case & testimonial card "Learn more" span (inside <a>, cannot be
<button>) */
+.use-case-link-cta {
+ display: inline-block;
+ background-color: #fff;
+ border: 1px solid map-get($colors, cerulean-blue-aa);
+ border-radius: 5px;
+ padding: 9px 29px;
+ color: map-get($colors, cerulean-blue-aa) !important;
+ transition: all ease-out 0.2s;
+}
+
+[data-bs-theme="dark"] .use-case-link-cta {
+ background-color: #1e1919;
+ color: var(--bs-link-color) !important;
+ border-color: var(--bs-link-color);
+}
+
+a:hover .use-case-link-cta,
+a:focus-visible .use-case-link-cta {
+ background-color: map-get($colors, cerulean-blue-aa);
+ border-color: map-get($colors, cerulean-blue-aa);
+ color: #fff !important;
+}
+
+[data-bs-theme="dark"] a:hover .use-case-link-cta,
+[data-bs-theme="dark"] a:focus-visible .use-case-link-cta {
+ background-color: var(--bs-link-color);
+ border-color: var(--bs-link-color);
+ color: var(--bs-body-bg) !important;
+}
+
+[data-bs-theme="dark"] button.btn-filled,
[data-bs-theme="dark"] .btn-filled {
- background-color: #016bdb;
- border-color: #016bdb;
+ background-color: map-get($colors, cerulean-blue-aa-hover);
+ border-color: map-get($colors, cerulean-blue-aa-hover);
+ color: #fff !important;
&:focus {
- background-color: #0188ff;
- border-color: #0188ff;
+ background-color: map-get($colors, cerulean-blue-aa-dark-hover);
+ border-color: map-get($colors, cerulean-blue-aa-dark-hover);
}
&:hover {
- background-color: #0188ff;
- border-color: #0188ff;
+ background-color: map-get($colors, cerulean-blue-aa-dark-hover);
+ border-color: map-get($colors, cerulean-blue-aa-dark-hover);
}
}
@@ -100,7 +188,7 @@
left: 0;
z-index: 9999;
padding: 0.75rem 1.25rem;
- background: #017cee;
+ background: map-get($colors, cerulean-blue-aa);
color: #fff;
font-weight: 600;
font-size: 1rem;
@@ -127,6 +215,75 @@
border: 0;
}
+/* Links in body text: subtle underline at rest (satisfies WCAG 1.4.1 / axe
link-in-text-block),
+ solid on hover/focus (expected interaction). Bootstrap removes underline on
:hover by default
+ so we must be explicit on both states.
+
+ no-descending-specificity is disabled for this region: the base / :hover /
:focus and
+ light / dark-mode variants are intentionally grouped by readability, not by
ascending
+ specificity. The dark-mode selectors carry [data-bs-theme="dark"] so they
always win
+ regardless of source order, so the ordering does not affect the cascade. */
+/* stylelint-disable no-descending-specificity */
+main p a,
+main li a,
+.markdown-content p a,
+.rst-content p a,
+.rst-content li a {
+ text-decoration: underline;
+ text-decoration-color: rgba(0, 0, 0, 0.22);
+ text-underline-offset: 0.15em;
+ text-decoration-thickness: 0.07em;
+
+ &:hover,
+ &:focus {
+ text-decoration: underline;
+ text-decoration-color: currentColor;
+ text-underline-offset: 0.15em;
+ }
+}
+
+[data-bs-theme="dark"] main p a,
+[data-bs-theme="dark"] main li a,
+[data-bs-theme="dark"] .markdown-content p a,
+[data-bs-theme="dark"] .rst-content p a,
+[data-bs-theme="dark"] .rst-content li a {
+ text-decoration-color: rgba(255, 255, 255, 0.3);
+
+ &:hover,
+ &:focus {
+ text-decoration-color: currentColor;
+ }
+}
+
+/* Directory-style lists (e.g. providers index) — links ARE the entire list
item,
+ so no underline at rest; axe link-in-text-block does not apply when there is
+ no surrounding non-link text in the <li>. Show underline on hover for
feedback. */
+.list-providers li a {
+ text-decoration: none;
+
+ &:hover,
+ &:focus {
+ text-decoration: underline;
+ }
+}
+/* stylelint-enable no-descending-specificity */
+
+main p code,
+main li code,
+.markdown-content code {
+ color: map-get($colors, code-magenta);
+ background-color: #f3f5f7;
+ padding: 0 5px;
+ border-radius: 3px;
+}
+
+[data-bs-theme="dark"] main p code,
+[data-bs-theme="dark"] main li code,
+[data-bs-theme="dark"] .markdown-content code {
+ color: #f0abfc;
+ background-color: #1a1f2e;
+}
+
/* Focus-visible enhancement for interactive elements */
:focus-visible {
outline: 3px solid #017cee;
@@ -237,6 +394,9 @@
font-size: 1.1rem;
}
+/* stylelint-disable no-descending-specificity --
+ flagged only because the body-link rules added above are more specific; the
cascade here
+ is unaffected (.blog-snippet-title links are a distinct component). */
.blog-snippet-title a {
text-decoration: none;
}
@@ -244,6 +404,7 @@
.blog-snippet-title a:hover {
text-decoration: underline;
}
+/* stylelint-enable no-descending-specificity */
.blog-snippet-excerpt {
margin: 0;
diff --git a/landing-pages/site/content/en/announcements/_index.md
b/landing-pages/site/content/en/announcements/_index.md
index 894b13f5b0..8e23c8b38b 100644
--- a/landing-pages/site/content/en/announcements/_index.md
+++ b/landing-pages/site/content/en/announcements/_index.md
@@ -900,19 +900,19 @@ We've just released Apache **Airflow Helm chart 1.5.0**.
The biggest Airflow Event of the Year returns May 23–27! Airflow Summit 2022
will bring together the global
community of Apache Airflow practitioners and data leaders.
-### What’s on the Agenda
+## What’s on the Agenda
During the free conference, you will hear about Apache Airflow best practices,
trends in building data
pipelines, data governance, Airflow and machine learning, and the future of
Airflow.
There will also be a series of presentations on non-code contributions driving
the open-source project.
-### How to Attend
+## How to Attend
This year’s edition will include a variety of online sessions across different
time zones. Additionally,
you can take part in local in-person events organized worldwide for data
communities
to watch the event and network.
-### Interested?
+## Interested?
🪶 [Register for Airflow Summit
2022](https://www.crowdcast.io/e/airflowsummit2022/register?utm_campaign=Astronomer_marketing&utm_source=Astronomer%20website&utm_medium=website&utm_term=Airflow%20Summit)
today! \
🗣️ If you have an Airflow story to share, [join as a
speaker](https://sessionize.com/airflow-summit-2022/) \
diff --git a/landing-pages/site/content/en/community/_index.html
b/landing-pages/site/content/en/community/_index.html
index 595a53c2b9..9d2bf59e64 100644
--- a/landing-pages/site/content/en/community/_index.html
+++ b/landing-pages/site/content/en/community/_index.html
@@ -8,7 +8,7 @@ menu:
<div class="community--grid">
<div class="community--dev">
<div class="community--accordion-container">
- <h6 class="community--header-persona">Want to contribute?</h6>
+ <h3 class="community--header-persona">Want to contribute?</h3>
{{< accordion title="Join the Dev list" description="The Dev list
is the preferred channel for announcements, proposals and votes."
logo_path="icons/join-devlist-icon.svg">}}
<p class="bodytext__medium--brownish-grey">
Manage your <b>subscription</b>:
@@ -69,7 +69,7 @@ menu:
</div>
<div class="community--user">
<div class="community--accordion-container">
- <h6 class="community--header-persona">Are you a user?</h6>
+ <h3 class="community--header-persona">Are you a user?</h3>
{{< accordion title="Join the community on Slack"
description="Connect with other users, get help, exchange best practices with
other users." logo_path="icons/ask-question-icon.svg">}}
<ol class="counter-blue mx-auto">
<p class="bodytext__medium--brownish-grey">
diff --git a/landing-pages/site/content/en/docs/_index.md
b/landing-pages/site/content/en/docs/_index.md
index 958b13c0e4..9ff8a17494 100644
--- a/landing-pages/site/content/en/docs/_index.md
+++ b/landing-pages/site/content/en/docs/_index.md
@@ -12,32 +12,32 @@ menu:
## [Apache Airflow®](/docs/apache-airflow/stable/index.html)
Apache Airflow Core, which includes webserver, scheduler, CLI and other
components that are needed for minimal Airflow installation.
-[Read the documentation >>](/docs/apache-airflow/stable/index.html)
+[Read Apache Airflow documentation >>](/docs/apache-airflow/stable/index.html)
## [Apache Airflow CTL
(airflowctl)](/docs/apache-airflow-ctl/stable/index.html)
Apache Airflow CTL (airflowctl) is a command-line interface (CLI) for Apache
Airflow that interacts exclusively with the Airflow REST API. It provides a
secure, auditable, and consistent way to manage Airflow deployments — without
direct access to the metadata database.
-[Read the documentation >>](/docs/apache-airflow-ctl/stable/index.html)
+[Read airflowctl documentation >>](/docs/apache-airflow-ctl/stable/index.html)
## [Task SDK](/docs/task-sdk/stable/index.html)
The Task SDK provides python-native interfaces for defining DAGs,
executing tasks in isolated subprocesses and interacting with Airflow resources
(e.g., Connections, Variables, XComs, Metrics, Logs, and OpenLineage events)
at runtime. The goal of task-sdk is to decouple DAG authoring from Airflow
internals (Scheduler, API Server, etc.), providing a forward-compatible, stable
interface for writing and maintaining DAGs across Airflow versions.
-[Read the documentation >>](/docs/task-sdk/stable/index.html)
+[Read Task SDK documentation >>](/docs/task-sdk/stable/index.html)
## [Docker stack](/docs/docker-stack/index.html)
Airflow has an official Dockerfile and Docker image published in DockerHub as
a convenience package for
installation. You can extend and customize the image according to your
requirements and use it in
your own deployments.
-[Read the documentation >>](/docs/docker-stack/index.html)
+[Read Docker stack documentation >>](/docs/docker-stack/index.html)
## [Helm Chart](/docs/helm-chart/stable/index.html)
Airflow has an official Helm Chart that will help you set up your own Airflow
on a cloud/on-prem Kubernetes environment and leverage its scalable nature to
support a large group of users. Thanks to Kubernetes, we are not tied to a
specific cloud provider.
-[Read the documentation >>](/docs/helm-chart/stable/index.html)
+[Read Helm Chart documentation >>](/docs/helm-chart/stable/index.html)
## [Python API Client](https://github.com/apache/airflow-client-python)
@@ -47,7 +47,7 @@ Airflow releases official Python API client that can be used
to easily interact
## [Providers packages](/docs/apache-airflow-providers/index.html)
Providers packages include integrations with third party projects. They are
versioned and released independently of the Apache Airflow core.
-[Read the documentation >>](/docs/apache-airflow-providers/index.html)
+[Read Providers documentation >>](/docs/apache-airflow-providers/index.html)
### Active providers
diff --git a/landing-pages/site/layouts/blog/baseof.html
b/landing-pages/site/layouts/blog/baseof.html
index 88e5f763b5..eefd3832fc 100644
--- a/landing-pages/site/layouts/blog/baseof.html
+++ b/landing-pages/site/layouts/blog/baseof.html
@@ -23,12 +23,13 @@
{{ partial "head.html" . }}
</head>
<body class="td-{{ .Kind }}">
+<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
{{ partial "navbar.html" . }}
</header>
<div class="container-fluid td-default">
<div class="base-layout">
- <main role="main" class="td-main container">
+ <main id="main-content" role="main" class="td-main container">
{{ block "main" . }}{{ end }}
</main>
<div class="base-layout--button">
diff --git a/landing-pages/site/layouts/blog/content.html
b/landing-pages/site/layouts/blog/content.html
index 7aa1fee0dd..77aee14429 100644
--- a/landing-pages/site/layouts/blog/content.html
+++ b/landing-pages/site/layouts/blog/content.html
@@ -26,20 +26,21 @@
{{ end }}
{{ end }}
</div>
- <span class="bodytext__medium--brownish-grey">{{ .Date.Format "Mon,
Jan 2, 2006" }}</span>
+ <span class="blogpost-content__metadata--date">{{ .Date.Format "Mon,
Jan 2, 2006" }}</span>
</div>
- <p class="blogpost-content__metadata--title">{{ .Title }}</p>
+ <h1 class="blogpost-content__metadata--title">{{ .Title }}</h1>
<div class="blogpost-content__metadata--author">
{{ if .Params.authors }}
{{ range .Params.authors }}
+ {{ $authorName := .name }}
<span class="blogpost-content__metadata--author-name">{{ .name
}}</span>
{{ with .github }}
- <a href="https://github.com/{{ . }}/"
class="blogpost-content__metadata--social-media-icon">
+ <a href="https://github.com/{{ . }}/"
class="blogpost-content__metadata--social-media-icon" aria-label="GitHub
profile of {{ $authorName }}">
{{ with resources.Get "icons/github-small.svg" }}{{ .Content |
safeHTML }}{{ end }}
</a>
{{ end }}
{{ with .linkedin }}
- <a href="https://linkedin.com/in/{{ . }}/"
class="blogpost-content__metadata--social-media-icon">
+ <a href="https://linkedin.com/in/{{ . }}/"
class="blogpost-content__metadata--social-media-icon" aria-label="LinkedIn
profile of {{ $authorName }}">
{{ with resources.Get "icons/linkedin-small.svg" }}{{ .Content
| safeHTML }}{{ end }}
</a>
{{ end }}
@@ -48,12 +49,12 @@
{{ else if .Params.author }}
<span class="blogpost-content__metadata--author-name">{{
.Params.author }}</span>
{{ with .Params.github }}
- <a href="https://github.com/{{ . }}/"
class="blogpost-content__metadata--social-media-icon">
+ <a href="https://github.com/{{ . }}/"
class="blogpost-content__metadata--social-media-icon" aria-label="GitHub
profile of {{ $.Params.author }}">
{{ with resources.Get "icons/github-small.svg" }}{{ .Content |
safeHTML }}{{ end }}
</a>
{{ end }}
{{ with .Params.linkedin }}
- <a href="https://linkedin.com/in/{{ . }}/"
class="blogpost-content__metadata--social-media-icon">
+ <a href="https://linkedin.com/in/{{ . }}/"
class="blogpost-content__metadata--social-media-icon" aria-label="LinkedIn
profile of {{ $.Params.author }}">
{{ with resources.Get "icons/linkedin-small.svg" }}{{ .Content |
safeHTML }}{{ end }}
</a>
{{ end }}
diff --git a/landing-pages/site/layouts/blog/list.html
b/landing-pages/site/layouts/blog/list.html
index e01ab31f8c..b40d9e4fba 100644
--- a/landing-pages/site/layouts/blog/list.html
+++ b/landing-pages/site/layouts/blog/list.html
@@ -19,10 +19,11 @@
{{ define "main" }}
<div class="no-width-restriction">
- <h2 class="page-header">Blog</h2>
+ <h1 class="page-header">Blog</h1>
<form class="search-form" method="get" action="/blog">
+ <label for="search" class="visually-hidden">Search blog
posts</label>
<input class="search-form__input" placeholder="Search" name="q"
type="search" id="search" size="16">
- <button class="search-form__button" type="submit">
+ <button class="search-form__button" type="submit"
aria-label="Search blog posts">
{{ with resources.Get "icons/search-icon.svg" }}
{{ .Content | safeHTML }}
{{ end }}
diff --git a/landing-pages/site/layouts/community/baseof.html
b/landing-pages/site/layouts/community/baseof.html
index 9fd7e75ed1..c001b3d041 100644
--- a/landing-pages/site/layouts/community/baseof.html
+++ b/landing-pages/site/layouts/community/baseof.html
@@ -23,12 +23,13 @@
{{ partial "head.html" . }}
</head>
<body class="td-{{ .Kind }}">
+<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
{{ partial "navbar.html" . }}
</header>
<div class="container-fluid td-default">
<div class="base-layout community">
- <main role="main" class="td-main container">
+ <main id="main-content" role="main" class="td-main container">
{{ block "main" . }}{{ end }}
</main>
<div class="base-layout--button">
diff --git a/landing-pages/site/layouts/community/list.html
b/landing-pages/site/layouts/community/list.html
index b93a6f3e20..30c561eafb 100644
--- a/landing-pages/site/layouts/community/list.html
+++ b/landing-pages/site/layouts/community/list.html
@@ -23,14 +23,14 @@
<div class="d-flex">
<main class="col-12 col-md-9 col-xl-8" role="main">
<div class="community--header-container">
- <h2 class="page-header">Community</h2>
- <h5 class="page-subtitle">
+ <h1 class="page-header">Community</h1>
+ <p class="page-subtitle">
The Apache Airflow® community has tens of
thousands of active members who help each other
develop the platform, solve problems, and share
best practices. There are many ways to get
involved.
- </h5>
+ </p>
<div class="section" id="join-the-community">
- <h5 class="community--header-join">Join the
community!</h5>
+ <h2 class="community--header-join">Join the
community!</h2>
{{ with .Content }}
<div class="no-width-restriction">
{{ . }}
@@ -39,12 +39,12 @@
</div>
</div>
<div class="section" id="community-resources">
- <h5 class="community--resources-header">Resources</h5>
+ <h2 class="community--resources-header">Resources</h2>
{{ with .GetPage "resources" }}{{ .Content }}
{{ end }}
</div>
<div class="section" id="project-management-committee">
- <h5 class="community--committers-header
large-margin">Project Management Committee</h5>
+ <h2 class="community--committers-header
large-margin">Project Management Committee</h2>
<div id="pmc-container" class="list-items">
{{ range .Site.Data.pmc }}
<div class="list-item">
@@ -57,7 +57,7 @@
</div>
</div>
<div class="section" id="committers">
- <h5
class="community--committers-header">Committers</h5>
+ <h2
class="community--committers-header">Committers</h2>
<div id="committers-container" class="list-items">
{{ range .Site.Data.committers }}
<div class="list-item">
@@ -88,13 +88,13 @@
<div class="no-desktop">
<div class="community--header-container">
- <h2 class="page-header">Community</h2>
- <h5 class="page-subtitle">
+ <h1 class="page-header">Community</h1>
+ <p class="page-subtitle">
The Apache Airflow® community has tens of thousands of
active members who help each other develop the
platform, solve problems, and share best practices. There are
many ways to get involved.
- </h5>
+ </p>
<div class="section" id="join-the-community">
- <h5 class="community--header-join">Join the community!</h5>
+ <h2 class="community--header-join">Join the community!</h2>
{{ with .Content }}
<div class="no-width-restriction">
{{ . }}
@@ -103,12 +103,12 @@
</div>
</div>
<div class="section">
- <h5 class="community--resources-header">Resources</h5>
+ <h2 class="community--resources-header">Resources</h2>
{{ with .GetPage "resources" }}{{ .Content }}
{{ end }}
</div>
<div class="section">
- <h5 class="community--committers-header large-margin">Project
Management Committee</h5>
+ <h2 class="community--committers-header large-margin">Project
Management Committee</h2>
<div id="pmc-container-no-desktop" class="list-items">
{{ range .Site.Data.pmc }}
<div class="list-item">
@@ -121,7 +121,7 @@
</div>
</div>
<div class="section">
- <h5 class="community--committers-header">Committers</h5>
+ <h2 class="community--committers-header">Committers</h2>
<div id="committers-container-no-desktop" class="list-items">
{{ range .Site.Data.committers }}
<div class="list-item">
diff --git a/landing-pages/site/layouts/docs/baseof.html
b/landing-pages/site/layouts/docs/baseof.html
index 6ddd5556de..6834b97aa6 100644
--- a/landing-pages/site/layouts/docs/baseof.html
+++ b/landing-pages/site/layouts/docs/baseof.html
@@ -23,12 +23,13 @@
{{ partial "head.html" . }}
</head>
<body class="td-{{ .Kind }}">
+<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
{{ partial "navbar.html" . }}
</header>
<div class="roadmap container-fluid td-default base-layout">
<div class="d-flex">
- <main class="col-12 col-md-9 col-xl-8 mx-auto" role="main">
+ <main id="main-content" class="col-12 col-md-9 col-xl-8 mx-auto"
role="main">
{{ block "main" . }}{{ end }}
</main>
</div>
diff --git a/landing-pages/site/layouts/meetups/baseof.html
b/landing-pages/site/layouts/meetups/baseof.html
index 88e5f763b5..eefd3832fc 100644
--- a/landing-pages/site/layouts/meetups/baseof.html
+++ b/landing-pages/site/layouts/meetups/baseof.html
@@ -23,12 +23,13 @@
{{ partial "head.html" . }}
</head>
<body class="td-{{ .Kind }}">
+<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
{{ partial "navbar.html" . }}
</header>
<div class="container-fluid td-default">
<div class="base-layout">
- <main role="main" class="td-main container">
+ <main id="main-content" role="main" class="td-main container">
{{ block "main" . }}{{ end }}
</main>
<div class="base-layout--button">
diff --git a/landing-pages/site/layouts/meetups/list.html
b/landing-pages/site/layouts/meetups/list.html
index ca0efe7cf0..81f88c5332 100644
--- a/landing-pages/site/layouts/meetups/list.html
+++ b/landing-pages/site/layouts/meetups/list.html
@@ -18,10 +18,10 @@ under the License.
*/}}
{{ define "main" }}
- <h2 class="page-header">Meetups</h2>
- <h5 class="meetups-page page-subtitle">
+ <h1 class="page-header">Meetups</h1>
+ <p class="meetups-page page-subtitle">
Meetups are a great way for the community to meet face-to-face
- </h5>
+ </p>
<div class="meetups">
<script type="application/x-template" id="meetup-template">
<div class="list-item">
@@ -34,16 +34,15 @@ under the License.
{{ end }}
<span data-name="members-count"></span>
</p>
- <a href="">
- <button class="btn-hollow btn-blue
bodytext__medium--cerulean-blue">Learn more</button>
- </a>
+ <a href="" class="btn-hollow btn-blue
bodytext__medium--cerulean-blue">Learn more</a>
</div>
</div>
</div>
</script>
<div class="search-form">
+ <label for="search" class="visually-hidden">Search meetups by
country or city</label>
<input class="search-form__input" placeholder="Country or city"
type="search" id="search" size="16">
- <button class="search-form__button">
+ <button class="search-form__button" type="button"
aria-label="Search meetups">
{{ with resources.Get "icons/search-icon.svg" }}
{{ .Content | safeHTML }}
{{ end }}
@@ -64,7 +63,7 @@ under the License.
{{ partial "video-section" . }}
</div>
<div>
- <h4 class="page-header host-header">Want to host a meetup?</h4>
+ <h2 class="page-header host-header">Want to host a meetup?</h2>
<div>
Meetups related to the Apache Airflow project are held across the
globe, thanks to community volunteers. Interested individuals are encouraged to
host community meetups using the name Apache Airflow Meetup <geographical
location> in compliance with Apache Software Foundation's branding and
trademarks guidelines. No explicit PMC approval is required but also, PMC does
not endorse the organizers or communities that organize it.
<p/><p/>
diff --git a/landing-pages/site/layouts/partials/boxes/blogpost.html
b/landing-pages/site/layouts/partials/boxes/blogpost.html
index 2881ee8c40..46026fac80 100644
--- a/landing-pages/site/layouts/partials/boxes/blogpost.html
+++ b/landing-pages/site/layouts/partials/boxes/blogpost.html
@@ -53,9 +53,7 @@
{{ end }}
<p class="box-event__blogpost--description">{{ .Params.description
}}</p>
<div class="mt-auto">
- <a href="{{ .RelPermalink }}">
- {{ partial "buttons/button-hollow" (dict "text" "Read more") }}
- </a>
+ <a href="{{ .RelPermalink }}" class="btn-hollow btn-blue
bodytext__medium--cerulean-blue">Read more</a>
</div>
</div>
</div>
diff --git a/landing-pages/site/layouts/partials/boxes/committer.html
b/landing-pages/site/layouts/partials/boxes/committer.html
index 6d15e6aade..0da75b6818 100644
--- a/landing-pages/site/layouts/partials/boxes/committer.html
+++ b/landing-pages/site/layouts/partials/boxes/committer.html
@@ -23,11 +23,12 @@
<img src="{{ $image }}" alt="Committer {{ .name }}" class="avatar"/>
<p class="box-event__committer--nick">@{{ .nick }}</p>
<p class="bodytext__medium--brownish-grey">{{ .name }}</p>
+ {{ $name := .name }}
<div class="box-event__committer--social-media-container">
{{ if .github }}
{{ $url := .github }}
{{ with resources.Get "icons/github.svg" }}
- <a href="{{ $url }}"
class="box-event__committer--social-media-icon">
+ <a href="{{ $url }}"
class="box-event__committer--social-media-icon" aria-label="{{ $name }} on
GitHub">
{{ .Content | safeHTML }}
</a>
{{ end }}
@@ -35,7 +36,7 @@
{{ if .linkedin }}
{{ $url := .linkedin }}
{{ with resources.Get "icons/linkedin.svg" }}
- <a href="{{ $url }}"
class="box-event__committer--social-media-icon">
+ <a href="{{ $url }}"
class="box-event__committer--social-media-icon" aria-label="{{ $name }} on
LinkedIn">
{{ .Content | safeHTML }}
</a>
{{ end }}
diff --git a/landing-pages/site/layouts/partials/boxes/event.html
b/landing-pages/site/layouts/partials/boxes/event.html
index b908a7be85..1147e96cef 100644
--- a/landing-pages/site/layouts/partials/boxes/event.html
+++ b/landing-pages/site/layouts/partials/boxes/event.html
@@ -28,8 +28,6 @@
{{ end }}
<span>{{ .members }} members</span>
</p>
- <a href="{{ .url }}">
- {{ partial "buttons/button-hollow" (dict "text" "Learn more") }}
- </a>
+ <a href="{{ .url }}" class="btn-hollow btn-blue
bodytext__medium--cerulean-blue">Learn more</a>
</div>
</div>
diff --git a/landing-pages/site/layouts/partials/boxes/testimonial.html
b/landing-pages/site/layouts/partials/boxes/testimonial.html
index 48e81248da..18c89d5237 100644
--- a/landing-pages/site/layouts/partials/boxes/testimonial.html
+++ b/landing-pages/site/layouts/partials/boxes/testimonial.html
@@ -33,6 +33,6 @@
</div>
<p class="box-event__use-cases--testimonial--quote"
>{{ .quote.text | truncate 120 }}</p>
- {{ partial "buttons/button-hollow" (dict "text" "Learn more")}}
+ <span class="btn-hollow btn-blue bodytext__medium--cerulean-blue
use-case-link-cta">Learn more</span>
</div>
</div>
diff --git a/landing-pages/site/layouts/partials/boxes/use-cases.html
b/landing-pages/site/layouts/partials/boxes/use-cases.html
index 1233c3c6c5..cce0408a2d 100644
--- a/landing-pages/site/layouts/partials/boxes/use-cases.html
+++ b/landing-pages/site/layouts/partials/boxes/use-cases.html
@@ -27,6 +27,6 @@ under the License.
</div>
<p class="box-event__use-cases--usecasedescription"
>{{ .usecasedescription.text | truncate 120 }}</p>
- {{ partial "buttons/button-hollow" (dict "text" "Learn more")}}
+ <span class="btn-hollow btn-blue bodytext__medium--cerulean-blue
use-case-link-cta">Learn more</span>
</div>
</div>
diff --git a/landing-pages/site/layouts/shortcodes/accordion.html
b/landing-pages/site/layouts/shortcodes/accordion.html
index a916f55bc5..8edc64a5e1 100644
--- a/landing-pages/site/layouts/shortcodes/accordion.html
+++ b/landing-pages/site/layouts/shortcodes/accordion.html
@@ -20,7 +20,7 @@
{{ $icon := .Get "logo_path" }}
<details class="accordion" {{if .Get "open" }}open{{ end }}>
<summary>
- <h4 class="accordion__summary-content--header {{ if $icon }}
subtitle__large--greyish-brown {{ else }} subtitle__large--cerulean-blue {{ end
}}">{{ .Get "title" }}</h4>
+ <h3 class="accordion__summary-content--header {{ if $icon }}
subtitle__large--greyish-brown {{ else }} subtitle__large--cerulean-blue {{ end
}}">{{ .Get "title" }}</h3>
<div class="accordion__arrow">
{{ with resources.Get "icons/accordion-arrow.svg" }}{{ ( . |
minify).Content | safeHTML }}{{ end }}
</div>
diff --git a/landing-pages/site/layouts/taxonomy/baseof.html
b/landing-pages/site/layouts/taxonomy/baseof.html
index 88e5f763b5..eefd3832fc 100644
--- a/landing-pages/site/layouts/taxonomy/baseof.html
+++ b/landing-pages/site/layouts/taxonomy/baseof.html
@@ -23,12 +23,13 @@
{{ partial "head.html" . }}
</head>
<body class="td-{{ .Kind }}">
+<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
{{ partial "navbar.html" . }}
</header>
<div class="container-fluid td-default">
<div class="base-layout">
- <main role="main" class="td-main container">
+ <main id="main-content" role="main" class="td-main container">
{{ block "main" . }}{{ end }}
</main>
<div class="base-layout--button">
diff --git a/landing-pages/site/layouts/taxonomy/tag.html
b/landing-pages/site/layouts/taxonomy/tag.html
index 6a91d4f5f8..408c057014 100644
--- a/landing-pages/site/layouts/taxonomy/tag.html
+++ b/landing-pages/site/layouts/taxonomy/tag.html
@@ -20,10 +20,11 @@
{{ define "main" }}
{{ $pageUrl := .Permalink }}
<div class="no-width-restriction">
- <h2 class="page-header">Blog</h2>
+ <h1 class="page-header">Blog</h1>
<form class="search-form" method="get" action="/blog">
+ <label for="search" class="visually-hidden">Search blog
posts</label>
<input class="search-form__input" placeholder="Search" name="q"
type="search" id="search" size="16">
- <button class="search-form__button" type="submit">
+ <button class="search-form__button" type="submit"
aria-label="Search blog posts">
{{ with resources.Get "icons/search-icon.svg" }}
{{ .Content | safeHTML }}
{{ end }}
diff --git a/landing-pages/site/layouts/use-cases/baseof.html
b/landing-pages/site/layouts/use-cases/baseof.html
index 88e5f763b5..eefd3832fc 100644
--- a/landing-pages/site/layouts/use-cases/baseof.html
+++ b/landing-pages/site/layouts/use-cases/baseof.html
@@ -23,12 +23,13 @@
{{ partial "head.html" . }}
</head>
<body class="td-{{ .Kind }}">
+<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
{{ partial "navbar.html" . }}
</header>
<div class="container-fluid td-default">
<div class="base-layout">
- <main role="main" class="td-main container">
+ <main id="main-content" role="main" class="td-main container">
{{ block "main" . }}{{ end }}
</main>
<div class="base-layout--button">
diff --git a/landing-pages/site/layouts/use-cases/list.html
b/landing-pages/site/layouts/use-cases/list.html
index 1669f8ea6a..c091889333 100644
--- a/landing-pages/site/layouts/use-cases/list.html
+++ b/landing-pages/site/layouts/use-cases/list.html
@@ -19,10 +19,10 @@
{{ define "main" }}
<div>
- <h2 class="page-header">Use Cases</h2>
- <h5 class="page-subtitle">
+ <h1 class="page-header">Use Cases</h1>
+ <p class="page-subtitle">
Apache Airflow® can orchestrate most anything!
- </h5>
+ </p>
<div style="display: flex; justify-content: center; align-items:
center;">
<p>
Apache Airflow® allows you to define almost any workflow in
Python code,
@@ -45,9 +45,9 @@
</br>
</br>
<h2 class="page-header">Testimonials</h2>
- <h5 class="page-subtitle">
+ <p class="page-subtitle">
Apache Airflow® helps businesses around the world reach their
goals.
- </h5>
+ </p>
<div id="testimonials-container" class="case-studies-container"
class="list-items">
{{ range where .Pages ".Params.blocktype" "=" "testimonial" }}
<a href="{{ .RelPermalink }}" class="list-item">
