I'm currently working on a react-redux e-commerce application and I'm facing an issue with the screen reader functionality. I'm having trouble getting the screen reader to navigate from the payment section to the order summary component and read the content within it.
When I click on the order summary contents, which is displayed in a table with an h4 header, the screen reader does read it. However, I am unable to tab to it from the payment section.
The code snippet for the OrderSummary.js file is as follows:
<h2 className="title h3">Order Summary</h2>
<table className="subtotal-wrapper body-color">
<caption className="screen-reader-text">Order Summary</caption>
<tbody>
<tr>
<th>Subtotal:</th>
<td>${formatPrice(this.props.orderSummary.originalSubtotal)}</td>
</tr>
{showShippingCost(this.props.orderSummary.totalShippingCost, this.props.orderSummary.totalShippingDiscount)}
<tr>
<th>Est Sales Tax:</th>
<td>${formatPrice(this.props.orderSummary.totalEstimatedTax)}</td>
</tr>
{getOptionalComponent('Total Savings:', this.props.orderSummary.discountedSubtotal)}
</tbody>
</table>
Instead of navigating from the form in the `Address.js` component like it should,
<form className="marketing-offer" onSubmit={doNothing} >
<Checkbox
name="marketingOptIn"
checked={!!this.props.marketingOptIn}
onChange={this.props.handleMarketingOptInChange}
>
<span className="payment-option special-offers">Yes! I would like to receive updates, special offers, and other information from shopDisney and The Walt Disney Family of Companies.</span>
</Checkbox>
</form>
the screen reader jumps straight to the "Continue to Review" button in the order summary section without reading the table in `OrderSummary.js`.
While I can manually trigger the reading by clicking on it, the tabbing behavior from the checkbox in the form field to the `OrderSummary.js` table is not working as expected.
Any suggestions on how to resolve this issue?