Changes anti-duplication stratgey from controlling focus to using aria.

Previously with screenreaders we were seeing duplication of information,
due to a container being selectable/aria-readable. The initial solution
was to make this container unselectable, but this caused the menu to be
unusable.

This new solution instead makes the containter aria-hidden, and sets
the information previously obtained from its children on the parent
label.

Bug: 919446
Change-Id: I6b5a057b24ccc43c9f7deebe7805ee8f2a6a3821
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1401454Reviewed-by: Tommy Steimel <steimel@chromium.org>
Commit-Queue: CJ DiMeglio <lethalantidote@chromium.org>
Cr-Commit-Position: refs/heads/master@{#638403}

third_party/blink/renderer/modules/media_controls/elements/media_control_input_element.cc

@@ -61,25 +61,28 @@ HTMLElement* MediaControlInputElement::CreateOverflowElement(
   overflow_menu_text_->setInnerText(button->GetOverflowMenuString(),
                                     ASSERT_NO_EXCEPTION);
 
-  HTMLLabelElement* element = HTMLLabelElement::Create(GetDocument());
-  element->SetShadowPseudoId(
+  overflow_label_element_ = HTMLLabelElement::Create(GetDocument());
+  overflow_label_element_->SetShadowPseudoId(
       AtomicString("-internal-media-controls-overflow-menu-list-item"));
-  element->setAttribute(html_names::kRoleAttr, "menuitem");
+  overflow_label_element_->setAttribute(html_names::kRoleAttr, "menuitem");
   // Appending a button to a label element ensures that clicks on the label
   // are passed down to the button, performing the action we'd expect.
-  element->ParserAppendChild(button);
+  overflow_label_element_->ParserAppendChild(button);
 
   // Allows to focus the list entry instead of the button.
-  element->setTabIndex(0);
+  overflow_label_element_->setTabIndex(0);
   button->setTabIndex(-1);
 
   if (MediaControlsImpl::IsModern()) {
     overflow_menu_container_ = HTMLDivElement::Create(GetDocument());
     overflow_menu_container_->ParserAppendChild(overflow_menu_text_);
+    overflow_menu_container_->setAttribute(html_names::kAriaHiddenAttr, "true");
+    aria_label_ = button->getAttribute(html_names::kAriaLabelAttr) + " " +
+                  button->GetOverflowMenuString();
     UpdateOverflowSubtitleElement(button->GetOverflowMenuSubtitleString());
-    element->ParserAppendChild(overflow_menu_container_);
+    overflow_label_element_->ParserAppendChild(overflow_menu_container_);
   } else {
-    element->ParserAppendChild(overflow_menu_text_);
+    overflow_label_element_->ParserAppendChild(overflow_menu_text_);
   }
 
   // Initialize the internal states of the main element and the overflow one.
@@ -89,10 +92,11 @@ HTMLElement* MediaControlInputElement::CreateOverflowElement(
   // Keeping the element hidden by default. This is setting the style in
   // addition of calling ShouldShowButtonInOverflowMenu() to guarantee that the
   // internal state matches the CSS state.
-  element->SetInlineStyleProperty(CSSPropertyDisplay, CSSValueNone);
+  overflow_label_element_->SetInlineStyleProperty(CSSPropertyDisplay,
+                                                  CSSValueNone);
   SetOverflowElementIsWanted(false);
 
-  return element;
+  return overflow_label_element_;
 }
 
 void MediaControlInputElement::UpdateOverflowSubtitleElement(String text) {
@@ -101,6 +105,7 @@ void MediaControlInputElement::UpdateOverflowSubtitleElement(String text) {
   if (!text) {
     // If setting the text to null, we want to remove the element.
     RemoveOverflowSubtitleElement();
+    UpdateOverflowLabelAriaLabel("");
     return;
   }
 
@@ -117,6 +122,7 @@ void MediaControlInputElement::UpdateOverflowSubtitleElement(String text) {
     overflow_menu_container_->setAttribute(
         "class", kOverflowContainerWithSubtitleCSSClass);
   }
+  UpdateOverflowLabelAriaLabel(text);
 }
 
 void MediaControlInputElement::RemoveOverflowSubtitleElement() {
@@ -138,6 +144,12 @@ void MediaControlInputElement::SetOverflowElementIsWanted(bool wanted) {
   overflow_element_->SetIsWanted(wanted);
 }
 
+void MediaControlInputElement::UpdateOverflowLabelAriaLabel(String subtitle) {
+  String full_aria_label = aria_label_ + " " + subtitle;
+  overflow_label_element_->setAttribute(html_names::kAriaLabelAttr,
+                                        WTF::AtomicString(full_aria_label));
+}
+
 void MediaControlInputElement::MaybeRecordDisplayed() {
   // Display is defined as wanted and fitting. Overflow elements will only be
   // displayed if their inline counterpart isn't displayed.
@@ -292,6 +304,7 @@ void MediaControlInputElement::Trace(blink::Visitor* visitor) {
   visitor->Trace(overflow_menu_container_);
   visitor->Trace(overflow_menu_text_);
   visitor->Trace(overflow_menu_subtitle_);
+  visitor->Trace(overflow_label_element_);
 }
 
 }  // namespace blink

third_party/blink/renderer/modules/media_controls/elements/media_control_input_element.h

@@ -99,6 +99,9 @@ class MODULES_EXPORT MediaControlInputElement : public HTMLInputElement,
   // Remove the subtitle text from the overflow element.
   void RemoveOverflowSubtitleElement();
 
+  // Updates aria label on overflow_label_element_.
+  void UpdateOverflowLabelAriaLabel(String);
+
   // Used for histograms, do not reorder.
   enum class CTREvent {
     kDisplayed = 0,
@@ -113,6 +116,9 @@ class MODULES_EXPORT MediaControlInputElement : public HTMLInputElement,
   // Setting this pointer is optional so it may be null.
   Member<MediaControlInputElement> overflow_element_;
 
+  // The overflow label element for the overflow_element_;
+  Member<HTMLLabelElement> overflow_label_element_;
+
   // Contains the overflow text and its subtitle (if exists).
   Member<HTMLDivElement> overflow_menu_container_;
 
@@ -122,6 +128,9 @@ class MODULES_EXPORT MediaControlInputElement : public HTMLInputElement,
   // The subtitle of the text within the overflow menu.
   Member<HTMLSpanElement> overflow_menu_subtitle_;
 
+  // The aria label for the overflow element without subtitle text.
+  String aria_label_;
+
   // Keeps track if the button was created for the purpose of the overflow menu.
   bool is_overflow_element_ = false;