@pie-lib/editable-html-tip-tap 2.1.19 → 2.1.20-beta.10

package/src/__tests__/EditableHtml.test.jsx

@@ -11,7 +11,6 @@ jest.mock('@tiptap/react', () => ({
     const mockEditor = {
       getHTML: jest.fn(() => '<p>test content</p>'),
       setEditable: jest.fn(),
-      setOptions: jest.fn(),
       commands: {
         setContent: jest.fn(),
       },
@@ -586,83 +585,4 @@ describe('EditableHtml', () => {
       }).not.toThrow();
     });
   });
-
-  describe('spellCheck', () => {
-    const lastEditorAttributes = () => {
-      const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
-
-      return editorConfig.editorProps.attributes;
-    };
-
-    it('disables browser spellcheck on the contenteditable when spellCheck is false', async () => {
-      render(<EditableHtml {...defaultProps} spellCheck={false} />);
-
-      await waitFor(() => {
-        expect(useEditor).toHaveBeenCalled();
-      });
-
-      expect(lastEditorAttributes()).toEqual({
-        role: 'textbox',
-        'data-pie-editor': 'true',
-        spellcheck: 'false',
-        autocorrect: 'off',
-        autocapitalize: 'off',
-      });
-    });
-
-    it('enables browser spellcheck when spellCheck is true', async () => {
-      render(<EditableHtml {...defaultProps} spellCheck={true} />);
-
-      await waitFor(() => {
-        expect(useEditor).toHaveBeenCalled();
-      });
-
-      expect(lastEditorAttributes()).toEqual({
-        role: 'textbox',
-        'data-pie-editor': 'true',
-        spellcheck: 'true',
-        autocorrect: 'on',
-        autocapitalize: 'on',
-      });
-    });
-
-    it('keeps the browser default when spellCheck is not provided', async () => {
-      render(<EditableHtml {...defaultProps} />);
-
-      await waitFor(() => {
-        expect(useEditor).toHaveBeenCalled();
-      });
-
-      expect(lastEditorAttributes().spellcheck).toEqual('true');
-    });
-
-    it('pushes spellCheck changes onto an existing editor', async () => {
-      const editorRef = jest.fn();
-      const { rerender } = render(<EditableHtml {...defaultProps} spellCheck={true} editorRef={editorRef} />);
-
-      await waitFor(() => {
-        expect(editorRef).toHaveBeenCalled();
-      });
-
-      rerender(<EditableHtml {...defaultProps} spellCheck={false} editorRef={editorRef} />);
-
-      await waitFor(() => {
-        expect(lastEditorAttributes().spellcheck).toEqual('false');
-      });
-
-      const editor = editorRef.mock.calls[editorRef.mock.calls.length - 1][0];
-
-      expect(editor.setOptions).toHaveBeenCalledWith({
-        editorProps: expect.objectContaining({
-          attributes: {
-            role: 'textbox',
-            'data-pie-editor': 'true',
-            spellcheck: 'false',
-            autocorrect: 'off',
-            autocapitalize: 'off',
-          },
-        }),
-      });
-    });
-  });
 });

package/src/components/EditableHtml.jsx

