[#45] Block heading level accessibility

templates/_blocks/_heading.twig

@@ -1,6 +1,16 @@
 {# @var \craft\elements\Entry|null block #}
 {% set block = block ?? null %}
 
-<div class="container">
-  <h2 class="text-4xl font-bold">{{ block.heading }}</h2>
-</div>
+{# @var bool hasPreviousBlocksWithH1 #}
+{% set hasPreviousBlocksWithH1 = hasPreviousBlocksWithH1 ?? false %}
+
+{% set element = hasPreviousBlocksWithH1 ? 'h2' : 'h1' %}
+
+{% tag element with {
+  class: cx('container font-bold', {
+    'text-4xl': not hasPreviousBlocksWithH1,
+    'text-3xl': hasPreviousBlocksWithH1,
+  }),
+} %}
+  {{ block.heading }}
+{% endtag %}

templates/_blocks/_pageHero.twig

@@ -1,8 +1,12 @@
 {# @var \craft\elements\Entry|null block #}
 {% set block = block ?? null %}
 
+{# @var bool hasPreviousBlocksWithH1 #}
+{% set hasPreviousBlocksWithH1 = hasPreviousBlocksWithH1 ?? false %}
+
 {{ include('_components/page-hero.twig', {
   image: block.image.eagerly().one(),
   title: block.title,
   description: block.richTextSimple,
+  headingLevel: hasPreviousBlocksWithH1 ? 2 : 1,
 }) }}

templates/_blocks/index.twig

@@ -10,6 +10,16 @@
     {% set nextBlock = blocks.get(loop.index0 + 1) %}
     {% set previousBlocks = blocks.take(loop.index0) %}
 
+    {#
+    Check if there are previous blocks that have a heading level of 1. This is used
+    to determine if the current block should use an h1 or h2 as its root heading level.
+    #}
+    {% set hasPreviousBlocksWithH1 = previousBlocks
+      |map(block => block.type.handle)
+      |intersect(['pageHero', 'heading'])
+      |length
+    %}
+
     {% set marginBottomConfig = {
       default: 'mb-64',
       'heading + richText': 'mb-32',
@@ -32,12 +42,13 @@
       |filter
       |first %}
 
+    {# Block wrapper #}
     <div class="{{ cx({
       (marginBottom): not loop.last
     }) }}">
-
       {{ include("_blocks/_#{block.type.handle}.twig", {
         block,
+        hasPreviousBlocksWithH1,
       }) }}
     </div>
     {% endfor %}

templates/_components/call-to-action.twig

@@ -16,7 +16,7 @@
 <div class="bg-neutral-200 py-48">
   <div class="container flex flex-col items-center gap-24">
     {% if title %}
-      <h2 class="text-xl">{{ title }}</h2>
+      <h2 class="text-xl font-semibold">{{ title }}</h2>
     {% endif %}
 
     {% if text %}

templates/_components/page-hero.twig

@@ -7,15 +7,24 @@
 {# @var \craft\elements\Asset|null image #}
 {% set image = image ?? null %}
 
+{# @var int headingLevel #}
+{% set headingLevel = headingLevel ?? 1 %}
+
+{% set element = "h#{headingLevel}" %}
+
 <div class="bg-neutral-100 py-48">
   <div class="container grid items-center gap-24 sm:grid-cols-2 sm:px-32 lg:gap-48 lg:grid-cols-5">
     <div class="flex flex-col gap-24 max-w-[640px] lg:col-span-3">
       {% if title %}
-        <h1 class="text-xl font-semibold">{{ title }}</h1>
+        {% tag element with {
+          class: 'text-4xl font-bold',
+        } %}
+          {{ title }}
+        {% endtag %}
       {% endif %}
 
       {% if description %}
-        <div>{{ description }}</div>
+        <div class="rich-text">{{ description }}</div>
       {% endif %}
     </div>