[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

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',
 					{

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"
 		>

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

plugins/woocommerce/changelog/fix-48619

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Improve checkout page accessibility after removing heading level 1.

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() ) : ?>