diff --git a/packages/core/src/canvas/view/FrameView.ts b/packages/core/src/canvas/view/FrameView.ts index 927ea56bb..e6a560fbe 100644 --- a/packages/core/src/canvas/view/FrameView.ts +++ b/packages/core/src/canvas/view/FrameView.ts @@ -21,7 +21,7 @@ export default class FrameView extends ModuleView { } /** @ts-ignore */ get attributes() { - return { allowfullscreen: 'allowfullscreen' }; + return { allowfullscreen: 'allowfullscreen', title: this.em.t('canvas.frameTitle') }; } dragging = false; diff --git a/packages/core/src/i18n/locale/en.js b/packages/core/src/i18n/locale/en.js index 8f0bf3db3..1ae6f7416 100644 --- a/packages/core/src/i18n/locale/en.js +++ b/packages/core/src/i18n/locale/en.js @@ -17,6 +17,9 @@ export default { // 'category-id': 'Category Label', }, }, + canvas: { + frameTitle: 'Editor canvas', + }, domComponents: { names: { '': 'Box', diff --git a/packages/core/test/specs/canvas/FrameView.ts b/packages/core/test/specs/canvas/FrameView.ts new file mode 100644 index 000000000..6260de9ac --- /dev/null +++ b/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'); + }); +});