Use .hidden instead of .screen-reader-text for toggling helper texts

[nielslange]

Fixes #4525

Accessibility

n/a

Screenshots

How to test the changes in this Pull Request:

Products by Tag block

1. Install and activate the WooCommerce plugin
2. Install and activate this plugin
3. Create min. 2 product tags
4. Create one test product and add the product tags to it
5. Create a test page
6. Add the Products by Tag block
7. Select tags
8. When >= 2 product tags are selected, the message 'Pick at least two tags to use this setting.' is visible
9. When < 2 product tags are selected, the message 'Pick at least two tags to use this setting.' is not visible

Products by Category block

1. Install and activate the WooCommerce plugin
2. Install and activate this plugin
3. Create min. 2 product categories with min
4. Create one test product and add the tags to it
5. Create a test page
6. Add the Products by Category block
7. Select product categories
8. When >= 2 product categories are selected, the message 'Pick at least two categories to use this setting.' is visible
9. When < 2 product categories are selected, the message 'Pick at least two categories to use this setting.' is not visible

Products by Attribute block

1. Install and activate the WooCommerce plugin
2. Install and activate this plugin
3. Create min. 1 product attribute with min. 2 values
4. Create one test product and add the product attribute to it
5. Create a test page
6. Add the Products by Attribute block
7. Select product attribute values
8. When >= 2 product attribute values are selected, the message 'Pick at least two attributes to use this setting.' is visible
9. When < 2 product attribute values are selected, the message 'Pick at least two attributes to use this setting.' is not visible

Note

This PR only replaces .screen-reader-text with .hidden, while it does not change the existing functionality. However, the current functionality seems to be implemented the other way around.

Changelog

Replace .screen-reader-text with .hidden for elements that are not relevant to screen readers

[github-actions]

Size Change: -102 B (0%)

Total Size: 1.06 MB

Filename	Size	Change
build/featured-category.js	7.39 kB	-9 B (0%)
build/product-best-sellers.js	6.72 kB	-13 B (0%)
build/product-category.js	7.58 kB	-14 B (0%)
build/product-new.js	6.87 kB	-13 B (0%)
build/product-on-sale.js	7.21 kB	-13 B (0%)
build/product-tag.js	6.68 kB	-13 B (0%)
build/product-top-rated.js	6.84 kB	-13 B (0%)
build/products-by-attribute.js	7.8 kB	-12 B (0%)
build/reviews-by-category.js	11.6 kB	-2 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	8.27 kB
build/active-filters.js	7.84 kB
build/all-products-frontend.js	23 kB
build/all-products.js	37.3 kB
build/all-reviews.js	9.6 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js	2.57 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js	1.82 kB
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js	334 B
build/atomic-block-components/add-to-cart-frontend.js	8.65 kB
build/atomic-block-components/add-to-cart.js	7.73 kB
build/atomic-block-components/button-frontend.js	1.74 kB
build/atomic-block-components/button.js	875 B
build/atomic-block-components/category-list-frontend.js	468 B
build/atomic-block-components/category-list.js	476 B
build/atomic-block-components/image-frontend.js	1.88 kB
build/atomic-block-components/image.js	1.35 kB
build/atomic-block-components/price-frontend.js	2.09 kB
build/atomic-block-components/price.js	2.11 kB
build/atomic-block-components/rating-frontend.js	561 B
build/atomic-block-components/rating.js	568 B
build/atomic-block-components/sale-badge-frontend.js	857 B
build/atomic-block-components/sale-badge.js	867 B
build/atomic-block-components/sku-frontend.js	388 B
build/atomic-block-components/sku.js	392 B
build/atomic-block-components/stock-indicator-frontend.js	609 B
build/atomic-block-components/stock-indicator.js	612 B
build/atomic-block-components/summary-frontend.js	907 B
build/atomic-block-components/summary.js	912 B
build/atomic-block-components/tag-list-frontend.js	466 B
build/atomic-block-components/tag-list.js	470 B
build/atomic-block-components/title-frontend.js	1.43 kB
build/atomic-block-components/title.js	1.29 kB
build/attribute-filter-frontend.js	17.9 kB
build/attribute-filter.js	11.9 kB
build/blocks-checkout.js	21.2 kB
build/cart-frontend.js	77.8 kB
build/cart.js	45.6 kB
build/checkout-blocks/sample.js	174 B
build/checkout-frontend.js	82 kB
build/checkout-i2-frontend.js	51.7 kB
build/checkout-i2.js	48.4 kB
build/checkout.js	48.5 kB
build/featured-product.js	9.55 kB
build/handpicked-products.js	6.56 kB
build/price-filter-frontend.js	14.3 kB
build/price-filter.js	9.59 kB
build/price-format.js	1.37 kB
build/product-categories.js	3.38 kB
build/product-search.js	2.68 kB
build/reviews-by-product.js	13.1 kB
build/reviews-frontend.js	9.22 kB
build/single-product-frontend.js	25.7 kB
build/single-product.js	9.84 kB
build/vendors--atomic-block-components/price-frontend.js	5.71 kB
build/wc-blocks-data.js	10.8 kB
build/wc-blocks-editor-style-rtl.css	15.4 kB
build/wc-blocks-editor-style.css	15.4 kB
build/wc-blocks-google-analytics.js	1.99 kB
build/wc-blocks-middleware.js	1.48 kB
build/wc-blocks-registry.js	2.74 kB
build/wc-blocks-shared-context.js	1.54 kB
build/wc-blocks-shared-hocs.js	1.75 kB
build/wc-blocks-style-rtl.css	19.8 kB
build/wc-blocks-style.css	19.8 kB
build/wc-blocks-vendors-style-rtl.css	1.05 kB
build/wc-blocks-vendors-style.css	1.05 kB
build/wc-blocks-vendors.js	235 kB
build/wc-blocks.js	3.51 kB
build/wc-payment-method-bacs.js	812 B
build/wc-payment-method-cheque.js	807 B
build/wc-payment-method-cod.js	903 B
build/wc-payment-method-paypal.js	844 B
build/wc-payment-method-stripe.js	12.3 kB
build/wc-settings.js	2.92 kB

_{compressed-size-action}

[Aljullu]

Good catch with this issue @nielslange! The usage of the screen-reader-text class here seems very weird and an important accessibility bug.

I'm approving, but suggesting one improvement in case you want to apply it before merging: do you think we should use the hidden HTML attribute instead of the hidden CSS class? The attribute seems to have more semantic meaning and it automatically applies display: none.

[nielslange]

I'm approving, but suggesting one improvement in case you want to apply it before merging: do you think we should use the hidden HTML attribute instead of the hidden CSS class? The attribute seems to have more semantic meaning and it automatically applies display: none.

Thanks for your review and approving the suggested change. I wasn't aware of the hidden HTML attribute and I agree that using this element matches better. I just updated the PR accordingly.

[Aljullu]

Thanks for updating this PR @nielslange! LGTM 🚢