WebUI: Fix cr-expand-button a11y behavior to not read label twice.

Specifically when navigating the UI with VoiceOver using
Ctrl+Alt+RightArrow, the label should be skipped, and the focus
should go straight to the expand icon button, which already correctly
points to the label with |aria-labeledby|.

Bug: 1055829
Change-Id: I13f2bce30b6aaa11f518e68f779296c294dd30ae
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2510131
Auto-Submit: dpapad <dpapad@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#822848}

chrome/test/data/webui/cr_elements/cr_expand_button_tests.js

@@ -49,4 +49,12 @@ suite('cr-expand-button', function() {
     assertFalse(icon.hasAttribute('aria-expanded'));
     assertTrue(icon.disabled);
   });
+
+  // Ensure that the label is marked with aria-hidden="true", so that screen
+  // reader focus goes straight to the cr-icon-button.
+  test('label aria-hidden', () => {
+    const labelId = 'label';
+    assertEquals('true', button.$$(`#${labelId}`).getAttribute('aria-hidden'));
+    assertEquals(labelId, icon.getAttribute('aria-labelledby'));
+  });
 });

ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.html

@@ -34,7 +34,7 @@
       }
     </style>
 
-    <div id="label"><slot></slot></div>
+    <div id="label" aria-hidden="true"><slot></slot></div>
     <cr-icon-button id="icon" aria-labelledby="label" disabled="[[disabled]]"
         tabindex="[[tabIndex]]"></cr-icon-button>
   </template>