[CrOS AboutPage] Fix accessibility label for End of Life Message.

The End of Life Message contains the End of Life date that needs
to be read out to pass a11y requirements.

Bug: 993828
Change-Id: I874fcee726b10e720925995804768a1b3899acf3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1854016Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Commit-Queue: Regan Hsu <hsuregan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#707195}

chrome/app/settings_strings.grdp

@@ -55,9 +55,6 @@
     </message>
     <message name="IDS_SETTINGS_ABOUT_PAGE_END_OF_LIFE_MESSAGE" desc="Message used for End of Life section on the About Page.">
       This device will get automatic software and security updates until <ph name="MONTH_AND_YEAR">$1<ex>September 2020</ex></ph>.
-      <ph name="LINK_BEGIN">&lt;a target="_blank" href="$2<ex>https://google.com/</ex>"&gt;</ph>
-        Learn more
-      <ph name="LINK_END">&lt;/a&gt;</ph>
     </message>
     <message name="IDS_SETTINGS_ABOUT_PAGE_RELAUNCH" desc="The label for the relaunch button that relaunches the browser once update is complete">
       Restart

chrome/browser/resources/settings/about_page/detailed_build_info.html

@@ -26,11 +26,14 @@
     </style>
     <div class="settings-box two-line">
       <div class="start">
-        <div>$i18n{aboutChannelLabel}</div>
-        <div class="secondary">[[currentlyOnChannelText_]]</div>
+        <div role="heading" aria-level="2">$i18n{aboutChannelLabel}</div>
+        <div id="currentlyOnChannelText" aria-hidden="true" class="secondary">
+          [[currentlyOnChannelText_]]
+        </div>
       </div>
       <div class="separator"></div>
       <cr-button on-click="onChangeChannelTap_"
+          aria-describedby="currentlyOnChannelText"
           disabled="[[!canChangeChannel_]]">
         $i18n{aboutChangeChannel}
       </cr-button>
@@ -51,8 +54,15 @@
     <div id="endOfLifeSectionContainer"
         class="settings-box two-line single-column"
         hidden="[[!eolMessageWithMonthAndYear]]">
-      <div>$i18n{aboutEndOfLifeTitle}</div>
-      <div class="secondary" inner-h-t-m-l="[[eolMessageWithMonthAndYear]]">
+      <div role="heading" aria-level="2">$i18n{aboutEndOfLifeTitle}</div>
+      <div class="secondary">
+        <span id="eolMessageWithMonthAndYear" aria-hidden="true">
+          [[eolMessageWithMonthAndYear]]
+        </span>
+        <a href="$i18nRaw{endOfLifeLearnMoreURL}"
+            aria-describedby="eolMessageWithMonthAndYear" target="_blank">
+          $i18n{learnMore}
+        </a>
       </div>
     </div>
     <cr-link-row class="hr" label="$i18n{aboutBuildDetailsTitle}"

chrome/browser/ui/webui/settings/about_handler.cc

@@ -675,8 +675,7 @@ void AboutHandler::OnGetEndOfLifeInfo(
     response.SetStringKey("aboutPageEndOfLifeMessage",
                           l10n_util::GetStringFUTF16(
                               IDS_SETTINGS_ABOUT_PAGE_END_OF_LIFE_MESSAGE,
-                              base::TimeFormatMonthAndYear(eol_info.eol_date),
-                              base::ASCIIToUTF16(chrome::kEolNotificationURL)));
+                              base::TimeFormatMonthAndYear(eol_info.eol_date)));
   } else {
     response.SetBoolKey("hasEndOfLife", false);
     response.SetStringKey("aboutPageEndOfLifeMessage", "");