Accessibility: Single product tabs missing aria-selected

[amberhinds]

Prerequisites

• I have carried out troubleshooting steps and I believe I have found a bug.
• I have searched for similar bugs in both open and closed issues and cannot find a duplicate.

Describe the bug

The tabs on the product single are missing aria-selected, so screen reader users do not know which tab is currently active.
See:

woocommerce/plugins/woocommerce/templates/single-product/tabs/tabs.php

Line 36 in 758df48

<li class="<?php echo esc_attr( $key ); ?>_tab" id="tab-title-<?php echo esc_attr( $key ); ?>" role="tab" aria-controls="tab-<?php echo esc_attr( $key ); ?>">

The selected tab in a tablist should have aria-selected="true" set. All inactive tabs in the tablist should have aria-selected="false" set. Use JS to change the value of the attribute as tabs are selected.

Expected behavior

Screen reader users should hear which tab is currently active when viewing tabbed content.

Actual behavior

Screen reader users do not know which panel is currently active.

Steps to reproduce

Go to the code linked above and observe that aria-selected is not present.

WordPress Environment

N/A

Isolating the problem

• I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
• This bug happens with a default WordPress theme active, or Storefront.
• I can reproduce this bug consistently using the steps above.

[dinhtungdu]

I can confirm the bug @amberhinds. Thank you so much! I added this to our backlog to work on it later.