Skip to content

Commit 5ea40af

Browse files
n-larkn-lark
authored
[4959] Accessibility: Page & component fixes (#5029)
1 parent 45a4ca5 commit 5ea40af

13 files changed

Lines changed: 86 additions & 70 deletions

File tree

‎src/_includes/components/tier-badges.njk‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,23 @@
33
{% if showTierCloud or showTierSelfHosted %}
44
<div class="ff-tier-badges">
55
{% if showTierCloud %}
6-
<div class="ff-tier-badge ff-tier--available" onclick="capture('tier-badge-click',{hosting:'cloud',tier:'{{ tierCloud }}',page:location.pathname})">
6+
<div class="ff-tier-badge ff-tier--available"
7+
role="button"
8+
tabindex="0"
9+
aria-label="Cloud tier: {{ tierCloud }}"
10+
onclick="capture('tier-badge-click',{hosting:'cloud',tier:'{{ tierCloud }}',page:location.pathname})"
11+
onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click()}">
712
<span class="ff-tier-badge__label">Cloud</span>
813
<span class="ff-tier-badge__value">{{ tierCloud }}</span>
914
</div>
1015
{% endif %}
1116
{% if showTierSelfHosted %}
12-
<div class="ff-tier-badge ff-tier--available" onclick="capture('tier-badge-click',{hosting:'self-hosted',tier:'{{ tierSelfHosted }}',page:location.pathname})">
17+
<div class="ff-tier-badge ff-tier--available"
18+
role="button"
19+
tabindex="0"
20+
aria-label="Self-Hosted tier: {{ tierSelfHosted }}"
21+
onclick="capture('tier-badge-click',{hosting:'self-hosted',tier:'{{ tierSelfHosted }}',page:location.pathname})"
22+
onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click()}">
1323
<span class="ff-tier-badge__label">Self-Hosted</span>
1424
<span class="ff-tier-badge__value">{{ tierSelfHosted }}</span>
1525
</div>

‎src/_includes/contact-us-cta-line.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<div class="bg-indigo-50 py-1 px-4 rounded-md w-full mx-auto text-center mt-12">
2-
<p>Looking for help with your project? <a href="/contact-us/">Contact us</a>; our experts will be happy to provide a solution for your needs.  </p>
2+
<p>Looking for help with your project? <a href="/contact-us/" class="underline">Contact us</a>; our experts will be happy to provide a solution for your needs.  </p>
33
</div>

‎src/_includes/explore-more-content.njk‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@
1010
{% image "./images/home/blog.png", "Image of hands typing on laptop working on Node-RED flows", [448] %}
1111
</div>
1212
</a>
13-
<h4 class="text-xl font-bold pb-3">Latest on the blog</h4>
13+
<h3 class="text-xl font-bold pb-3">Latest on the blog</h3>
1414
{%- for item in collections[collectionName or 'posts'] | sort(attribute='item.date') | reverse | limit(3) -%}
1515
<a href="{{ item.url }}"
1616
class="w-full flex flex-col group {% if not loop.last %}border-b{% endif %}">
17-
<h5 class="my-2 font-light">
17+
<h4 class="my-2 font-light text-lg">
1818
<span class="text-gray-500 group-hover:text-blue-700">
1919
{{ item.data.title }}
2020
</span>
21-
</h5>
21+
</h4>
2222
</a>
2323
{%- endfor -%}
2424
</div>
@@ -35,9 +35,9 @@
3535
{% image "./images/home/webinar.png", "Image of hands typing on laptop working on Node-RED flows", [448] %}
3636
</div>
3737
</a>
38-
<h4 class="text-xl font-bold pb-3">{% if item.date | isFutureDate %}Upcoming{% else %}Latest{% endif %} Webinar</h4>
38+
<h3 class="text-xl font-bold pb-3">{% if item.date | isFutureDate %}Upcoming{% else %}Latest{% endif %} Webinar</h3>
3939
<div class="w-full flex flex-col">
40-
<h5 class="my-2 font-light"><span class="text-gray-500">{{ item.data.title }}</span></h5>
40+
<h4 class="my-2 font-light text-lg"><span class="text-gray-500">{{ item.data.title }}</span></h4>
4141
</div>
4242
<div class="webinar-title w-full border-t pt-3 font-light text-gray-500">
4343
<time value="{{ item.date }}">{{ item.date | shortDate }}</time>
@@ -56,8 +56,8 @@
5656
<div class="sm:max-h-none md:min-w-[40%] max-w-[448px] ff-image-cover ff-image-rounded mx-auto mb-4 aspect-video">
5757
{% image "./images/home/newsletter.png", "Image of hands typing on laptop working on Node-RED flows", [448] %}
5858
</div>
59-
<h4 class="text-xl font-bold pb-3">Newsletter</h4>
60-
<h5 class="font-bold pb-3 pt-2">Sign up for our monthly email updates</h5>
59+
<h3 class="text-xl font-bold pb-3">Newsletter</h3>
60+
<h4 class="font-bold pb-3 pt-2 text-lg">Sign up for our monthly email updates</h4>
6161
</div>
6262
<div class="-mb-1 self-end w-full">
6363
{% include hubspot.script %}

