Add screen-reader version of the compile status indicator.

GitOrigin-RevId: 2589246448047fb42637bd12252291cef442c9da

services/web/frontend/extracted-translation-keys.json

@@ -1,4 +1,8 @@
 [
+  "n_warnings",
+  "n_warnings_plural",
+  "n_errors",
+  "n_errors_plural",
   "file_outline",
   "the_file_outline_is_a_new_feature_click_the_icon_to_learn_more",
   "we_cant_find_any_sections_or_subsections_in_this_file",

services/web/frontend/js/features/preview/components/preview-pane.js

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import PreviewToolbar from './preview-toolbar'
 import PreviewLogsPane from './preview-logs-pane'
+import { useTranslation } from 'react-i18next'
 
 function PreviewPane({
   compilerState,
@@ -13,6 +14,8 @@ function PreviewPane({
   onToggleLogs,
   showLogs
 }) {
+  const { t } = useTranslation()
+
   const nErrors =
     compilerState.logEntries && compilerState.logEntries.errors
       ? compilerState.logEntries.errors.length
@@ -39,6 +42,12 @@ function PreviewPane({
         onSetSyntaxCheck={onSetSyntaxCheck}
         onToggleLogs={onToggleLogs}
       />
+      <span aria-live="polite" className="sr-only">
+        {nErrors ? t('n_errors', { count: nErrors }) : ''}
+      </span>
+      <span aria-live="polite" className="sr-only">
+        {nWarnings ? t('n_warnings', { count: nWarnings }) : ''}
+      </span>
       {showLogs ? (
         <PreviewLogsPane logEntries={compilerState.logEntries.all} />
       ) : null}

services/web/locales/en.json

@@ -1,4 +1,8 @@
 {
+  "n_warnings": "__count__ warning",
+  "n_warnings_plural": "__count__ warnings",
+  "n_errors": "__count__ error",
+  "n_errors_plural": "__count__ errors",
   "view_pdf": "View PDF",
   "your_project_has_errors": "Your project has errors",
   "view_warnings": "View warnings",