Last active
February 16, 2022 11:15
-
-
Save nfreear/6aaa386c8ffaa5ae32b5c306ee76e5e2 to your computer and use it in GitHub Desktop.
CKEditor 5 — Accessibility test page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html><html lang="html"><meta charset="utf-8"><title>CKEditor 5</title> | |
| <style> | |
| body { margin: 1rem auto; max-width: 32rem; } | |
| .ck-editor__editable { min-height: 10rem; } | |
| /* Accessibility fixes. | |
| */ | |
| .ck-editor .ck.ck-button .ck-button__label { | |
| display: inline-block; | |
| position: absolute; | |
| height: 1px; | |
| width: 1px; | |
| overflow: hidden; | |
| } | |
| #X_editor-label button, | |
| #editor-label i { | |
| background: none; | |
| border: none; | |
| position: absolute; | |
| height: 1px; | |
| width: 1px; | |
| overflow: hidden; | |
| padding: 0; | |
| } | |
| .no-fix #editor-label button { | |
| display: none; | |
| } | |
| </style> | |
| <script src="https://cdn.ckeditor.com/ckeditor5/32.0.0/classic/ckeditor.js"></script> | |
| <h1> CK Editor 5 — Accessibility test </h1> | |
| <p>Add <tt>?fix=1</tt> to the URL in the address-bar to apply experimental accessibility fixes.</p> | |
| <p><label id="editor-label">Tutor comments <i>editor</i><button>.</button></label></p> | |
| <div id="editor"> | |
| <p>This is some sample content.</p> | |
| </div> | |
| <script> | |
| const FIX = /fix=/.test(location.href); | |
| const { ClassicEditor, CKEDITOR_VERSION } = window; | |
| const EDITOR_ELEM = document.querySelector('#editor'); | |
| const EDITOR_LABEL = document.querySelector('#editor-label'); | |
| const EDITOR_BTN = EDITOR_LABEL.querySelector('button'); | |
| document.body.classList.add(FIX ? 'fix': 'no-fix'); | |
| ClassicEditor | |
| .create(EDITOR_ELEM, { | |
| lang: 'en', | |
| removePlugins: [ 'Heading' ], | |
| toolbar: [ | |
| 'bold', 'italic', 'link', 'undo', 'redo', 'numberedList', 'bulletedList' | |
| ] | |
| }) | |
| .then(editor => { | |
| console.debug('Editor:', FIX, editor); | |
| if (!FIX) return; | |
| /** Accessibility fixes. | |
| */ | |
| const INNER = document.querySelector('.ck-editor .ck-editor__editable'); | |
| INNER.setAttribute('aria-labelledby', EDITOR_LABEL.id); | |
| INNER.setAttribute('aria-label', EDITOR_LABEL.textContent); // Was: "Rich Text Editor, main" | |
| EDITOR_BTN.addEventListener('click', ev => { | |
| ev.preventDefault(); | |
| editor.editing.view.focus(); | |
| // INNER.focus(); | |
| console.debug('Editor click:', ev); | |
| }); | |
| }) | |
| .catch(error => console.error('Editor error:', error )); | |
| const PLUGINS = ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName ); | |
| // console.debug('Plugins:', PLUGINS); | |
| </script> | |
| <pre> | |
| NDF, 15-Feb-2022. | |
| * https://cdn.ckeditor.com/#ckeditor5; | |
| * https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html; | |
| * https://ckeditor.com/docs/ckeditor5/latest/features/keyboard-support.html; | |
| * https://github.com/ckeditor/ckeditor5; | |
| * https://ckeditor.com/docs/ckeditor4/latest/guide/dev_a11y.html#keyboard-access; | |
| * https://ckeditor.com/docs/ckeditor4/latest/examples/tabindex.html | |
| </pre> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment