Use aria-labelledby for cr-dialog

This change begins to address an issue where context was unclear
for screen readers when a dialog opens.

Previously, when a dialog had a field set as 'autofocus',
ChromeVox would read the name and contents of the field
followed by "dialog". With this change, all dialogs properly read
title of dialog + "dialog" before reading the name and contents of
the autofocused field.

With this change, we end up with a slightly different issue where
some information about the title/ first field of a dialog is read
twice for example "Add Printer, Dialog, Name, dit text,
Name, edit text, Add Printer, Dialog"

Screen recordings:
Before: https://www.loom.com/share/c3c71f84457d457b8bcf9a8cc973cc43
After: https://www.loom.com/share/24c4a8dd5ef54063a94bc94af48246ed

Bug: 1015673
Change-Id: Ic79006ea3cf94c0695f140c1cdff9efdb65bc28b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1906254Reviewed-by: Jordy Greenblatt <jordynass@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Commit-Queue: Bailey Berro <baileyberro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#714821}

ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html

@@ -151,12 +151,12 @@
       }
     </style>
     <dialog id="dialog" on-close="onNativeDialogClose_"
-        on-cancel="onNativeDialogCancel_" part="dialog">
+        on-cancel="onNativeDialogCancel_" part="dialog" aria-labelledby="title">
       <!-- This wrapper is necessary, such that the "pulse" animation is not
         erroneously played when the user clicks on the outer-most scrollbar. -->
       <div id="content-wrapper" part="wrapper">
         <div class="top-container">
-          <div class="title-container" tabindex="-1">
+          <div id="title" class="title-container" tabindex="-1">
             <slot name="title"></slot>
           </div>
           <cr-icon-button id="close" class="icon-clear"