fix: give canvas iframe a localized accessible name

packages/core/src/canvas/view/FrameView.ts

@@ -21,7 +21,7 @@ export default class FrameView extends ModuleView<Frame, HTMLIFrameElement> {
   }
   /** @ts-ignore */
   get attributes() {
-    return { allowfullscreen: 'allowfullscreen' };
+    return { allowfullscreen: 'allowfullscreen', title: this.em.t('canvas.frameTitle') };
   }
 
   dragging = false;

packages/core/src/i18n/locale/en.js

@@ -17,6 +17,9 @@ export default {
       // 'category-id': 'Category Label',
     },
   },
+  canvas: {
+    frameTitle: 'Editor canvas',
+  },
   domComponents: {
     names: {
       '': 'Box',

packages/core/test/specs/canvas/FrameView.ts

@@ -0,0 +1,37 @@
+import Frame from '../../../src/canvas/model/Frame';
+import FrameView from '../../../src/canvas/view/FrameView';
+import EditorModel from '../../../src/editor/model/Editor';
+
+describe('Canvas frame accessible name', () => {
+  let em: EditorModel;
+
+  afterEach(() => {
+    em.destroy();
+  });
+
+  const createFrame = () => new FrameView(new Frame(em.Canvas, {}));
+
+  test('names the editor iframe by default', () => {
+    em = new EditorModel({});
+    const view = createFrame();
+    expect(view.el.tagName).toBe('IFRAME');
+    expect(view.el.title).toBe('Editor canvas');
+    expect(view.el.hasAttribute('allowfullscreen')).toBe(true);
+  });
+
+  test('uses the configured translation', () => {
+    em = new EditorModel({
+      i18n: {
+        locale: 'fr',
+        detectLocale: false,
+        messagesAdd: { fr: { canvas: { frameTitle: 'Zone de contenu' } } },
+      },
+    });
+    expect(createFrame().el.title).toBe('Zone de contenu');
+  });
+
+  test('falls back to English when the locale has no frame title', () => {
+    em = new EditorModel({ i18n: { locale: 'fr', detectLocale: false } });
+    expect(createFrame().el.title).toBe('Editor canvas');
+  });
+});