diff --git a/packages/rich-text-editor/test/a11y.common.js b/packages/rich-text-editor/test/a11y.common.js
index 1857968c71..743dee908d 100644
--- a/packages/rich-text-editor/test/a11y.common.js
+++ b/packages/rich-text-editor/test/a11y.common.js
@@ -21,16 +21,16 @@ describe('accessibility', () => {
const flushValueDebouncer = () => rte.__debounceSetValue && rte.__debounceSetValue.flush();
- beforeEach(async () => {
- rte = fixtureSync('');
- await nextRender();
- editor = rte._editor;
- buttons = Array.from(rte.shadowRoot.querySelectorAll(`[part=toolbar] button`));
- content = rte.shadowRoot.querySelector('[contenteditable]');
- announcer = rte.shadowRoot.querySelector('[aria-live=polite]');
- });
-
describe('screen readers', () => {
+ beforeEach(async () => {
+ rte = fixtureSync('');
+ await nextRender();
+ editor = rte._editor;
+ buttons = Array.from(rte.shadowRoot.querySelectorAll(`[part=toolbar] button`));
+ content = rte.shadowRoot.querySelector('[contenteditable]');
+ announcer = rte.shadowRoot.querySelector('[aria-live=polite]');
+ });
+
it('should have default tooltips for the buttons', () => {
buttons.forEach((button, index) => {
const expectedLabel = rte.i18n[Object.keys(rte.i18n)[index]];
@@ -94,6 +94,14 @@ describe('accessibility', () => {
});
describe('keyboard navigation', () => {
+ beforeEach(async () => {
+ rte = fixtureSync('');
+ await nextRender();
+ editor = rte._editor;
+ buttons = Array.from(rte.shadowRoot.querySelectorAll(`[part=toolbar] button`));
+ content = rte.shadowRoot.querySelector('[contenteditable]');
+ });
+
it('should have only one tabbable button in toolbar', () => {
const tabbables = rte.shadowRoot.querySelectorAll(`[part=toolbar] button:not([tabindex="-1"])`);
expect(tabbables.length).to.equal(1);
@@ -175,54 +183,6 @@ describe('accessibility', () => {
content.dispatchEvent(e);
});
- it('should move focus to next element after esc followed by tab are pressed', async () => {
- const wrapper = fixtureSync(`
-
-
-
`);
- await nextRender();
- const [rte, lastGlobalFocusable] = wrapper.children;
- editor = rte._editor;
- editor.focus();
- await sendKeys({ press: 'Escape' });
- await sendKeys({ press: 'Tab' });
- expect(document.activeElement).to.equal(lastGlobalFocusable);
- });
-
- it('should move focus to the first toolbar button after esc followed by shift-tab are pressed', async () => {
- editor.focus();
- await sendKeys({ press: 'Escape' });
- await sendKeys({ down: 'Shift' });
- await sendKeys({ press: 'Tab' });
- await sendKeys({ up: 'Shift' });
- expect(getDeepActiveElement()).to.equal(buttons[0]);
- });
-
- it('should restore default Tab behavior after multiple Esc and then Tab', async () => {
- const wrapper = fixtureSync(`
-
-
-
`);
- await nextRender();
- await nextRender();
- const [rte, lastGlobalFocusable] = wrapper.children;
- editor = rte._editor;
- editor.focus();
- // Hitting Escape multiple times and Tab should move focus to next element
- await sendKeys({ press: 'Escape' });
- await sendKeys({ press: 'Escape' });
- await sendKeys({ press: 'Tab' });
- expect(document.activeElement).to.equal(lastGlobalFocusable);
-
- // Checking that default Tab behavior is restored
- editor.focus();
- await sendKeys({ press: 'Tab' });
- if (rte.__debounceSetValue) {
- rte.__debounceSetValue.flush();
- }
- expect(rte.htmlValue).to.equal('\t
');
- });
-
it('should change indentation and prevent shift-tab keydown in the code block', () => {
rte.value = '[{"insert":" foo"},{"attributes":{"code-block":true},"insert":"\\n"}]';
editor.focus();
@@ -262,4 +222,49 @@ describe('accessibility', () => {
down(content);
});
});
+
+ describe('Tab behavior', () => {
+ let lastGlobalFocusable;
+
+ beforeEach(async () => {
+ [rte, lastGlobalFocusable] = fixtureSync(
+ `
+
+
+
`,
+ ).children;
+ await nextRender();
+ buttons = Array.from(rte.shadowRoot.querySelectorAll(`[part=toolbar] button`));
+ editor = rte._editor;
+ editor.focus();
+ });
+
+ it('should move focus to next element after esc followed by tab are pressed', async () => {
+ await sendKeys({ press: 'Escape' });
+ await sendKeys({ press: 'Tab' });
+ expect(document.activeElement).to.equal(lastGlobalFocusable);
+ });
+
+ it('should move focus to the first toolbar button after esc followed by shift-tab are pressed', async () => {
+ await sendKeys({ press: 'Escape' });
+ await sendKeys({ down: 'Shift' });
+ await sendKeys({ press: 'Tab' });
+ await sendKeys({ up: 'Shift' });
+ expect(getDeepActiveElement()).to.equal(buttons[0]);
+ });
+
+ it('should restore default Tab behavior after multiple Esc and then Tab', async () => {
+ // Hitting Escape multiple times and Tab should move focus to next element
+ await sendKeys({ press: 'Escape' });
+ await sendKeys({ press: 'Escape' });
+ await sendKeys({ press: 'Tab' });
+ expect(document.activeElement).to.equal(lastGlobalFocusable);
+
+ // Checking that default Tab behavior is restored
+ editor.focus();
+ await sendKeys({ press: 'Tab' });
+ flushValueDebouncer();
+ expect(rte.htmlValue).to.equal('\t
');
+ });
+ });
});