[realbox] Fixes screen reader not reading ariaLabel in realbox match

The issue was that in the realbox focusing on the match would read the
innerHTML instead of the ariaLabel. To fix this we made the child
elements of the realbox match hidden to accessibility so the
ariaLabel of the match is the only thing visible to the screenreader.

Change-Id: I44c2aa2dfab2392feaf15983f47e90dc0360aa04
Bug: 1269827
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3291974
Reviewed-by: Moe Ahmadi <mahmadi@chromium.org>
Commit-Queue: Marlon Facey <mfacey@chromium.org>
Commit-Queue: Moe Ahmadi <mahmadi@chromium.org>
Cr-Commit-Position: refs/heads/main@{#946186}

chrome/browser/resources/new_tab_page/realbox/realbox_match.html

@@ -105,7 +105,7 @@
   }
 
 </style>
-<div class="container">
+<div class="container" aria-hidden="true">
   <ntp-realbox-icon id="icon" match="[[match]]"></ntp-realbox-icon>
   <div id="text-container">
     <span id="contents" inner-h-t-m-l="[[contentsHtml_]]"></span>
@@ -120,10 +120,10 @@
   </cr-icon-button>
 </div>
 <template is="dom-if" if="[[actionIsVisible_]]">
-  <div class="container">
+  <div class="container" aria-hidden="true">
     <ntp-realbox-action id="action" action="[[match.action]]"
                      tabindex="1" on-click="onActionClick_"
                      on-keydown="onActionKeyDown_">
     </ntp-realbox-action>
   </div>
-</template>
+</template>