‎src/_includes/faq.njk‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,19 @@
1010
<div class="prose max-w-none">
1111
{% for faq in meta.faq %}
1212
<div class="w-full {% if not loop.last %}border-b{% endif %} py-4">
13-
<h5 class="question flex flex-row justify-between items-center w-full m-0 gap-6 cursor-pointer"
14-
id="question-{{ loop.index }}">
15-
<span>{{ faq.question }}</span>
16-
<div class="chevron transition-transform ease-in-out duration-300"
17-
id="chevron-{{ loop.index }}">
18-
{% include "components/icons/chevron-down.svg" %}
19-
</div>
20-
</h5>
13+
<h3 class="m-0">
14+
<button class="question flex flex-row justify-between items-center w-full m-0 p-0 gap-6 cursor-pointer text-left bg-transparent border-0 text-lg font-semibold"
15+
id="question-{{ loop.index }}"
16+
type="button"
17+
aria-expanded="false"
18+
aria-controls="answer-{{ loop.index }}">
19+
<span>{{ faq.question }}</span>
20+
<div class="chevron transition-transform ease-in-out duration-300"
21+
id="chevron-{{ loop.index }}">
22+
{% include "components/icons/chevron-down.svg" %}
23+
</div>
24+
</button>
25+
</h3>
2126
<div class="answer px-6 mt-6 hidden" id="answer-{{ loop.index }}">
2227
<p>{{ faq.answer | safe }}</p>
2328
</div>
@@ -33,14 +38,15 @@
3338
question.addEventListener('click', () => {
3439
const answer = document.querySelector(`#answer-${index + 1}`);
3540
const chevron = document.querySelector(`#chevron-${index + 1}`);
36-
if (answer.classList.contains('hidden')) {
37-
// Show the clicked answer and rotate its chevron
41+
const isHidden = answer.classList.contains('hidden');
42+
if (isHidden) {
3843
answer.classList.remove('hidden');
3944
chevron.style.transform = 'rotate(180deg)';
45+
question.setAttribute('aria-expanded', 'true');
4046
} else {
41-
// Hide the clicked answer and rotate its chevron to original state
4247
answer.classList.add('hidden');
4348
chevron.style.transform = 'rotate(0deg)';
49+
question.setAttribute('aria-expanded', 'false');
4450
}
4551
});
4652
});

‎src/_includes/get-started.njk‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<div class="m-auto w-full text-center sm:text-left mb-2">
22
<h2 class="font-bold"><span class="text-red-600">Get Started</span> with FlowFuse</h2>
3-
<p class="-mt-1">Explore our <a href="/pricing/">pricing</a></p>
3+
<p class="-mt-1">Explore our <a href="/pricing/" class="underline">pricing</a></p>
44
</div>
55
<div class="w-full sm:grid sm:grid-cols-2 gap-6 sm:gap-8">
66
<div class="w-full mt-4 md:mt-0 flex flex-col justify-between">
77
<div>
88
<div class="flex justify-center sm:justify-start mt-3 mb-2 max-sm:mx-auto md:mx-0 w-6 h-6">
99
{% include "components/icons/cloud.svg" %}
1010
</div>
11-
<h4 class="flex justify-center sm:justify-start font-semibold">FlowFuse Cloud</h4>
11+
<h3 class="flex justify-center sm:justify-start font-semibold text-xl">FlowFuse Cloud</h3>
1212
<p class="font-light mt-6">Our managed hosted solution, maintained and supported by the FlowFuse team. Experience flexibility, scalability, and expert assistance to drive your business forward.</p>
1313
</div>
1414
<a class="mt-4 ff-btn ff-btn--highlight uppercase inline-block self-center sm:self-start"
@@ -20,7 +20,7 @@
2020
<div class="flex justify-center sm:justify-start mt-3 mb-2 max-sm:mx-auto md:mx-0 w-6 h-6">
2121
{% include "components/icons/building-office-2.svg" %}
2222
</div>
23-
<h4 class="flex justify-center sm:justify-start font-semibold">On Premise</h4>
23+
<h3 class="flex justify-center sm:justify-start font-semibold text-xl">On Premise</h3>
2424
<p class="font-light mt-6">Deploy FlowFuse on your hardware for enhanced flexibility. Opt for self-hosted deployment with FlowFuse, enabling on-premises installation and full control over your deployment process.</p>
2525
</div>
2626
<a class="mt-4 mb-6 sm:mb-0 ff-btn ff-btn--primary uppercase inline-block self-center sm:self-start"

