fix(material/core): mat-optgroup labels are read twice during screen-…

…reader page navigation. (#21858)

Fixed by adding aria-hidden="true" to the <label> elements.
While screenreaders will still announce the label text for the group they will skip over the actual label element.
Additionally, changed the <label> to a <span> to make it clear that the text is visual only.

Co-authored-by: Akshay Verma <[email protected]>
(cherry picked from commit ca37709)

src/material-experimental/mdc-core/option/optgroup.html

@@ -1,8 +1,9 @@
-<label
+<span
   class="mat-mdc-optgroup-label"
+  aria-hidden="true"
   [class.mdc-list-item--disabled]="disabled"
   [id]="_labelId">
   <span class="mdc-list-item__text">{{ label }} <ng-content></ng-content></span>
-</label>
+</span>
 
 <ng-content select="mat-option, ng-container"></ng-content>

src/material-experimental/mdc-select/select.spec.ts

@@ -1133,7 +1133,7 @@ describe('MDC-based MatSelect', () => {
 
         it('should set the `aria-labelledby` attribute', fakeAsync(() => {
           let group = groups[0];
-          let label = group.querySelector('label')!;
+          let label = group.querySelector('.mat-mdc-optgroup-label') as HTMLElement;
 
           expect(label.getAttribute('id')).toBeTruthy('Expected label to have an id.');
           expect(group.getAttribute('aria-labelledby'))

src/material/core/option/optgroup.html

@@ -1,2 +1,2 @@
-<label class="mat-optgroup-label" [id]="_labelId">{{ label }} <ng-content></ng-content></label>
+<span class="mat-optgroup-label" aria-hidden="true" [id]="_labelId">{{ label }} <ng-content></ng-content></span>
 <ng-content select="mat-option, ng-container"></ng-content>

src/material/select/select.spec.ts

@@ -1129,7 +1129,7 @@ describe('MatSelect', () => {
 
         it('should set the `aria-labelledby` attribute', fakeAsync(() => {
           let group = groups[0];
-          let label = group.querySelector('label')!;
+          let label = group.querySelector('span')!;
 
           expect(label.getAttribute('id')).toBeTruthy('Expected label to have an id.');
           expect(group.getAttribute('aria-labelledby'))