From 57ef5a884e99926f650958bd448dbc435fc040b8 Mon Sep 17 00:00:00 2001
From: Gabriel Manussakis <9420947+Manussakis@users.noreply.github.com>
Date: Tue, 3 Sep 2024 11:42:28 -0300
Subject: [PATCH] [Accessibility] Improve Checkout block page accessibility
 after removing heading level 1 (#50925)

* Add aria-label to checkout form landmark

* Remove aria-hidden from checkout form sub-titles

* Add aria-label to checkout form

* Add changelog file

* Remove aria-hidden from form-step snapshots

* Bump form-checkout template version
---
 .../inner-blocks/checkout-fields-block/frontend.tsx         | 2 ++
 .../packages/components/form-step/index.tsx                 | 1 -
 .../components/form-step/test/__snapshots__/index.js.snap   | 6 ------
 plugins/woocommerce/changelog/fix-48619                     | 4 ++++
 plugins/woocommerce/templates/checkout/form-checkout.php    | 4 ++--
 5 files changed, 8 insertions(+), 9 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/fix-48619

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/frontend.tsx
index 1773f81d618..052b98ca5ae 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/frontend.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/frontend.tsx
@@ -3,6 +3,7 @@
  */
 import type { ReactElement } from 'react';
 import clsx from 'clsx';
+import { __ } from '@wordpress/i18n';
 import { Main } from '@woocommerce/base-components/sidebar-layout';
 import { useStoreEvents } from '@woocommerce/base-context/hooks';
 import { useEffect } from '@wordpress/element';
@@ -27,6 +28,7 @@ const FrontendBlock = ( {
 	return (
 		<Main className={ clsx( 'wc-block-checkout__main', className ) }>
 			<form
+				aria-label={ __( 'Checkout', 'woocommerce' ) }
 				className={ clsx(
 					'wc-block-components-form wc-block-checkout__form',
 					{
diff --git a/plugins/woocommerce-blocks/packages/components/form-step/index.tsx b/plugins/woocommerce-blocks/packages/components/form-step/index.tsx
index a3292a0d3b3..4f5757155eb 100644
--- a/plugins/woocommerce-blocks/packages/components/form-step/index.tsx
+++ b/plugins/woocommerce-blocks/packages/components/form-step/index.tsx
@@ -17,7 +17,6 @@ interface StepHeadingProps {
 const StepHeading = ( { title, stepHeadingContent }: StepHeadingProps ) => (
 	<div className="wc-block-components-checkout-step__heading">
 		<Title
-			aria-hidden="true"
 			className="wc-block-components-checkout-step__title"
 			headingLevel="2"
 		>
diff --git a/plugins/woocommerce-blocks/packages/components/form-step/test/__snapshots__/index.js.snap b/plugins/woocommerce-blocks/packages/components/form-step/test/__snapshots__/index.js.snap
index 4471cd860f4..ee732529405 100644
--- a/plugins/woocommerce-blocks/packages/components/form-step/test/__snapshots__/index.js.snap
+++ b/plugins/woocommerce-blocks/packages/components/form-step/test/__snapshots__/index.js.snap
@@ -14,7 +14,6 @@ exports[`FormStep fieldset legend should default to legend prop when title and l
     className="wc-block-components-checkout-step__heading"
   >
     <h2
-      aria-hidden="true"
       className="wc-block-components-title wc-block-components-checkout-step__title"
     >
       Lorem Ipsum
@@ -64,7 +63,6 @@ exports[`FormStep should remove step number CSS class if prop is false 1`] = `
     className="wc-block-components-checkout-step__heading"
   >
     <h2
-      aria-hidden="true"
       className="wc-block-components-title wc-block-components-checkout-step__title"
     >
       Lorem Ipsum
@@ -135,7 +133,6 @@ exports[`FormStep should render a fieldset with heading if a title is provided 1
     className="wc-block-components-checkout-step__heading"
   >
     <h2
-      aria-hidden="true"
       className="wc-block-components-title wc-block-components-checkout-step__title"
     >
       Lorem Ipsum
@@ -167,7 +164,6 @@ exports[`FormStep should render step description 1`] = `
     className="wc-block-components-checkout-step__heading"
   >
     <h2
-      aria-hidden="true"
       className="wc-block-components-title wc-block-components-checkout-step__title"
     >
       Lorem Ipsum
@@ -204,7 +200,6 @@ exports[`FormStep should render step heading content 1`] = `
     className="wc-block-components-checkout-step__heading"
   >
     <h2
-      aria-hidden="true"
       className="wc-block-components-title wc-block-components-checkout-step__title"
     >
       Lorem Ipsum
@@ -243,7 +238,6 @@ exports[`FormStep should set disabled prop to the fieldset element when disabled
     className="wc-block-components-checkout-step__heading"
   >
     <h2
-      aria-hidden="true"
       className="wc-block-components-title wc-block-components-checkout-step__title"
     >
       Lorem Ipsum
diff --git a/plugins/woocommerce/changelog/fix-48619 b/plugins/woocommerce/changelog/fix-48619
new file mode 100644
index 00000000000..735392aa566
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-48619
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Improve checkout page accessibility after removing heading level 1.
diff --git a/plugins/woocommerce/templates/checkout/form-checkout.php b/plugins/woocommerce/templates/checkout/form-checkout.php
index 36f34bc0373..a60f7b82c57 100644
--- a/plugins/woocommerce/templates/checkout/form-checkout.php
+++ b/plugins/woocommerce/templates/checkout/form-checkout.php
@@ -12,7 +12,7 @@
  *
  * @see https://woocommerce.com/document/template-structure/
  * @package WooCommerce\Templates
- * @version 3.5.0
+ * @version 9.4.0
  */
 
 if ( ! defined( 'ABSPATH' ) ) {
@@ -29,7 +29,7 @@ if ( ! $checkout->is_registration_enabled() && $checkout->is_registration_requir
 
 ?>
 
-<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">
+<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data" aria-label="<?php echo esc_attr__( 'Checkout', 'woocommerce' ); ?>">
 
 	<?php if ( $checkout->get_checkout_fields() ) : ?>