Product A11Y: Fix invalid HTML and announce price when updating variants

[LucasLacerdaUX]

Why are these changes introduced?
Accessibility fixes for Product page and Featured Product sections:

• Fix invalid HTML markup
• Add role="status" to price container so the price is announced when variants are updated

Fixes #126
Fixes #463

What approach did you take?
Followed suggestions on the issues.

To fix invalid HTML:

• Replaced option.name with option.position on the radio button ids. option.name can have spaces, resulting in a space separated (invalid) id attribute.
• Updated all form attributes to use the same {{ product_form_id }} to keep consistency.
• Updated disabled="true" (invalid) to disabled="disabled" (valid) in all JS files that are using this property

To announce price variants:

• Removed aria-hidden from badges in price.liquid.
• Added role="status" to the price region.

Demo links

• Store
• Editor

Suggested Tests
Accessibility

• Use a Screen Reader to test if prices are announced when the variant price or availability changes. Suggested product.

Functionality

• Check if Product form still works as expected in products with multiple variants on the product page and featured product section.

Checklist

• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[ludoboludo]

LGTM 🚀

[kmeleta]

Code looks good. Tested in VO 👍