[Canvas][A11y] Adds an H1 tag with the workpad title when viewing workpads

x-pack/plugins/canvas/public/components/home_app/home_app.component.tsx

@@ -7,7 +7,6 @@
 
 import React, { FC } from 'react';
 import { Home } from '../home';
-// @ts-expect-error untyped local
 import { setDocTitle } from '../../lib/doc_title';
 
 export interface Props {

x-pack/plugins/canvas/public/components/workpad_app/workpad_app.component.tsx

@@ -5,24 +5,33 @@
  * 2.0.
  */
 
-import React, { FC, MouseEventHandler, useRef, useCallback } from 'react';
+import React, { FC, MouseEventHandler, useRef, useCallback, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { CANVAS } from '../../../i18n';
 import { Sidebar } from '../sidebar';
 import { Toolbar } from '../toolbar';
 import { Workpad } from '../workpad';
 import { WorkpadHeader } from '../workpad_header';
 import { CANVAS_LAYOUT_STAGE_CONTENT_SELECTOR } from '../../../common/lib/constants';
-import { CommitFn } from '../../../types';
+import { CanvasWorkpad, CommitFn } from '../../../types';
+import { getUntitledWorkpadLabel } from '../../lib/doc_title';
 
 export const WORKPAD_CONTAINER_ID = 'canvasWorkpadContainer';
 
 export interface Props {
   deselectElement?: MouseEventHandler;
   isWriteable: boolean;
+  workpad: CanvasWorkpad;
 }
 
-export const WorkpadApp: FC<Props> = ({ deselectElement, isWriteable }) => {
+export const WorkpadApp: FC<Props> = ({ deselectElement, isWriteable, workpad }) => {
   const interactivePageLayout = useRef<CommitFn | null>(null); // future versions may enable editing on multiple pages => use array then
+  const workpadTitle = useRef<HTMLHeadingElement>(null); // future versions may enable editing on multiple pages => use array then
+
+  // TODO: Remove this focus when https://github.com/elastic/kibana/issues/38980 is addressed
+  useEffect(() => {
+    workpadTitle.current?.focus();
+  }, [workpadTitle]);
 
   const registerLayout = useCallback((newLayout: CommitFn) => {
     if (interactivePageLayout.current !== newLayout) {
@@ -38,12 +47,20 @@ export const WorkpadApp: FC<Props> = ({ deselectElement, isWriteable }) => {
 
   const commit = interactivePageLayout.current || (() => {});
 
+  const untitledWorkpadLabel = useMemo(() => getUntitledWorkpadLabel(), []);
+
   return (
     <div className="canvasLayout">
       <div className="canvasLayout__rows">
         <div className="canvasLayout__cols">
           <div className="canvasLayout__stage">
             <div className="canvasLayout__stageHeader">
+              <h1
+                id="canvasWorkpadTitle"
+                className="euiScreenReaderOnly"
+                ref={workpadTitle}
+                tabIndex={-1}
+              >{`${CANVAS} - ${workpad.name || untitledWorkpadLabel}`}</h1>
               <WorkpadHeader commit={commit} />
             </div>
 

x-pack/plugins/canvas/public/lib/breadcrumbs.ts

@@ -8,6 +8,7 @@
 import { MouseEvent } from 'react';
 import { History } from 'history';
 import { ChromeBreadcrumb } from '@kbn/core/public';
+import { getUntitledWorkpadLabel } from './doc_title';
 
 const isModifiedEvent = (event: MouseEvent) =>
   !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
@@ -47,8 +48,6 @@ export const getBaseBreadcrumb = (history: History): ChromeBreadcrumb => {
   };
 };
 
-export const getWorkpadBreadcrumb = ({
-  name = 'Workpad',
-}: { name?: string } = {}): ChromeBreadcrumb => ({
-  text: name,
+export const getWorkpadBreadcrumb = ({ name }: { name?: string }): ChromeBreadcrumb => ({
+  text: name || getUntitledWorkpadLabel(),
 });

x-pack/plugins/canvas/public/lib/doc_title.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const getUntitledWorkpadLabel = () =>
+  i18n.translate('xpack.canvas.workpadApp.untitledWorkpadLabel', {
+    defaultMessage: 'Untitled workpad',
+  });
+
+export const setDocTitle = (title?: string) => {
+  document.title = `${title || getUntitledWorkpadLabel()} - Kibana`;
+};

x-pack/plugins/canvas/public/routes/workpad/workpad_presentation_helper.tsx

@@ -9,8 +9,7 @@ import React, { FC, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { getBaseBreadcrumb, getWorkpadBreadcrumb } from '../../lib/breadcrumbs';
-// @ts-expect-error
-import { setDocTitle } from '../../lib/doc_title';
+import { getUntitledWorkpadLabel, setDocTitle } from '../../lib/doc_title';
 import { getWorkpad } from '../../state/selectors/workpad';
 import { useFullscreenPresentationHelper } from './hooks/use_fullscreen_presentation_helper';
 import { useAutoplayHelper } from './hooks/use_autoplay_helper';
@@ -35,11 +34,11 @@ export const WorkpadPresentationHelper: FC = ({ children }) => {
       getBaseBreadcrumb(history),
       getWorkpadBreadcrumb({ name: workpad.name }),
     ]);
-  }, [workpad.name, workpad.id, platformService, history]);
+  }, [workpad.name, platformService, history]);
 
   useEffect(() => {
-    setDocTitle(workpad.name);
-  }, [workpad.name]);
+    setDocTitle(workpad.name || getUntitledWorkpadLabel());
+  }, [workpad.name, workpad.id]);
 
   const conflictElement = workpad.aliasId
     ? platformService.getLegacyUrlConflict?.({