‎src/_includes/layouts/integration.njk‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -69,20 +69,20 @@ layout: layouts/base.njk
6969
<div class="flex-grow min-w-0 overflow-hidden">
7070
{% if integration.ffCertified %}
7171
<div class="mb-8 p-6 bg-indigo-50 border-l-4 border-indigo-600 rounded-r-lg overflow-hidden">
72-
<h3 class="text-indigo-900 font-bold mb-2 flex items-center gap-2">
72+
<h2 class="text-indigo-900 font-bold mb-2 flex items-center gap-2 text-3xl">
7373
<svg class="certified-icon w-8 h-8 fill-indigo-900" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" /> </svg>
7474
FlowFuse Certified Node
75-
</h3>
75+
</h2>
7676
<p class="text-indigo-800 mb-0">This node has been certified by FlowFuse, ensuring it meets our standards for quality, security, and support. <a href="https://flowfuse.com/blog/2025/07/certified-nodes-v2/" class="font-semibold underline hover:text-indigo-900" target="_blank">Learn more about certified nodes</a>.</p>
7777
</div>
7878
{% else %}
7979
<div class="mb-8 p-6 bg-blue-50 border-l-4 border-blue-600 rounded-r-lg overflow-hidden">
80-
<h3 class="text-blue-900 font-bold mb-2 flex items-center gap-2">
80+
<h2 class="text-blue-900 font-bold mb-2 flex items-center gap-2 text-3xl">
8181
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
8282
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
8383
</svg>
8484
Get Your Node Certified
85-
</h3>
85+
</h2>
8686
<p class="text-blue-800 mb-3">Boost your node's credibility and reach by becoming FlowFuse Certified. Certification demonstrates quality, security, and reliability to the Node-RED community.</p>
8787
<div class="flex flex-col sm:flex-row gap-3">
8888
<a href="https://flowfuse.com/blog/2025/07/certified-nodes-v2/#contact-us-to-discuss-your-node-certification" class="inline-flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold transition-colors duration-200 text-sm hover:no-underline" target="_blank" rel="noopener noreferrer">
@@ -99,14 +99,14 @@ layout: layouts/base.njk
9999
<!-- Tab Navigation -->
100100
<div class="border-b border-gray-300 mb-6">
101101
<nav class="flex gap-8" aria-label="Tabs">
102-
<button
103-
class="tab-button py-3 px-1 border-b-2 border-indigo-600 font-medium text-indigo-600 focus:outline-none"
102+
<button
103+
class="tab-button py-3 px-1 border-b-2 border-indigo-600 font-medium text-indigo-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2"
104104
data-tab="overview"
105105
>
106106
Overview
107107
</button>
108-
<button
109-
class="tab-button py-3 px-1 border-b-2 border-transparent font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none"
108+
<button
109+
class="tab-button py-3 px-1 border-b-2 border-transparent font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2"
110110
data-tab="examples"
111111
>
112112
Examples ({{ integration.examples.length }})

‎src/_includes/testimonials.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
</div>
3030
<div class="flex flex-wrap flex-row gap-3 justify-center my-6">
3131
{%- for t in testimonials -%}
32-
<button class="testimonial-button align-baseline max-md:p-2">
32+
<button class="testimonial-button align-baseline max-md:p-2" aria-label="Show testimonial from {{ t.author }}, {{ t.company }}">
3333
<span></span>
3434
</button>
3535
{%- endfor -%}

‎src/_includes/values.njk‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
<div class="flex flex-wrap justify-center mt-12 md:mt-20">
22
<div class="company-value">
3-
{% image "./images/pictograms/results_blue.png", "Icon representing Results", [128] %}
4-
<h5>Results</h5>
3+
{% image "./images/pictograms/results_blue.png", "Icon representing Results", [128] %}
4+
<h3>Results</h3>
55
</div>
66
<div class="company-value">
7-
{% image "./images/pictograms/iteration_blue.png", "Icon representing Iterative Improvement", [128] %}
8-
<h5>Iterative Improvement</h5>
7+
{% image "./images/pictograms/iteration_blue.png", "Icon representing Iterative Improvement", [128] %}
8+
<h3>Iterative Improvement</h3>
99
</div>
1010
<div class="company-value">
1111
{% image "./images/pictograms/community_blue.png", "Icon representing Collaborative Community", [128] %}
12-
<h5>Collaborative Community</h5>
12+
<h3>Collaborative Community</h3>
1313
</div>
1414
<div class="company-value">
1515
{% image "./images/pictograms/candor_blue.png", "Icon representing Constructive Candor", [128] %}
16-
<h5>Constructive Candor</h5>
16+
<h3>Constructive Candor</h3>
1717
</div>
1818
<div class="company-value">
1919
{% image "./images/pictograms/trusting_blue.png", "Icon representing Customer Empathy", [128] %}
20-
<h5>Customer Empathy</h5>
20+
<h3>Customer Empathy</h3>
2121
</div>
22-
</div>
22+
</div>

0 commit comments

Comments
 (0)