@@ -96,25 +96,6 @@ const cssVariables = {
                0px 3.618px 9.949px 0px rgba(0, 0, 0, .04)`,
 };
 
-// Attributes PIE puts on the editor's contenteditable element.
-//
-// ProseMirror rebuilds the element's attribute set from editorProps.attributes on every view
-// update and removes anything no longer listed, and Tiptap merges its own role="textbox" only in
-// createView - not into editor.options, which is what setOptions re-pushes. So every attribute we
-// want to survive has to be listed here. See PIE-1015.
-const editorAttributes = (spellCheckEnabled) => ({
-  // Tiptap's own attribute, re-declared so it survives setOptions. setEditable alone re-pushes
-  // editorProps on every mount, which is what removed it in 2.1.17.
-  role: 'textbox',
-  // PIE-owned hook for external consumers - see PIE-1016. Query [data-pie-editor], or
-  // [data-pie-editor][contenteditable="true"] to skip read-only renders.
-  'data-pie-editor': 'true',
-  // Without these the browser spellchecks the editor regardless of the spellCheck prop.
-  spellcheck: spellCheckEnabled ? 'true' : 'false',
-  autocorrect: spellCheckEnabled ? 'on' : 'off',
-  autocapitalize: spellCheckEnabled ? 'on' : 'off',
-});
-
 export const EditableHtml = (props) => {
   const { showParagraphs, separateParagraphs } = props.pluginProps || {};
   const [pendingImages, setPendingImages] = useState([]);
@@ -209,13 +190,6 @@ export const EditableHtml = (props) => {
         node: 'paragraph',
         notAfter: ['paragraph', 'div'],
       },
-      // StarterKit bundles the link extension, which turns anything that looks like a URL into
-      // a hyperlink as it is typed or pasted. See PIE-980 - we don't want that in any editor.
-      // The mark itself stays registered so links already in the markup keep round-tripping.
-      link: {
-        autolink: false,
-        linkOnPaste: false,
-      },
     }),
     ExtendedListItem,
     DivNode,
@@ -321,17 +295,11 @@ export const EditableHtml = (props) => {
     }),
   ];
 
-  // Callers that don't pass spellCheck keep the browser default (on), as they did with the
-  // slate-based editor. Players that have to default to off - extended-text-entry, see
-  // PIE-978 - resolve that in their controller and pass an explicit false.
-  const spellCheckEnabled = props.spellCheck !== false;
-
   const editor = useEditor(
     {
       extensions,
       immediatelyRender: false,
       editorProps: {
-        attributes: editorAttributes(spellCheckEnabled),
         handleKeyDown(view, event) {
           if (props.onKeyDown) {
             return props.onKeyDown(event);
@@ -375,26 +343,6 @@ export const EditableHtml = (props) => {
     editor?.setEditable(!props.disabled);
   }, [props.disabled, editor]);
 
-  // useEditor only re-applies options on its own when it is called with an empty dependency
-  // array, and this call site depends on charactersLimit, so a spellCheck change on a mounted
-  // editor has to be pushed in. The rest of editorProps stays as the editor already has it, and
-  // the attributes are merged rather than replaced so an attribute contributed by Tiptap or an
-  // extension can't be dropped the way role="textbox" was - see PIE-1015.
-  useEffect(() => {
-    if (!editor) {
-      return;
-    }
-
-    const currentEditorProps = editor.options?.editorProps;
-    const attributes = { ...currentEditorProps?.attributes, ...editorAttributes(spellCheckEnabled) };
-
-    if (currentEditorProps?.attributes?.spellcheck === attributes.spellcheck) {
-      return;
-    }
-
-    editor.setOptions({ editorProps: { ...currentEditorProps, attributes } });
-  }, [spellCheckEnabled, editor]);
-
   useEffect(() => {
     if (!editor) {
       return;

package/src/components/MenuBar.jsx

@@ -2,7 +2,6 @@ import React, { useMemo, useState } from 'react';
 import classNames from 'classnames';
 import { styled, useTheme } from '@mui/material/styles';
 import { NodeSelection } from 'prosemirror-state';
-import { color } from '@pie-lib/render-ui';
 
 import Bold from '@mui/icons-material/FormatBold';
 import Italic from '@mui/icons-material/FormatItalic';
@@ -35,15 +34,7 @@ import { CharacterIcon, CharacterPicker } from './CharacterPicker';
 import { DoneButton } from './common/done-button';
 
 const SuperscriptIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height="24px"
-    viewBox="0 0 24 24"
-    width="24px"
-    fill="none"
-    aria-hidden="true"
-    focusable="false"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="none">
     <path
       d="M22,7h-2v1h3v1h-4V7c0-0.55,0.45-1,1-1h2V5h-3V4h3c0.55,0,1,0.45,1,1v1C23,6.55,22.55,7,22,7z M5.88,20h2.66l3.4-5.42h0.12 l3.4,5.42h2.66l-4.65-7.27L17.81,6h-2.68l-3.07,4.99h-0.12L8.85,6H6.19l4.32,6.73L5.88,20z"
       fill="currentColor"
@@ -52,15 +43,7 @@ const SuperscriptIcon = () => (
 );
 
 const SubscriptIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height="24px"
-    viewBox="0 0 24 24"
-    width="24px"
-    fill="none"
-    aria-hidden="true"
-    focusable="false"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="none">
     <path
       d="M22,18h-2v1h3v1h-4v-2c0-0.55,0.45-1,1-1h2v-1h-3v-1h3c0.55,0,1,0.45,1,1v1C23,17.55,22.55,18,22,18z M5.88,18h2.66 l3.4-5.42h0.12l3.4,5.42h2.66l-4.65-7.27L17.81,4h-2.68l-3.07,4.99h-0.12L8.85,4H6.19l4.32,6.73L5.88,18z"
       fill="currentColor"
@@ -76,8 +59,6 @@ const HeadingIcon = () => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     style={{ width: '20px', height: '18px' }}
-    aria-hidden="true"
-    focusable="false"
   >
     <path
       d="M27 4V24H29C29.5 24 30 24.5 30 25V27C30 27.5625 29.5 28 29 28H19C18.4375 28 18 27.5625 18 27V25C18 24.5 18.4375 24 19 24H21V16H9V24H11C11.5 24 12 24.5 12 25V27C12 27.5625 11.5 28 11 28H1C0.4375 28 0 27.5625 0 27V25C0 24.5 0.4375 24 1 24H3V4H1C0.4375 4 0 3.5625 0 3V1C0 0.5 0.4375 0 1 0H11C11.5 0 12 0.5 12 1V3C12 3.5625 11.5 4 11 4H9V12H21V4H19C18.4375 4 18 3.5625 18 3V1C18 0.5 18.4375 0 19 0H29C29.5 0 30 0.5 30 1V3C30 3.5625 29.5 4 29 4H27Z"
@@ -185,7 +166,6 @@ function MenuBar({
     () => [
       {
         icon: <GridOn />,
-        label: 'Insert table',
         onClick: (editor) => editor.chain().focus().insertTable({ rows: 2, cols: 2, withHeaderRow: false }).run(),
         hidden: (state) => !activePlugins?.includes('table') || state.isTable,
         isActive: (state) => state.isTable,
@@ -193,7 +173,6 @@ function MenuBar({
       },
       {
         icon: <AddRow />,
-        label: 'Add table row',
         onClick: (editor) => editor.chain().focus().addRowAfter().run(),
         hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
         isActive: (state) => state.isTable,
@@ -201,7 +180,6 @@ function MenuBar({
       },
       {
         icon: <RemoveRow />,
-        label: 'Remove table row',
         onClick: (editor) => editor.chain().focus().deleteRow().run(),
         hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
         isActive: (state) => state.isTable,
@@ -209,7 +187,6 @@ function MenuBar({
       },
       {
         icon: <AddColumn />,
-        label: 'Add table column',
         onClick: (editor) => editor.chain().focus().addColumnAfter().run(),
         hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
         isActive: (state) => state.isTable,
@@ -217,7 +194,6 @@ function MenuBar({
       },
       {
         icon: <RemoveColumn />,
-        label: 'Remove table column',
         onClick: (editor) => editor.chain().focus().deleteColumn().run(),
         hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
         isActive: (state) => state.isTable,
@@ -225,7 +201,6 @@ function MenuBar({
       },
       {
         icon: <RemoveTable />,
-        label: 'Remove table',
         onClick: (editor) => editor.chain().focus().deleteTable().run(),
         hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
         isActive: (state) => state.isTable,
@@ -233,8 +208,6 @@ function MenuBar({
       },
       {
         icon: <BorderAll />,
-        label: 'Table borders',
-        toggle: true,
         onClick: (editor) => {
           const tableAttrs = editor.getAttributes('table');
 
@@ -251,8 +224,6 @@ function MenuBar({
       },
       {
         icon: <Bold />,
-        label: 'Bold',
-        toggle: true,
         onClick: (editor) => editor.chain().focus().toggleBold().run(),
         hidden: () => !activePlugins?.includes('bold'),
         isActive: (state) => state.isBold,
@@ -260,8 +231,6 @@ function MenuBar({
       },
       {
         icon: <Italic />,
-        label: 'Italic',
-        toggle: true,
         onClick: (editor) => editor.chain().focus().toggleItalic().run(),
         hidden: () => !activePlugins?.includes('italic'),
         isActive: (state) => state.isItalic,
@@ -269,8 +238,6 @@ function MenuBar({
       },
       {
         icon: <Strikethrough />,
-        label: 'Strikethrough',
-        toggle: true,
         onClick: (editor) => editor.chain().focus().toggleStrike().run(),
         hidden: () => !activePlugins?.includes('strikethrough'),
         isActive: (state) => state.isStrike,
@@ -278,8 +245,6 @@ function MenuBar({
       },
       {
         icon: <Code />,
-        label: 'Code',
-        toggle: true,
         onClick: (editor) => editor.chain().focus().toggleCode().run(),
         hidden: () => !activePlugins?.includes('code'),
         isActive: (state) => state.isCode,
@@ -287,118 +252,94 @@ function MenuBar({
       },
       {
         icon: <Underline />,
-        label: 'Underline',
-        toggle: true,
         onClick: (editor) => editor.chain().focus().toggleUnderline().run(),
         hidden: () => !activePlugins?.includes('underline'),
         isActive: (state) => state.isUnderline,
       },
       {
         icon: <SubscriptIcon />,
-        label: 'Subscript',
-        toggle: true,
         onClick: (editor) => editor.chain().focus().toggleSubscript().run(),
         hidden: () => !activePlugins?.includes('subscript'),
         isActive: (state) => state.isSubScript,
       },
       {
         icon: <SuperscriptIcon />,
-        label: 'Superscript',
-        toggle: true,
         onClick: (editor) => editor.chain().focus().toggleSuperscript().run(),
         hidden: () => !activePlugins?.includes('superscript'),
         isActive: (state) => state.isSuperScript,
       },
       {
         icon: <ImageIcon />,
-        label: 'Insert image',
         hidden: () => !activePlugins?.includes('image'),
         onClick: (editor) => editor.chain().focus().setImageUploadNode().run(),
       },
       {
         icon: <TheatersIcon />,
-        label: 'Insert video',
         hidden: () => !activePlugins?.includes('video'),
         onClick: (editor) => editor.chain().focus().insertMedia({ type: 'video' }).run(),
       },
       {
         icon: <VolumeUpIcon />,
-        label: 'Insert audio',
         hidden: () => !activePlugins?.includes('audio'),
         onClick: (editor) => editor.chain().focus().insertMedia({ type: 'audio', tag: 'audio' }).run(),
       },
       {
         icon: <CSSIcon />,
-        label: 'CSS classes',
         hidden: () => !activePlugins?.includes('css'),
         onClick: (editor) => editor.commands.openCSSClassDialog(),
       },
       {
         icon: <FormatQuote />,
-        label: 'Blockquote',
-        toggle: true,
         hidden: () => !activePlugins?.includes('blockquote'),
         onClick: (editor) => editor.chain().focus().toggleBlockquote().run(),
         isActive: (state) => state.isBlockquote,
       },
       {
         icon: <HeadingIcon />,
-        label: 'Heading',
-        toggle: true,
         hidden: () => !activePlugins?.includes('h3'),
         onClick: (editor) => editor.chain().focus().toggleHeadingParagraph().run(),
         isActive: (state) => state.isHeadingParagraph,
       },
       {
         icon: <Functions />,
-        label: 'Insert math',
         hidden: () => !activePlugins?.includes('math'),
         onClick: (editor) => editor.chain().focus().insertMath('').run(),
       },
       {
         icon: <CharacterIcon letter="ñ" />,
-        label: 'Spanish characters (ñ)',
         hidden: () => !activePlugins?.includes('languageCharacters'),
         onClick: () => setShowPicker(spanishConfig),
       },
       {
         icon: <CharacterIcon letter="€" />,
-        label: 'Special characters (€)',
         hidden: () => activePlugins?.filter((p) => p === 'languageCharacters').length !== 2,
         onClick: () => setShowPicker(specialConfig),
       },
       {
         icon: <TextAlignIcon editor={editor} />,
-        label: 'Text alignment',
         hidden: () => !activePlugins?.includes('text-align'),
         onClick: () => {},
       },
       {
         icon: <BulletedListIcon />,
-        label: 'Bulleted list',
-        toggle: true,
         hidden: () => !activePlugins?.includes('bulleted-list'),
         onClick: (editor) => editor.chain().focus().toggleBulletList().run(),
         isActive: (state) => state.isBulletList,
       },
       {
         icon: <NumberedListIcon />,
-        label: 'Numbered list',
-        toggle: true,
         hidden: () => !activePlugins?.includes('numbered-list'),
         onClick: (editor) => editor.chain().focus().toggleOrderedList().run(),
         isActive: (state) => state.isOrderedList,
       },
       {
         icon: <Undo />,
-        label: 'Undo',
         hidden: () => !activePlugins?.includes('undo'),
         onClick: (editor) => editor.chain().focus().undo().run(),
         isDisabled: (state) => !state.canUndo,
       },
       {
         icon: <Redo />,
-        label: 'Redo',
         hidden: () => !activePlugins?.includes('redo'),
         onClick: (editor) => editor.chain().focus().redo().run(),
         isDisabled: (state) => !state.canRedo,
@@ -424,7 +365,6 @@ function MenuBar({
                 onChange?.(editor.getHTML());
               }}
               aria-label="Delete response area"
-              title="Delete response area"
             >
               <Delete />
             </button>
@@ -443,11 +383,7 @@ function MenuBar({
                 return (
                   <button
                     key={index}
-                    type="button"
                     disabled={disabled}
-                    aria-label={btn.label}
-                    title={btn.label}
-                    aria-pressed={btn.toggle ? !!active : undefined}
                     onClick={(e) => {
                       e.preventDefault();
                       btn.onClick(editor);
@@ -461,9 +397,6 @@ function MenuBar({
           </div>
           {activePlugins?.includes('responseArea') && (
             <button
-              type="button"
-              aria-label="Insert response area"
-              title="Insert response area"
               onClick={() => {
                 editor.chain().focus().insertResponseArea(responseAreaProps.type).run();
               }}
@@ -529,11 +462,7 @@ const StyledMenuBar = (props) => {
   );
 };
 
-const StyledMenuBarRoot = styled('div')(() => ({
-  // A zero-height slot the toolbar overflows out of, so the toolbar rides normal flow while the
-  // root's geometry stays as it was.
-  height: 0,
-  overflow: 'visible',
+const StyledMenuBarRoot = styled('div')(({ theme }) => ({
   '& .defaultToolbar': {
     display: 'flex',
     width: '100%',
@@ -557,26 +486,20 @@ const StyledMenuBarRoot = styled('div')(() => ({
       height: '24px',
     },
     '&:hover': {
-      color: color.text(),
+      color: 'black',
     },
     '&:focus': {
-      /*
-       * A focus ring is the one thing a keyboard user cannot do without, so it takes
-       * the registered focus token rather than a grey. `--pie-button-focus-outline`
-       * measures at least 3.68:1 against every scheme's own background; MUI's
-       * grey[700] fell to 1.28:1 on yellow-on-navy.
-       */
-      outline: `2px solid ${color.buttonFocusOutline()}`,
+      outline: `2px solid ${theme.palette.grey[700]}`,
     },
   },
   '& .active': {
-    color: color.text(),
+    color: 'black',
   },
   '& .disabled': {
     opacity: 0.7,
     cursor: 'not-allowed',
     '& :hover': {
-      color: color.disabled(),
+      color: 'grey',
     },
   },
   '& .isActive': {
@@ -584,16 +507,13 @@ const StyledMenuBarRoot = styled('div')(() => ({
     color: 'var(--white)',
   },
   '& .toolbar': {
-    // Offset from its own in-flow position: no containing block and no static position to resolve,
-    // either of which a lockdown browser extension can get wrong as the editor grows.
-    position: 'relative',
-    top: '5px',
+    position: 'absolute',
     zIndex: 20,
     cursor: 'pointer',
     justifyContent: 'space-between',
     background: 'var(--editable-html-toolbar-bg, #efefef)',
     minWidth: '280px',
-    margin: 0,
+    margin: '5px 0 0 0',
     padding: '2px',
     boxShadow:
       '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
@@ -606,8 +526,6 @@ const StyledMenuBarRoot = styled('div')(() => ({
     minWidth: '265px',
   },
   '& .toolbarTop': {
-    // Anchored to the root's top, which never depended on the editor's height.
-    position: 'absolute',
     top: '-45px',
   },
   '& .toolbarRight': {

package/src/components/TiptapContainer.jsx

@@ -89,14 +89,14 @@ const StyledRoot = styled('div', {
     backgroundColor: color.background(),
   },
   '& table:not([border="1"]) tr': {
-    borderTop: `1px solid ${color.tableGridLight()}`,
+    borderTop: '1px solid #dfe2e5',
   },
   '& td, th': {
     padding: '.6em 1em',
     textAlign: 'center',
   },
   '& table:not([border="1"]) td, th': {
-    border: `1px solid ${color.tableGridLight()}`,
+    border: '1px solid #dfe2e5',
   },
   ...(error && {
     border: `2px solid ${theme.palette.error.main} !important`,

package/src/components/__tests__/MenuBar.test.jsx

@@ -2,27 +2,21 @@ import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import StyledMenuBar from '../MenuBar';
 
-// flipped to false by the accessibility tests to render the toolbar in its disabled state
-let mockCanRunCommands = true;
-// node/mark types the accessibility tests want the editor state to report as active
-let mockActiveTypes = [];
-
 jest.mock('@tiptap/react', () => ({
   EditorContent: ({ editor }) => <div data-testid="editor-content" />,
   useEditorState: ({ selector }) => {
-    const can = () => ({ run: jest.fn(() => mockCanRunCommands) });
     const mockEditor = {
-      isActive: jest.fn((name) => mockActiveTypes.includes(name)),
+      isActive: jest.fn(() => false),
       can: jest.fn(() => ({
         chain: jest.fn(() => ({
-          toggleBold: can,
-          insertTable: can,
-          toggleItalic: can,
-          toggleStrike: can,
-          toggleCode: can,
-          unsetAllMarks: can,
-          undo: can,
-          redo: can,
+          toggleBold: jest.fn(() => ({ run: jest.fn(() => true) })),
+          insertTable: jest.fn(() => ({ run: jest.fn(() => true) })),
+          toggleItalic: jest.fn(() => ({ run: jest.fn(() => true) })),
+          toggleStrike: jest.fn(() => ({ run: jest.fn(() => true) })),
+          toggleCode: jest.fn(() => ({ run: jest.fn(() => true) })),
+          unsetAllMarks: jest.fn(() => ({ run: jest.fn(() => true) })),
+          undo: jest.fn(() => ({ run: jest.fn(() => true) })),
+          redo: jest.fn(() => ({ run: jest.fn(() => true) })),
         })),
       })),
       getAttributes: jest.fn(() => ({ border: '1' })),
@@ -253,86 +247,4 @@ describe('StyledMenuBar', () => {
     const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['table', 'bold', 'italic']} />);
     expect(container).toBeInTheDocument();
   });
-  describe('accessible names', () => {
-    const allPlugins = [
-      'table',
-      'bold',
-      'italic',
-      'strikethrough',
-      'code',
-      'underline',
-      'subscript',
-      'superscript',
-      'image',
-      'video',
-      'audio',
-      'css',
-      'blockquote',
-      'h3',
-      'math',
-      'languageCharacters',
-      'bulleted-list',
-      'numbered-list',
-      'undo',
-      'redo',
-      'responseArea',
-    ];
-
-    const accessibleName = (button) => button.getAttribute('aria-label') || button.textContent.trim();
-
-    afterEach(() => {
-      mockCanRunCommands = true;
-      mockActiveTypes = [];
-    });
-
-    it('gives every toolbar button an accessible name', () => {
-      const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={allPlugins} />);
-      const buttons = Array.from(container.querySelectorAll('button'));
-
-      expect(buttons.length).toBeGreaterThan(0);
-      buttons.forEach((button) => expect(accessibleName(button)).not.toEqual(''));
-    });
-
-    it('keeps accessible names on disabled buttons', () => {
-      mockCanRunCommands = false;
-
-      const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={allPlugins} />);
-      const disabled = Array.from(container.querySelectorAll('button[disabled]'));
-
-      expect(disabled.length).toBeGreaterThan(0);
-      disabled.forEach((button) => expect(accessibleName(button)).not.toEqual(''));
-    });
-
-    it('labels the formatting and history buttons', () => {
-      const { getByLabelText } = render(<StyledMenuBar {...defaultProps} activePlugins={allPlugins} />);
-
-      ['Bold', 'Italic', 'Underline', 'Insert table', 'Undo', 'Redo'].forEach((label) =>
-        expect(getByLabelText(label)).toBeInTheDocument(),
-      );
-    });
-
-    it('labels the table buttons', () => {
-      mockActiveTypes = ['table'];
-
-      const { getByLabelText } = render(<StyledMenuBar {...defaultProps} activePlugins={allPlugins} />);
-
-      ['Add table row', 'Remove table row', 'Add table column', 'Remove table column', 'Remove table'].forEach(
-        (label) => expect(getByLabelText(label)).toBeInTheDocument(),
-      );
-      expect(getByLabelText('Table borders')).toHaveAttribute('aria-pressed', 'true');
-    });
-
-    it('labels the response area insert button', () => {
-      const { getByLabelText } = render(<StyledMenuBar {...defaultProps} activePlugins={['responseArea']} />);
-      expect(getByLabelText('Insert response area')).toBeInTheDocument();
-    });
-
-    it('exposes toggle state via aria-pressed on mark buttons', () => {
-      const { getByLabelText } = render(<StyledMenuBar {...defaultProps} activePlugins={allPlugins} />);
-
-      expect(getByLabelText('Bold')).toHaveAttribute('aria-pressed', 'false');
-      // one-shot actions are not toggles, so they must not report a pressed state
-      expect(getByLabelText('Undo')).not.toHaveAttribute('aria-pressed');
-    });
-  });
 });