diff --git a/packages/form-js-playground/src/components/PlaygroundRoot.js b/packages/form-js-playground/src/components/PlaygroundRoot.js index 3e3e19537..49388d602 100644 --- a/packages/form-js-playground/src/components/PlaygroundRoot.js +++ b/packages/form-js-playground/src/components/PlaygroundRoot.js @@ -91,14 +91,14 @@ export function PlaygroundRoot(props) { useEffect(() => { const dataEditor = dataEditorRef.current = new JSONEditor({ value: toString(data), - contentAttributes: { 'aria-label': 'Form Input' }, + contentAttributes: { 'aria-label': 'Form Input', tabIndex: 0 }, placeholder: createDataEditorPlaceholder() }); const resultView = resultViewRef.current = new JSONEditor({ readonly: true, value: toString(resultData), - contentAttributes: { 'aria-label': 'Form Output' } + contentAttributes: { 'aria-label': 'Form Output', tabIndex: 0 } }); const form = formRef.current = new Form({ diff --git a/packages/form-js-playground/test/TestHelper.js b/packages/form-js-playground/test/TestHelper.js index e7e0fdada..5baffed64 100644 --- a/packages/form-js-playground/test/TestHelper.js +++ b/packages/form-js-playground/test/TestHelper.js @@ -4,6 +4,8 @@ import '@bpmn-io/form-js-viewer/dist/assets/form-js.css'; import '@bpmn-io/form-js-editor/dist/assets/form-js-editor.css'; +export { expectNoViolations } from '../../form-js-viewer/test/helper'; + export function isSingleStart(topic) { return window.__env__ && window.__env__.SINGLE_START === topic; diff --git a/packages/form-js-playground/test/spec/Playground.spec.js b/packages/form-js-playground/test/spec/Playground.spec.js index c291bed8a..885fb3b99 100644 --- a/packages/form-js-playground/test/spec/Playground.spec.js +++ b/packages/form-js-playground/test/spec/Playground.spec.js @@ -24,6 +24,7 @@ import customEditorModule from '../custom/editor'; import customStyles from '../custom/styles.css'; import { + expectNoViolations, insertCSS, isSingleStart } from '../TestHelper'; @@ -790,6 +791,60 @@ describe('playground', function() { }); + + describe('a11y', function() { + + it('should have no violations', async function() { + + // given + this.timeout(5000); + + const main = document.createElement('main'); + container.appendChild(main); + + const data = { + logo: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160px' viewBox='0 0 58 23'%3E%3Cpath fill='currentColor' d='M7.75 3.8v.58c0 1.7-.52 2.78-1.67 3.32C7.46 8.24 8 9.5 8 11.24v1.34c0 2.54-1.35 3.9-3.93 3.9H0V0h3.91c2.68 0 3.84 1.25 3.84 3.8zM2.59 2.35V6.7H3.6c.97 0 1.56-.42 1.56-1.74v-.92c0-1.18-.4-1.7-1.32-1.7zm0 6.7v5.07h1.48c.87 0 1.34-.4 1.34-1.63v-1.43c0-1.53-.5-2-1.67-2H2.6zm14.65-4.98v2.14c0 2.64-1.27 4.08-3.87 4.08h-1.22v6.2H9.56V0h3.82c2.59 0 3.86 1.44 3.86 4.07zm-5.09-1.71v5.57h1.22c.83 0 1.28-.37 1.28-1.55V3.91c0-1.18-.45-1.56-1.28-1.56h-1.22zm11.89 9.34L25.81 0h3.6v16.48h-2.44V4.66l-1.8 11.82h-2.45L20.8 4.83v11.65h-2.26V0h3.6zm9.56-7.15v11.93h-2.33V0h3.25l2.66 9.87V0h2.31v16.48h-2.66zm10.25 9.44v2.5h-2.5v-2.5zM50 4.16C50 1.52 51.38.02 53.93.02c2.54 0 3.93 1.5 3.93 4.14v8.37c0 2.64-1.4 4.14-3.93 4.14-2.55 0-3.93-1.5-3.93-4.14zm2.58 8.53c0 1.18.52 1.63 1.35 1.63.82 0 1.34-.45 1.34-1.63V4c0-1.17-.52-1.62-1.34-1.62-.83 0-1.35.45-1.35 1.62zM0 18.7h57.86V23H0zM45.73 0h2.6v2.58h-2.6zm2.59 16.48V4.16h-2.59v12.32z'%3E%3C/path%3E%3C/svg%3E", + invoiceNumber: 'C-123', + approved: true, + approvedBy: 'John Doe', + approverComments: 'This invoice looks good.\nOr so I think anyways.', + mailto: [ 'regional-manager', 'approver' ], + product: 'camunda-cloud', + dri: 'johnDoe', + hobbies: [ 'sports', 'books', 'dancing' ], + queriedDRIs: [ + { + 'label': 'John Doe', + 'value': 'johnDoe' + }, + { + 'label': 'Anna Bell', + 'value': 'annaBell' + }, + { + 'label': 'Nico Togin', + 'value': 'incognito' + } + ], + tags: [ 'tag1', 'tag2', 'tag3' ], + conversation: '2010-06-06T12:00Z', + language: 'english' + }; + + // when + await act(() => { + playground = new Playground({ + container: main, + schema, + data + }); + }); + + // then + await expectNoViolations(container); + }); + + }); });