fix(material/select): don't announce selected value multiple times

[mhaertwig]

trafficstars

Screen readers announce the selected value multiple times. NVDA e.g. reads "Favorite food Pizza Pizza combobox Pizza collapsed".

1. First, the Screen Reader (SR) reads the value of the label (see 1st aria-labelledby): "Favorite food"
2. SR reads the content of the combobox (because of the label's aria-owns attribute): "Pizza"
3. SR reads the value of the combobox (see 2nd aria-labelledby): "Pizza"
4. SR reads the content of the combobox again: "Pizza"

To fix this, an aria-hidden attribute is added to the element containing the selected value. NVDA e.g. now reads "Favorite food Pizza combobox collapsed".

Successfully tested with NVDA, JAWS, Narrator and the Screen Reader Chrome plugin.

Closes #24899

[Joeh89]

The accessible name of the combobox shouldn't contain the dropdown value as well. This is not best practice. Same for the label tag, it's unnecessary since it only works for native html (select and input). The aria-owns lets the screen reader know that despite the element being lower on the DOM, it should be focused on it first before the element it owns. So this should be kept.

My suggestion for the fix would be:

1. Replacing label tag with div tag and removing the 'for' attribute from it. 'Label' only works for native html (select and input tags), it doesn't work for mat-select even if it has a role="combobox". The 'for' attribute is creating an unnecessary link to the field since aria-labelledby already refers to the inner text of the label (hopefully changing to div) element.
2. Remove the second id in the aria-labelledby as the screen reader already is capturing the value of the dropdown through javascript.

[anbalase]

bump