escape fix

app/assets/js/feedback.js

@@ -18,6 +18,21 @@ servicesTab.addEventListener('click', function (event) {
   }
 });
 
+document.addEventListener('keydown', function (event) {
+  // Check if the Escape key is pressed
+  if (event.key === "Escape" || event.key === "Esc") {
+    // Prevent the default action to avoid any side effects
+    event.preventDefault();
+
+    // Check if the servicesPanel is currently displayed
+    if (servicesPanel.style.display === 'block') {
+      servicesPanel.style.display = 'none';
+      servicesPanel.setAttribute('aria-hidden', 'true');
+      servicesTab.setAttribute('aria-expanded', 'false');
+    }
+  }
+});
+
 closeNav.addEventListener('click', function (event) {
   event.preventDefault();
 

app/views/design-system/components/index.html

@@ -61,10 +61,10 @@ <h2 class="govuk-header-l">Published components</h2>
 
     <div class="dfe-card">
       <div class="dfe-card-container">
-        <h2 class="govuk-heading-m">
+        <h3 class="govuk-heading-m">
           <a href="/design-system/components/header"
             class="govuk-link govuk-link--no-visited-state dfe-card-link--header">Header</a>
-        </h2>
+        </h3>
         <p>Use the DfE header on internal services or those hosted on education.gov.uk</p>
       </div>
     </div>

app/views/design-system/patterns/index.html

@@ -60,10 +60,10 @@ <h2 class="govuk-header-l">Published patterns</h2>
 
     <div class="dfe-card">
       <div class="dfe-card-container">
-        <h2 class="govuk-heading-m">
+        <h3 class="govuk-heading-m">
           <a href="/design-system/patterns/select-a-school"
             class="govuk-link govuk-link--no-visited-state dfe-card-link--header">Select a school</a>
-        </h2>
+        </h3>
         <p>A pattern for selecting a school from the list of all schools in England.</p>
       </div>
     </div>

app/views/design-system/styles/index.html

@@ -61,20 +61,20 @@ <h1 class="govuk-heading-xl govuk-!-margin-top-6">{{pageName}}</h1>
 
       <div class="dfe-card">
         <div class="dfe-card-container">
-          <h2 class="govuk-heading-m">
+          <h3 class="govuk-heading-m">
             <a href="/design-system/styles/colour"
               class="govuk-link govuk-link--no-visited-state dfe-card-link--header">Colour</a>
-          </h2>
+          </h3>
           <p>Colour palette for Department for Education services.</p>
         </div>
       </div>
 
       <div class="dfe-card">
         <div class="dfe-card-container">
-          <h2 class="govuk-heading-m">
+          <h3 class="govuk-heading-m">
             <a href="/design-system/styles/typography"
               class="govuk-link govuk-link--no-visited-state dfe-card-link--header">Typography</a>
-          </h2>
+          </h3>
           <p>Font family and styles for Department for Education services.</p>
         </div>
       </div>