[Accessibility] Improve Checkout block page accessibility after removing heading level 1 (#50925)

Manussakis · web-flow · commit 57ef5a884e99 · 2024-09-03T15:42:28.000+01:00
* 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
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 @@
 
 ?>
 
-<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() ) : ?>
 

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,6 @@ interface StepHeadingProps {`
`17`	`17`	`const StepHeading = ( { title, stepHeadingContent }: StepHeadingProps ) => (`
`18`	`18`	`<div className="wc-block-components-checkout-step__heading">`
`19`	`19`	`<Title`
`20`		`- aria-hidden="true"`
`21`	`20`	`className="wc-block-components-checkout-step__title"`
`22`	`21`	`headingLevel="2"`
`23`	`22`	`>`
Original file line number	Diff line number	Diff line change
@@ -14,7 +14,6 @@ exports[`FormStep fieldset legend should default to legend prop when title and l
`14`	`14`	`className="wc-block-components-checkout-step__heading"`
`15`	`15`	`>`
`16`	`16`	`<h2`
`17`		`- aria-hidden="true"`
`18`	`17`	`className="wc-block-components-title wc-block-components-checkout-step__title"`
`19`	`18`	`>`
`20`	`19`	`Lorem Ipsum`
@@ -64,7 +63,6 @@ exports[`FormStep should remove step number CSS class if prop is false 1`] = `
`64`	`63`	`className="wc-block-components-checkout-step__heading"`
`65`	`64`	`>`
`66`	`65`	`<h2`
`67`		`- aria-hidden="true"`
`68`	`66`	`className="wc-block-components-title wc-block-components-checkout-step__title"`
`69`	`67`	`>`
`70`	`68`	`Lorem Ipsum`
@@ -135,7 +133,6 @@ exports[`FormStep should render a fieldset with heading if a title is provided 1
`135`	`133`	`className="wc-block-components-checkout-step__heading"`
`136`	`134`	`>`
`137`	`135`	`<h2`
`138`		`- aria-hidden="true"`
`139`	`136`	`className="wc-block-components-title wc-block-components-checkout-step__title"`
`140`	`137`	`>`
`141`	`138`	`Lorem Ipsum`
@@ -167,7 +164,6 @@ exports[`FormStep should render step description 1`] = `
`167`	`164`	`className="wc-block-components-checkout-step__heading"`
`168`	`165`	`>`
`169`	`166`	`<h2`
`170`		`- aria-hidden="true"`
`171`	`167`	`className="wc-block-components-title wc-block-components-checkout-step__title"`
`172`	`168`	`>`
`173`	`169`	`Lorem Ipsum`
@@ -204,7 +200,6 @@ exports[`FormStep should render step heading content 1`] = `
`204`	`200`	`className="wc-block-components-checkout-step__heading"`
`205`	`201`	`>`
`206`	`202`	`<h2`
`207`		`- aria-hidden="true"`
`208`	`203`	`className="wc-block-components-title wc-block-components-checkout-step__title"`
`209`	`204`	`>`
`210`	`205`	`Lorem Ipsum`
@@ -243,7 +238,6 @@ exports[`FormStep should set disabled prop to the fieldset element when disabled
`243`	`238`	`className="wc-block-components-checkout-step__heading"`
`244`	`239`	`>`
`245`	`240`	`<h2`
`246`		`- aria-hidden="true"`
`247`	`241`	`className="wc-block-components-title wc-block-components-checkout-step__title"`
`248`	`242`	`>`
`249`	`243`	`Lorem Ipsum`