Cert Provisioning: Improve a11y in cert provisioning details UI

Currently, screen-reader reads the field title and the values separately in the dialog page. However,the desired behaviour for screen-reader is to read out all information about a field in one-go for better user experience. This cl improves this behaviour.

Bug: 1157398
Change-Id: Icce01a076411c66c8aa667b7642fc48e9bb038b7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2602293Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Irem Uğuz <iremuguz@google.com>
Cr-Commit-Position: refs/heads/master@{#842444}

ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_details_dialog.html

@@ -29,25 +29,41 @@
   </div>
   <div slot="body">
     <div class="two-line">
-      <div class="label">[[i18n('certificateProvisioningProfileName')]]</div>
-      <div class="value">[[model.certProfileName]]</div>
+      <div class="label" aria-describedby="certProfileName">
+        [[i18n('certificateProvisioningProfileName')]]
+      </div>
+      <div class="value" id="certProfileName" aria-hidden="true">
+        [[model.certProfileName]]
+      </div>
     </div>
     <div class="two-line">
-      <div class="label">[[i18n('certificateProvisioningProfileId')]]</div>
-      <div class="value">[[model.certProfileId]]</div>
+      <div class="label" aria-describedby="certProfileId">
+        [[i18n('certificateProvisioningProfileId')]]
+      </div>
+      <div class="value" id="certProfileId" aria-hidden="true">
+        [[model.certProfileId]]
+      </div>
     </div>
     <div class="button-box">
       <div class="two-line flex">
-        <div class="label">[[i18n('certificateProvisioningStatus')]]</div>
-        <span class="value">[[model.status]]</span>
+        <div class="label" aria-describedby="status">
+          [[i18n('certificateProvisioningStatus')]]
+        </div>
+        <span class="value" id="status" aria-hidden="true">
+          [[model.status]]
+        </span>
       </div>
       <cr-button id="refresh" role="button" on-click="onRefresh_">
         [[i18n('certificateProvisioningRefresh')]]
       </cr-button>
     </div>
     <div class="two-line">
-      <div class="label">[[i18n('certificateProvisioningLastUpdate')]]</div>
-      <div class="value">[[model.timeSinceLastUpdate]]</div>
+      <div class="label" aria-describedby="timeSinceLastUpdate">
+        [[i18n('certificateProvisioningLastUpdate')]]
+      </div>
+      <div class="value" id="timeSinceLastUpdate" aria-hidden="true">
+        [[model.timeSinceLastUpdate]]
+      </div>
     </div>
     <hr></hr>
     <cr-expand-button expanded="{{advancedExpanded_}}"
@@ -56,12 +72,20 @@
     </cr-expand-button>
     <iron-collapse id="advancedInfo" opened="[[advancedExpanded_]]">
       <div class="two-line">
-        <div class="label">[[i18n('certificateProvisioningStatusId')]]</div>
-        <div class="value">[[model.stateId]]</div>
+        <div class="label" aria-describedby="stateId">
+          [[i18n('certificateProvisioningStatusId')]]
+        </div>
+        <div class="value" id="stateId" aria-hidden="true">
+          [[model.stateId]]
+        </div>
       </div>
       <div class="two-line">
-        <div class="label">[[i18n('certificateProvisioningPublicKey')]]</div>
-        <div class="value">[[model.publicKey]]</div>
+        <div class="label" aria-describedby="publicKey">
+          [[i18n('certificateProvisioningPublicKey')]]
+        </div>
+        <div class="value" id="publicKey" aria-hidden="true">
+          [[model.publicKey]]
+        </div>
       </div>
     </iron-collapse>
   </div>