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

[nielslange]

Describe the bug

The following sections use the CSS class .screen-reader-text to toggle the visibility of helper texts, but these helper texts are not relevant to screen reader:

https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/20389f280acd3663f22eac3a1c0b132a64e9fd0c/assets/js/editor-components/product-category-control/index.js#L152-L156

https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/20389f280acd3663f22eac3a1c0b132a64e9fd0c/assets/js/editor-components/product-tag-control/index.js#L153-L157

https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/20389f280acd3663f22eac3a1c0b132a64e9fd0c/assets/js/editor-components/product-attribute-term-control/index.js#L179-L183

To reproduce

Look up the sections, that I pointed out before.

Expected behavior

Helper texts, of which the visibility should be toggled, should use the default WP CSS class .hidden, which is defined in https://github.com/WordPress/WordPress/blob/a4bdae8122df0685f70a6d637b61750ab193bafa/wp-admin/css/common.css#L166-L175.

Current behavior

Currently, helper texts, of which the visibility should be toggled, are using the CSS class .screen-reader-text .

Additional context

https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/#use states:

The screen-reader-text class is used:

• to hide text visually that is primarily needed for screen reader users.
• for skip links to ensure keyboard navigation visibility when the link gets focus.