@pie-lib/editable-html-tip-tap 2.1.12 → 2.1.14

package/lib/components/respArea/MathTemplated.js.map

@@ -1 +1 @@
-{"version":3,"file":"MathTemplated.js","names":["_react","_interopRequireDefault","require","_propTypes","_react2","_mathInput","_styles","StyledSpanContainer","styled","display","border","margin","cursor","alignItems","justifyContent","minWidth","minHeight","height","StyledResponseBox","_ref","theme","background","palette","grey","color","borderRight","boxSizing","overflow","fontSize","fontFamily","padding","StyledMathBlock","flex","backgroundColor","verticalAlign","borderTop","marginLeft","marginTop","paddingTop","lineHeight","top","left","position","right","MathTemplated","props","node","options","selected","attributes","attrs","value","index","keyToDisplay","concat","parseInt","createElement","NodeViewWrapper","className","style","mq","Static","latex","propTypes","PropTypes","object","string","_default","exports"],"sources":["../../../src/components/respArea/MathTemplated.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { NodeViewWrapper } from '@tiptap/react';\nimport { mq } from '@pie-lib/math-input';\nimport { styled } from '@mui/material/styles';\n\nconst StyledSpanContainer = styled('span')(() => ({\n  display: 'inline-flex',\n  border: '1px solid #C0C3CF',\n  margin: '1px 5px',\n  cursor: 'pointer',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minWidth: '50px',\n  minHeight: '36px',\n  height: 'fit-content',\n}));\n\nconst StyledResponseBox = styled('div')(({ theme }) => ({\n  background: theme.palette.grey['A100'],\n  color: theme.palette.grey['A700'],\n  display: 'inline-flex',\n  borderRight: '2px solid #C0C3CF',\n  boxSizing: 'border-box',\n  overflow: 'hidden',\n  fontSize: '12px',\n  minHeight: '36px',\n  height: '100%',\n  alignItems: 'center',\n  fontFamily: 'Symbola, Times New Roman, serif',\n  padding: '0 2px',\n}));\n\nconst StyledMathBlock = styled('div')(() => ({\n  flex: 8,\n  color: 'var(--pie-text, black)',\n  padding: '4px !important',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: 'var(--pie-background, rgba(255, 255, 255, 0))',\n  '& > .mq-math-mode sup.mq-nthroot': {\n    fontSize: '70% !important',\n    verticalAlign: '1em !important',\n  },\n  '& > .mq-math-mode .mq-sqrt-stem': {\n    borderTop: '0.07em solid',\n    marginLeft: '-1.5px',\n    marginTop: '-2px !important',\n    paddingTop: '5px !important',\n  },\n  '& .mq-overarrow-inner': {\n    paddingTop: '0 !important',\n    border: 'none !important',\n  },\n  '& .mq-overarrow.mq-arrow-both': {\n    marginTop: '0px',\n    minWidth: '1.23em',\n    '& *': {\n      lineHeight: '1 !important',\n    },\n    '&:before': {\n      top: '-0.4em',\n      left: '-1px',\n    },\n    '&:after': {\n      top: '0px !important',\n      position: 'absolute !important',\n      right: '-2px',\n    },\n    '&.mq-empty:after': {\n      top: '-0.45em',\n    },\n  },\n  '& .mq-overarrow.mq-arrow-right': {\n    '&:before': {\n      top: '-0.4em',\n      right: '-1px',\n    },\n  },\n  '& .mq-overarrow-inner-right': {\n    display: 'none !important',\n  },\n  '& .mq-overarrow-inner-left': {\n    display: 'none !important',\n  },\n}));\nconst MathTemplated = (props) => {\n  const { node, options, selected } = props;\n  const { attrs: attributes } = node;\n  const { value, index } = attributes;\n\n  // add 1 to index to display R 1 instead of R 0\n  const keyToDisplay = `R ${parseInt(index) + 1}`;\n\n  // console.log({nodeProps.children})\n  return (\n    <NodeViewWrapper\n      className=\"math-templated\"\n      data-selected={selected}\n      style={{\n        display: 'inline-flex',\n        minHeight: '36px',\n        minWidth: '50px',\n        cursor: 'pointer',\n      }}\n    >\n      <StyledSpanContainer {...attributes}>\n        <StyledResponseBox>{keyToDisplay}</StyledResponseBox>\n        <StyledMathBlock>\n          <mq.Static latex={value} />\n        </StyledMathBlock>\n      </StyledSpanContainer>\n    </NodeViewWrapper>\n  );\n};\n\nMathTemplated.propTypes = {\n  attributes: PropTypes.object,\n  value: PropTypes.string,\n  keyToDisplay: PropTypes.string,\n};\n\nexport default MathTemplated;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAEA,IAAMK,mBAAmB,GAAG,IAAAC,cAAM,EAAC,MAAM,CAAC,CAAC;EAAA,OAAO;IAChDC,OAAO,EAAE,aAAa;IACtBC,MAAM,EAAE,mBAAmB;IAC3BC,MAAM,EAAE,SAAS;IACjBC,MAAM,EAAE,SAAS;IACjBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBC,QAAQ,EAAE,MAAM;IAChBC,SAAS,EAAE,MAAM;IACjBC,MAAM,EAAE;EACV,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMC,iBAAiB,GAAG,IAAAV,cAAM,EAAC,KAAK,CAAC,CAAC,UAAAW,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAAA,OAAQ;IACtDC,UAAU,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAAC,MAAM,CAAC;IACtCC,KAAK,EAAEJ,KAAK,CAACE,OAAO,CAACC,IAAI,CAAC,MAAM,CAAC;IACjCd,OAAO,EAAE,aAAa;IACtBgB,WAAW,EAAE,mBAAmB;IAChCC,SAAS,EAAE,YAAY;IACvBC,QAAQ,EAAE,QAAQ;IAClBC,QAAQ,EAAE,MAAM;IAChBZ,SAAS,EAAE,MAAM;IACjBC,MAAM,EAAE,MAAM;IACdJ,UAAU,EAAE,QAAQ;IACpBgB,UAAU,EAAE,iCAAiC;IAC7CC,OAAO,EAAE;EACX,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMC,eAAe,GAAG,IAAAvB,cAAM,EAAC,KAAK,CAAC,CAAC;EAAA,OAAO;IAC3CwB,IAAI,EAAE,CAAC;IACPR,KAAK,EAAE,wBAAwB;IAC/BM,OAAO,EAAE,gBAAgB;IACzBrB,OAAO,EAAE,MAAM;IACfI,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBmB,eAAe,EAAE,+CAA+C;IAChE,kCAAkC,EAAE;MAClCL,QAAQ,EAAE,gBAAgB;MAC1BM,aAAa,EAAE;IACjB,CAAC;IACD,iCAAiC,EAAE;MACjCC,SAAS,EAAE,cAAc;MACzBC,UAAU,EAAE,QAAQ;MACpBC,SAAS,EAAE,iBAAiB;MAC5BC,UAAU,EAAE;IACd,CAAC;IACD,uBAAuB,EAAE;MACvBA,UAAU,EAAE,cAAc;MAC1B5B,MAAM,EAAE;IACV,CAAC;IACD,+BAA+B,EAAE;MAC/B2B,SAAS,EAAE,KAAK;MAChBtB,QAAQ,EAAE,QAAQ;MAClB,KAAK,EAAE;QACLwB,UAAU,EAAE;MACd,CAAC;MACD,UAAU,EAAE;QACVC,GAAG,EAAE,QAAQ;QACbC,IAAI,EAAE;MACR,CAAC;MACD,SAAS,EAAE;QACTD,GAAG,EAAE,gBAAgB;QACrBE,QAAQ,EAAE,qBAAqB;QAC/BC,KAAK,EAAE;MACT,CAAC;MACD,kBAAkB,EAAE;QAClBH,GAAG,EAAE;MACP;IACF,CAAC;IACD,gCAAgC,EAAE;MAChC,UAAU,EAAE;QACVA,GAAG,EAAE,QAAQ;QACbG,KAAK,EAAE;MACT;IACF,CAAC;IACD,6BAA6B,EAAE;MAC7BlC,OAAO,EAAE;IACX,CAAC;IACD,4BAA4B,EAAE;MAC5BA,OAAO,EAAE;IACX;EACF,CAAC;AAAA,CAAC,CAAC;AACH,IAAMmC,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAK,EAAK;EAC/B,IAAQC,IAAI,GAAwBD,KAAK,CAAjCC,IAAI;IAAEC,OAAO,GAAeF,KAAK,CAA3BE,OAAO;IAAEC,QAAQ,GAAKH,KAAK,CAAlBG,QAAQ;EAC/B,IAAeC,UAAU,GAAKH,IAAI,CAA1BI,KAAK;EACb,IAAQC,KAAK,GAAYF,UAAU,CAA3BE,KAAK;IAAEC,KAAK,GAAKH,UAAU,CAApBG,KAAK;;EAEpB;EACA,IAAMC,YAAY,QAAAC,MAAA,CAAQC,QAAQ,CAACH,KAAK,CAAC,GAAG,CAAC,CAAE;;EAE/C;EACA,oBACEpD,MAAA,YAAAwD,aAAA,CAACpD,OAAA,CAAAqD,eAAe;IACdC,SAAS,EAAC,gBAAgB;IAC1B,iBAAeV,QAAS;IACxBW,KAAK,EAAE;MACLlD,OAAO,EAAE,aAAa;MACtBO,SAAS,EAAE,MAAM;MACjBD,QAAQ,EAAE,MAAM;MAChBH,MAAM,EAAE;IACV;EAAE,gBAEFZ,MAAA,YAAAwD,aAAA,CAACjD,mBAAmB,EAAK0C,UAAU,eACjCjD,MAAA,YAAAwD,aAAA,CAACtC,iBAAiB,QAAEmC,YAAgC,CAAC,eACrDrD,MAAA,YAAAwD,aAAA,CAACzB,eAAe,qBACd/B,MAAA,YAAAwD,aAAA,CAACnD,UAAA,CAAAuD,EAAE,CAACC,MAAM;IAACC,KAAK,EAAEX;EAAM,CAAE,CACX,CACE,CACN,CAAC;AAEtB,CAAC;AAEDP,aAAa,CAACmB,SAAS,GAAG;EACxBd,UAAU,EAAEe,qBAAS,CAACC,MAAM;EAC5Bd,KAAK,EAAEa,qBAAS,CAACE,MAAM;EACvBb,YAAY,EAAEW,qBAAS,CAACE;AAC1B,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEaxB,aAAa","ignoreList":[]}
+{"version":3,"file":"MathTemplated.js","names":["_react","_interopRequireDefault","require","_propTypes","_react2","_mathInput","_styles","_renderUi","StyledSpanContainer","styled","display","border","concat","color","margin","cursor","alignItems","justifyContent","minWidth","minHeight","height","StyledResponseBox","background","backgroundDark","text","borderRight","boxSizing","overflow","fontSize","fontFamily","padding","StyledMathBlock","flex","backgroundColor","verticalAlign","borderTop","marginLeft","marginTop","paddingTop","lineHeight","top","left","position","right","MathTemplated","props","node","options","selected","attributes","attrs","value","index","keyToDisplay","parseInt","createElement","NodeViewWrapper","className","style","mq","Static","latex","propTypes","PropTypes","object","string","_default","exports"],"sources":["../../../src/components/respArea/MathTemplated.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { NodeViewWrapper } from '@tiptap/react';\nimport { mq } from '@pie-lib/math-input';\nimport { styled } from '@mui/material/styles';\nimport { color } from '@pie-lib/render-ui';\n\nconst StyledSpanContainer = styled('span')(() => ({\n  display: 'inline-flex',\n  /*\n   * #C0C3CF is `--pie-blue-grey-300`'s default value, but that token is a fill: it\n   * measures 1.00:1 against black-on-rose's own background. The box outline is what\n   * marks the response slot in running text, so it takes the stroke token instead.\n   */\n  border: `1px solid ${color.border()}`,\n  margin: '1px 5px',\n  cursor: 'pointer',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minWidth: '50px',\n  minHeight: '36px',\n  height: 'fit-content',\n}));\n\nconst StyledResponseBox = styled('div')(() => ({\n  // Fill and ink move together so the label stays legible on whatever the fill becomes.\n  background: color.backgroundDark(),\n  color: color.text(),\n  display: 'inline-flex',\n  borderRight: `2px solid ${color.border()}`,\n  boxSizing: 'border-box',\n  overflow: 'hidden',\n  fontSize: '12px',\n  minHeight: '36px',\n  height: '100%',\n  alignItems: 'center',\n  fontFamily: 'Symbola, Times New Roman, serif',\n  padding: '0 2px',\n}));\n\nconst StyledMathBlock = styled('div')(() => ({\n  flex: 8,\n  color: 'var(--pie-text, black)',\n  padding: '4px !important',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: 'var(--pie-background, rgba(255, 255, 255, 0))',\n  '& > .mq-math-mode sup.mq-nthroot': {\n    fontSize: '70% !important',\n    verticalAlign: '1em !important',\n  },\n  '& > .mq-math-mode .mq-sqrt-stem': {\n    borderTop: '0.07em solid',\n    marginLeft: '-1.5px',\n    marginTop: '-2px !important',\n    paddingTop: '5px !important',\n  },\n  '& .mq-overarrow-inner': {\n    paddingTop: '0 !important',\n    border: 'none !important',\n  },\n  '& .mq-overarrow.mq-arrow-both': {\n    marginTop: '0px',\n    minWidth: '1.23em',\n    '& *': {\n      lineHeight: '1 !important',\n    },\n    '&:before': {\n      top: '-0.4em',\n      left: '-1px',\n    },\n    '&:after': {\n      top: '0px !important',\n      position: 'absolute !important',\n      right: '-2px',\n    },\n    '&.mq-empty:after': {\n      top: '-0.45em',\n    },\n  },\n  '& .mq-overarrow.mq-arrow-right': {\n    '&:before': {\n      top: '-0.4em',\n      right: '-1px',\n    },\n  },\n  '& .mq-overarrow-inner-right': {\n    display: 'none !important',\n  },\n  '& .mq-overarrow-inner-left': {\n    display: 'none !important',\n  },\n}));\nconst MathTemplated = (props) => {\n  const { node, options, selected } = props;\n  const { attrs: attributes } = node;\n  const { value, index } = attributes;\n\n  // add 1 to index to display R 1 instead of R 0\n  const keyToDisplay = `R ${parseInt(index) + 1}`;\n\n  // console.log({nodeProps.children})\n  return (\n    <NodeViewWrapper\n      className=\"math-templated\"\n      data-selected={selected}\n      style={{\n        display: 'inline-flex',\n        minHeight: '36px',\n        minWidth: '50px',\n        cursor: 'pointer',\n      }}\n    >\n      <StyledSpanContainer {...attributes}>\n        <StyledResponseBox>{keyToDisplay}</StyledResponseBox>\n        <StyledMathBlock>\n          <mq.Static latex={value} />\n        </StyledMathBlock>\n      </StyledSpanContainer>\n    </NodeViewWrapper>\n  );\n};\n\nMathTemplated.propTypes = {\n  attributes: PropTypes.object,\n  value: PropTypes.string,\n  keyToDisplay: PropTypes.string,\n};\n\nexport default MathTemplated;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.1.12",
+  "version": "2.1.14",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -16,11 +16,11 @@
     "@dnd-kit/utilities": "3.2.2",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "^4.1.0",
+    "@pie-lib/drag": "^4.1.1",
     "@pie-lib/math-input": "^8.1.1",
     "@pie-lib/math-rendering": "^5.1.0",
-    "@pie-lib/math-toolbar": "^3.0.6",
-    "@pie-lib/render-ui": "^6.1.3",
+    "@pie-lib/math-toolbar": "^3.0.7",
+    "@pie-lib/render-ui": "^7.0.0",
     "@tiptap/core": "3.20.0",
     "@tiptap/extension-character-count": "3.20.0",
     "@tiptap/extension-color": "3.20.0",
@@ -59,6 +59,6 @@
   "peerDependencies": {
     "react": "^18.2.0"
   },
-  "gitHead": "dc45c018c177d56e698305076fd5023baa19d6ed",
+  "gitHead": "e6b46157ab321f4488117149f21783511f30970c",
   "scripts": {}
 }

package/src/components/MenuBar.jsx

@@ -2,6 +2,7 @@ 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';
@@ -34,7 +35,15 @@ 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">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="24px"
+    viewBox="0 0 24 24"
+    width="24px"
+    fill="none"
+    aria-hidden="true"
+    focusable="false"
+  >
     <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"
@@ -43,7 +52,15 @@ const SuperscriptIcon = () => (
 );
 
 const SubscriptIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="none">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="24px"
+    viewBox="0 0 24 24"
+    width="24px"
+    fill="none"
+    aria-hidden="true"
+    focusable="false"
+  >
     <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"
@@ -59,6 +76,8 @@ 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"
@@ -166,6 +185,7 @@ 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,
@@ -173,6 +193,7 @@ 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,
@@ -180,6 +201,7 @@ 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,
@@ -187,6 +209,7 @@ 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,
@@ -194,6 +217,7 @@ 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,
@@ -201,6 +225,7 @@ function MenuBar({
       },
       {
         icon: <RemoveTable />,
+        label: 'Remove table',
         onClick: (editor) => editor.chain().focus().deleteTable().run(),
         hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
         isActive: (state) => state.isTable,
@@ -208,6 +233,8 @@ function MenuBar({
       },
       {
         icon: <BorderAll />,
+        label: 'Table borders',
+        toggle: true,
         onClick: (editor) => {
           const tableAttrs = editor.getAttributes('table');
 
@@ -224,6 +251,8 @@ function MenuBar({
       },
       {
         icon: <Bold />,
+        label: 'Bold',
+        toggle: true,
         onClick: (editor) => editor.chain().focus().toggleBold().run(),
         hidden: () => !activePlugins?.includes('bold'),
         isActive: (state) => state.isBold,
@@ -231,6 +260,8 @@ function MenuBar({
       },
       {
         icon: <Italic />,
+        label: 'Italic',
+        toggle: true,
         onClick: (editor) => editor.chain().focus().toggleItalic().run(),
         hidden: () => !activePlugins?.includes('italic'),
         isActive: (state) => state.isItalic,
@@ -238,6 +269,8 @@ function MenuBar({
       },
       {
         icon: <Strikethrough />,
+        label: 'Strikethrough',
+        toggle: true,
         onClick: (editor) => editor.chain().focus().toggleStrike().run(),
         hidden: () => !activePlugins?.includes('strikethrough'),
         isActive: (state) => state.isStrike,
@@ -245,6 +278,8 @@ function MenuBar({
       },
       {
         icon: <Code />,
+        label: 'Code',
+        toggle: true,
         onClick: (editor) => editor.chain().focus().toggleCode().run(),
         hidden: () => !activePlugins?.includes('code'),
         isActive: (state) => state.isCode,
@@ -252,94 +287,118 @@ 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,
@@ -365,6 +424,7 @@ function MenuBar({
                 onChange?.(editor.getHTML());
               }}
               aria-label="Delete response area"
+              title="Delete response area"
             >
               <Delete />
             </button>
@@ -383,7 +443,11 @@ 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);
@@ -397,6 +461,9 @@ 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();
               }}
@@ -462,7 +529,7 @@ const StyledMenuBar = (props) => {
   );
 };
 
-const StyledMenuBarRoot = styled('div')(({ theme }) => ({
+const StyledMenuBarRoot = styled('div')(() => ({
   '& .defaultToolbar': {
     display: 'flex',
     width: '100%',
@@ -486,20 +553,26 @@ const StyledMenuBarRoot = styled('div')(({ theme }) => ({
       height: '24px',
     },
     '&:hover': {
-      color: 'black',
+      color: color.text(),
     },
     '&:focus': {
-      outline: `2px solid ${theme.palette.grey[700]}`,
+      /*
+       * 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()}`,
     },
   },
   '& .active': {
-    color: 'black',
+    color: color.text(),
   },
   '& .disabled': {
     opacity: 0.7,
     cursor: 'not-allowed',
     '& :hover': {
-      color: 'grey',
+      color: color.disabled(),
     },
   },
   '& .isActive': {

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

@@ -2,21 +2,27 @@ 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(() => false),
+      isActive: jest.fn((name) => mockActiveTypes.includes(name)),
       can: jest.fn(() => ({
         chain: jest.fn(() => ({
-          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) })),
+          toggleBold: can,
+          insertTable: can,
+          toggleItalic: can,
+          toggleStrike: can,
+          toggleCode: can,
+          unsetAllMarks: can,
+          undo: can,
+          redo: can,
         })),
       })),
       getAttributes: jest.fn(() => ({ border: '1' })),
@@ -247,4 +253,86 @@ 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');
+    });
+  });
 });

package/src/components/__tests__/toolbar-buttons.test.jsx

@@ -1,7 +1,20 @@
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
+import { color } from '@pie-lib/render-ui';
 import { Button, MarkButton, RawButton, RawMarkButton } from '../common/toolbar-buttons';
 
+/*
+ * jsdom does not resolve custom properties, so toHaveStyle() normalises `var(--x, y)`
+ * to the empty string and cannot compare it. These buttons now take their ink from
+ * `--pie-text`, so assert against the rule emotion emitted for the element's class.
+ */
+const declaredColor = (el) =>
+  Array.from(document.querySelectorAll('style'))
+    .flatMap((tag) => Array.from(tag.sheet?.cssRules || []))
+    .filter((rule) => Array.from(el.classList).some((c) => rule.selectorText?.includes(`.${c}`)))
+    .map((rule) => rule.style?.color)
+    .find(Boolean);
+
 describe('RawButton', () => {
   it('renders without crashing', () => {
     const { container } = render(<RawButton onClick={jest.fn()}>Click me</RawButton>);
@@ -58,7 +71,7 @@ describe('RawButton', () => {
       </RawButton>,
     );
     const button = getByText('Active');
-    expect(button).toHaveStyle({ color: 'black' });
+    expect(declaredColor(button)).toBe(color.text());
   });
 
   it('applies disabled style when disabled is true', () => {
@@ -196,7 +209,7 @@ describe('RawMarkButton', () => {
       </RawMarkButton>,
     );
     const button = getByText('B');
-    expect(button).toHaveStyle({ color: 'black' });
+    expect(declaredColor(button)).toBe(color.text());
   });
 
   it('has aria-label from label prop', () => {

package/src/components/common/toolbar-buttons.jsx

@@ -2,11 +2,12 @@ import React from 'react';
 import debug from 'debug';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
+import { color } from '@pie-lib/render-ui';
 
 const StyledButton = styled('button', {
   shouldForwardProp: (prop) => !['active', 'disabled', 'extraStyles'].includes(prop),
-})(({ theme, active, disabled }) => ({
-  color: active ? 'black' : 'grey',
+})(({ active, disabled }) => ({
+  color: active ? color.text() : color.disabled(),
   display: 'inline-flex',
   padding: '2px',
   background: 'none',
@@ -18,10 +19,11 @@ const StyledButton = styled('button', {
     height: '24px',
   },
   '&:hover': {
-    color: disabled ? 'grey' : 'black',
+    color: disabled ? color.disabled() : color.text(),
   },
   '&:focus': {
-    outline: `2px solid ${theme.palette.grey[700]}`,
+    // See MenuBar: the focus ring takes the registered focus token, not a grey.
+    outline: `2px solid ${color.buttonFocusOutline()}`,
   },
   ...(disabled && {
     opacity: 0.7,

package/src/components/icons/TableIcons.jsx

@@ -10,7 +10,15 @@ const StyledPath = styled('path')({
 
 const SvgIcon = (Component) => {
   return (props) => (
-    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      focusable="false"
+    >
       <Component {...props} />
     </svg>
   );