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

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.1.14](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html-tip-tap@2.1.13...@pie-lib/editable-html-tip-tap@2.1.14) (2026-08-21)
+
+### Bug Fixes
+
+- **theming:** move the grey palette reads onto --pie-\* tokens PIE-856 ([9bbaf10](https://github.com/pie-framework/pie-lib/commit/9bbaf10ab25a050e4d1b727f84c7ad9fdc952f6a)), closes [#C0C3](https://github.com/pie-framework/pie-lib/issues/C0C3)
+
+## [2.1.13](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html-tip-tap@2.1.12...@pie-lib/editable-html-tip-tap@2.1.13) (2026-08-18)
+
+### Bug Fixes
+
+- **editable-html-tip-tap:** give toolbar buttons accessible names PIE-708 ([8cf0065](https://github.com/pie-framework/pie-lib/commit/8cf0065ba7ba684c5d51bcdee3cce8166b1cd8bc))
+
 ## [2.1.12](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html-tip-tap@2.1.11...@pie-lib/editable-html-tip-tap@2.1.12) (2026-08-13)
 
 **Note:** Version bump only for package @pie-lib/editable-html-tip-tap

package/lib/components/MenuBar.js

@@ -13,6 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _styles = require("@mui/material/styles");
 var _prosemirrorState = require("prosemirror-state");
+var _renderUi = require("@pie-lib/render-ui");
 var _FormatBold = _interopRequireDefault(require("@mui/icons-material/FormatBold"));
 var _FormatItalic = _interopRequireDefault(require("@mui/icons-material/FormatItalic"));
 var _FormatStrikethrough = _interopRequireDefault(require("@mui/icons-material/FormatStrikethrough"));
@@ -48,7 +49,9 @@ var SuperscriptIcon = function SuperscriptIcon() {
     height: "24px",
     viewBox: "0 0 24 24",
     width: "24px",
-    fill: "none"
+    fill: "none",
+    "aria-hidden": "true",
+    focusable: "false"
   }, /*#__PURE__*/_react["default"].createElement("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"
@@ -60,7 +63,9 @@ var SubscriptIcon = function SubscriptIcon() {
     height: "24px",
     viewBox: "0 0 24 24",
     width: "24px",
-    fill: "none"
+    fill: "none",
+    "aria-hidden": "true",
+    focusable: "false"
   }, /*#__PURE__*/_react["default"].createElement("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,7 +81,9 @@ var HeadingIcon = function HeadingIcon() {
     style: {
       width: '20px',
       height: '18px'
-    }
+    },
+    "aria-hidden": "true",
+    focusable: "false"
   }, /*#__PURE__*/_react["default"].createElement("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",
     fill: "currentColor"
@@ -173,6 +180,7 @@ function MenuBar(_ref) {
   var toolbarButtons = (0, _react.useMemo)(function () {
     return [{
       icon: /*#__PURE__*/_react["default"].createElement(_GridOn["default"], null),
+      label: 'Insert table',
       onClick: function onClick(editor) {
         return editor.chain().focus().insertTable({
           rows: 2,
@@ -191,6 +199,7 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_TableIcons.AddRow, null),
+      label: 'Add table row',
       onClick: function onClick(editor) {
         return editor.chain().focus().addRowAfter().run();
       },
@@ -205,6 +214,7 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_TableIcons.RemoveRow, null),
+      label: 'Remove table row',
       onClick: function onClick(editor) {
         return editor.chain().focus().deleteRow().run();
       },
@@ -219,6 +229,7 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_TableIcons.AddColumn, null),
+      label: 'Add table column',
       onClick: function onClick(editor) {
         return editor.chain().focus().addColumnAfter().run();
       },
@@ -233,6 +244,7 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_TableIcons.RemoveColumn, null),
+      label: 'Remove table column',
       onClick: function onClick(editor) {
         return editor.chain().focus().deleteColumn().run();
       },
@@ -247,6 +259,7 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_TableIcons.RemoveTable, null),
+      label: 'Remove table',
       onClick: function onClick(editor) {
         return editor.chain().focus().deleteTable().run();
       },
@@ -261,6 +274,8 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_BorderAll["default"], null),
+      label: 'Table borders',
+      toggle: true,
       onClick: function onClick(editor) {
         var tableAttrs = editor.getAttributes('table');
         var update = _objectSpread(_objectSpread({}, tableAttrs), {}, {
@@ -279,6 +294,8 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_FormatBold["default"], null),
+      label: 'Bold',
+      toggle: true,
       onClick: function onClick(editor) {
         return editor.chain().focus().toggleBold().run();
       },
@@ -293,6 +310,8 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_FormatItalic["default"], null),
+      label: 'Italic',
+      toggle: true,
       onClick: function onClick(editor) {
         return editor.chain().focus().toggleItalic().run();
       },
@@ -307,6 +326,8 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_FormatStrikethrough["default"], null),
+      label: 'Strikethrough',
+      toggle: true,
       onClick: function onClick(editor) {
         return editor.chain().focus().toggleStrike().run();
       },
@@ -321,6 +342,8 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_Code["default"], null),
+      label: 'Code',
+      toggle: true,
       onClick: function onClick(editor) {
         return editor.chain().focus().toggleCode().run();
       },
@@ -335,6 +358,8 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_FormatUnderlined["default"], null),
+      label: 'Underline',
+      toggle: true,
       onClick: function onClick(editor) {
         return editor.chain().focus().toggleUnderline().run();
       },
@@ -346,6 +371,8 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(SubscriptIcon, null),
+      label: 'Subscript',
+      toggle: true,
       onClick: function onClick(editor) {
         return editor.chain().focus().toggleSubscript().run();
       },
@@ -357,6 +384,8 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(SuperscriptIcon, null),
+      label: 'Superscript',
+      toggle: true,
       onClick: function onClick(editor) {
         return editor.chain().focus().toggleSuperscript().run();
       },
@@ -368,6 +397,7 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_Image["default"], null),
+      label: 'Insert image',
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('image'));
       },
@@ -376,6 +406,7 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_Theaters["default"], null),
+      label: 'Insert video',
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('video'));
       },
