Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Render an aria-label for the initial mini cart html #48329

Merged
merged 7 commits into from
Jul 22, 2024

Conversation

alexflorisca
Copy link
Member

@alexflorisca alexflorisca commented Jun 10, 2024

Changes proposed in this Pull Request:

This PR renders an aria-label attribute for the initial mini-cart html that gets rendered, before React kicks in and replaces it.

Closes #42289 .

How to test the changes in this Pull Request:

  1. Use a block theme and ensure you have the mini cart in the header template part, both for the Header and Checkout Header template parts
  2. Visit the site on the front-end and disable javascript in your browser (In chrome, you can open up the developer tools and press CMD + SHIFT + P and type "disable javascript")
  3. Inspect the Mini Cart Icon.
  4. Check the button element has an 'aria-label' attribute that says "Cart"
  5. Add some items to your cart and go to the Checkout page
  6. Open up the developer tools and search for the mini-cart element (You can search for "mini-cart" in the Elements tab)
  7. Check that it is not visible on the page, but that it has an aria-label property that says "Cart"

@github-actions github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Jun 10, 2024
@alexflorisca alexflorisca marked this pull request as ready for review June 10, 2024 15:23
@woocommercebot woocommercebot requested review from a team and wavvves and removed request for a team June 10, 2024 15:23
Copy link
Contributor

Hi @wavvves,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

Copy link
Contributor

github-actions bot commented Jun 10, 2024

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

@alexflorisca alexflorisca added type: bug The issue is a confirmed bug. focus: accessibility The issue/PR is related to accessibility. team: Rubik Store API checkout endpoints, Mini-Cart, Cart and Checkout related issues block: mini-cart Issues related to the Mini-Cart block. labels Jun 10, 2024
Copy link
Contributor

@wavvves wavvves left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! but be sure to add the missing changelog file before merging ;)

@alexflorisca alexflorisca merged commit ab8517f into trunk Jul 22, 2024
12 checks passed
@alexflorisca alexflorisca deleted the fix/42289-mini-cart-aira-label branch July 22, 2024 14:34
@github-actions github-actions bot added this to the 9.2.0 milestone Jul 22, 2024
@github-actions github-actions bot added the needs: analysis Indicates if the PR requires a PR testing scrub session. label Jul 22, 2024
@rodelgc rodelgc added needs: external testing Indicates if the PR requires further testing conducted by testers external to the development team. status: analysis complete Indicates if a PR has been analysed by Solaris and removed needs: analysis Indicates if the PR requires a PR testing scrub session. needs: external testing Indicates if the PR requires further testing conducted by testers external to the development team. labels Jul 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
block: mini-cart Issues related to the Mini-Cart block. focus: accessibility The issue/PR is related to accessibility. plugin: woocommerce Issues related to the WooCommerce Core plugin. status: analysis complete Indicates if a PR has been analysed by Solaris team: Rubik Store API checkout endpoints, Mini-Cart, Cart and Checkout related issues type: bug The issue is a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Accessibility: Mini Cart block button missing accessible name
3 participants