@@ -386,6 +417,7 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_VolumeUp["default"], null),
+      label: 'Insert audio',
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('audio'));
       },
@@ -397,6 +429,7 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_CssIcon["default"], null),
+      label: 'CSS classes',
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('css'));
       },
@@ -405,6 +438,8 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_FormatQuote["default"], null),
+      label: 'Blockquote',
+      toggle: true,
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('blockquote'));
       },
@@ -416,6 +451,8 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(HeadingIcon, null),
+      label: 'Heading',
+      toggle: true,
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('h3'));
       },
@@ -427,6 +464,7 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_Functions["default"], null),
+      label: 'Insert math',
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('math'));
       },
@@ -437,6 +475,7 @@ function MenuBar(_ref) {
       icon: /*#__PURE__*/_react["default"].createElement(_CharacterPicker.CharacterIcon, {
         letter: "\xF1"
       }),
+      label: 'Spanish characters (ñ)',
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('languageCharacters'));
       },
@@ -447,6 +486,7 @@ function MenuBar(_ref) {
       icon: /*#__PURE__*/_react["default"].createElement(_CharacterPicker.CharacterIcon, {
         letter: "\u20AC"
       }),
+      label: 'Special characters (€)',
       hidden: function hidden() {
         return (activePlugins === null || activePlugins === void 0 ? void 0 : activePlugins.filter(function (p) {
           return p === 'languageCharacters';
@@ -459,12 +499,15 @@ function MenuBar(_ref) {
       icon: /*#__PURE__*/_react["default"].createElement(_TextAlign["default"], {
         editor: editor
       }),
+      label: 'Text alignment',
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('text-align'));
       },
       onClick: function onClick() {}
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_FormatListBulleted["default"], null),
+      label: 'Bulleted list',
+      toggle: true,
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('bulleted-list'));
       },
@@ -476,6 +519,8 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_FormatListNumbered["default"], null),
+      label: 'Numbered list',
+      toggle: true,
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('numbered-list'));
       },
@@ -487,6 +532,7 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_Undo["default"], null),
+      label: 'Undo',
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('undo'));
       },
@@ -498,6 +544,7 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_Redo["default"], null),
+      label: 'Redo',
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('redo'));
       },
@@ -527,7 +574,8 @@ function MenuBar(_ref) {
       editor.chain().focus().deleteSelection().run();
       onChange === null || onChange === void 0 || onChange(editor.getHTML());
     },
-    "aria-label": "Delete response area"
+    "aria-label": "Delete response area",
+    title: "Delete response area"
   }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)))), !editorState.hideDefaultToolbar && /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.defaultToolbar,
     tabIndex: "1"
@@ -542,7 +590,11 @@ function MenuBar(_ref) {
     var active = (_btn$isActive = btn.isActive) === null || _btn$isActive === void 0 ? void 0 : _btn$isActive.call(btn, editorState);
     return /*#__PURE__*/_react["default"].createElement("button", {
       key: index,
+      type: "button",
       disabled: disabled,
+      "aria-label": btn.label,
+      title: btn.label,
+      "aria-pressed": btn.toggle ? !!active : undefined,
       onClick: function onClick(e) {
         e.preventDefault();
         btn.onClick(editor);
@@ -550,6 +602,9 @@ function MenuBar(_ref) {
       className: (0, _classnames["default"])(classes.button, (0, _defineProperty2["default"])({}, classes.active, active))
     }, btn.icon);
   })), (activePlugins === null || activePlugins === void 0 ? void 0 : activePlugins.includes('responseArea')) && /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    "aria-label": "Insert response area",
+    title: "Insert response area",
     onClick: function onClick() {
       editor.chain().focus().insertResponseArea(responseAreaProps.type).run();
     },
@@ -601,8 +656,7 @@ var StyledMenuBar = function StyledMenuBar(props) {
     classes: classes
   })));
 };
-var StyledMenuBarRoot = (0, _styles.styled)('div')(function (_ref4) {
-  var theme = _ref4.theme;
+var StyledMenuBarRoot = (0, _styles.styled)('div')(function () {
   return {
     '& .defaultToolbar': {
       display: 'flex',
@@ -627,20 +681,26 @@ var StyledMenuBarRoot = (0, _styles.styled)('div')(function (_ref4) {
         height: '24px'
       },
       '&:hover': {
-        color: 'black'
+        color: _renderUi.color.text()
       },
       '&:focus': {
-        outline: "2px solid ".concat(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 ".concat(_renderUi.color.buttonFocusOutline())
       }
     },
     '& .active': {
-      color: 'black'
+      color: _renderUi.color.text()
     },
     '& .disabled': {
       opacity: 0.7,
       cursor: 'not-allowed',
       '& :hover': {
-        color: 'grey'
+        color: _renderUi.color.disabled()
       }
     },
     '& .isActive': {