superdoc-dev · harbournick · Jun 5, 2025 · Jun 5, 2025 · Jun 5, 2025 · Jun 5, 2025
diff --git a/packages/super-editor/index.html b/packages/super-editor/index.html
@@ -6,7 +6,7 @@
     <title>Super Editor - Dev mode</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app" role="application"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/packages/super-editor/src/components/SuperEditor.vue b/packages/super-editor/src/components/SuperEditor.vue
@@ -208,7 +208,7 @@ onBeforeUnmount(() => {
       @click="handleSuperEditorClick"
       @mousedown="handleMarginClick"
     >
-      <div ref="editorElem" class="editor-element super-editor__element"></div>
+      <div ref="editorElem" class="editor-element super-editor__element" role="presentation"></div>
     </div>
 
     <div class="placeholder-editor" v-if="!editorReady">

diff --git a/packages/super-editor/src/components/toolbar/AlignmentButtons.vue b/packages/super-editor/src/components/toolbar/AlignmentButtons.vue
@@ -13,14 +13,42 @@ const select = (alignment) => {
 
 <template>
   <div class="alignment-buttons" :class="{ 'high-contrast': isHighContrastMode }">
-    <div class="button-icon" @click="select('left')" v-html="toolbarIcons.alignLeft" data-item="btn-textAlign-option">
+    <div 
+      class="button-icon" 
+      @click="select('left')" 
+      v-html="toolbarIcons.alignLeft" 
+      data-item="btn-textAlign-option"
+      role="menuitem"
+      aria-label="Align left"
+    >
     </div>
-    <div class="button-icon" @click="select('center')" v-html="toolbarIcons.alignCenter"
-      data-item="btn-textAlign-option"></div>
-    <div class="button-icon" @click="select('right')" v-html="toolbarIcons.alignRight" data-item="btn-textAlign-option">
+    <div 
+      class="button-icon"
+      @click="select('center')" 
+      v-html="toolbarIcons.alignCenter"
+
+      data-item="btn-textAlign-option" 
+      role="menuitem"
+      aria-label="Align center"
+    ></div>
+    <div
+      class="button-icon" 
+      @click="select('right')" 
+      v-html="toolbarIcons.alignRight" 
+      data-item="btn-textAlign-option" 
+      role="menuitem"
+      aria-label="Align right"
+    >
     </div>
-    <div class="button-icon" @click="select('justify')" v-html="toolbarIcons.alignJustify"
-      data-item="btn-textAlign-option"></div>
+    <div 
+      class="button-icon" 
+      @click="select('justify')" 
+      v-html="toolbarIcons.alignJustify"
+
+      data-item="btn-textAlign-option" 
+      role="menuitem"
+      aria-label="Justify"
+    ></div>
   </div>
 </template>
 

diff --git a/packages/super-editor/src/components/toolbar/ButtonGroup.vue b/packages/super-editor/src/components/toolbar/ButtonGroup.vue
@@ -21,6 +21,10 @@ const props = defineProps({
     type: String,
     default: 'left',
   },
+  fromOverflow: {
+    type: Boolean,
+    default: false,
+  }
 });
 
 const currentItem = ref(null);
@@ -91,13 +95,24 @@ const dropdownOptions = (item) => {
   });
 };
 
+const getDropdownAttributes = (option, item) => {
+  return {
+    role: 'menuitem',
+    ariaLabel: `${item.attributes.value.ariaLabel} - ${option.label}`,
+  };
+};
+
 const handleClickOutside = (e) => {
   closeDropdowns();
 };
 </script>
 
 <template>
-  <div :style="getPositionStyle" class="button-group">
+  <div 
+    :style="getPositionStyle" 
+    class="button-group"
+    role="group"
+  >
     <div v-for="item in toolbarItems" :key="item.id.value" :class="{
         narrow: item.isNarrow.value,
         wide: item.isWide.value,
@@ -106,11 +121,23 @@ const handleClickOutside = (e) => {
       <ToolbarSeparator v-if="isSeparator(item)" style="width: 20px" />
 
       <!-- Toolbar button -->
-      <n-dropdown v-if="isDropdown(item) && item.nestedOptions?.value?.length" :options="dropdownOptions(item)"
-        :trigger="item.disabled.value ? null : 'click'" :show="item.expand.value" size="medium" placement="bottom-start"
-        class="toolbar-button toolbar-dropdown sd-editor-toolbar-dropdown" :class="{ 'high-contrast': isHighContrastMode }"
-        @select="(key, option) => handleSelect(item, option)" @clickoutside="handleClickOutside"
-        :style="item.dropdownStyles.value">
+      <n-dropdown
+        v-if="isDropdown(item) && item.nestedOptions?.value?.length"
+        :options="dropdownOptions(item)"
+        :trigger="item.disabled.value ? null : 'click'"
+        :show="item.expand.value"
+        size="medium"
+        placement="bottom-start"
+        class="toolbar-button toolbar-dropdown sd-editor-toolbar-dropdown"
+        :class="{ 'high-contrast': isHighContrastMode }"
+        @select="(key, option) => handleSelect(item, option)"
+        @clickoutside="handleClickOutside"
+        :style="item.dropdownStyles.value"
+        :menu-props="() => ({
+          role: 'menu'
+        })"
+        :node-props="(option) => getDropdownAttributes(option, item)"
+      >
         <n-tooltip trigger="hover" :disabled="!item.tooltip?.value">
           <template #trigger>
             <ToolbarButton :toolbar-item="item" @textSubmit="handleToolbarButtonTextSubmit(item, $event)"
@@ -125,8 +152,12 @@ const handleClickOutside = (e) => {
 
       <n-tooltip trigger="hover" v-else-if="isButton(item)" class="sd-editor-toolbar-tooltip">
         <template #trigger>
-          <ToolbarButton :toolbar-item="item" @textSubmit="handleToolbarButtonTextSubmit(item, $event)"
-            @buttonClick="handleToolbarButtonClick(item)" />
+          <ToolbarButton
+            :toolbar-item="item"
+            :is-overflow-item="fromOverflow"
+            @textSubmit="handleToolbarButtonTextSubmit(item, $event)"
+            @buttonClick="handleToolbarButtonClick(item)"
+          />
         </template>
         <div v-if="item.tooltip">
           {{ item.tooltip }}

diff --git a/packages/super-editor/src/components/toolbar/DocumentMode.vue b/packages/super-editor/src/components/toolbar/DocumentMode.vue
@@ -19,8 +19,14 @@ const handleClick = (item) => {
 
 <template>
   <div class="document-mode" :class="{ 'high-contrast': isHighContrastMode }">
-    <div class="option-item" v-for="option in options" @click="handleClick(option)"
-      :class="{ disabled: option.disabled }" data-item="btn-documentMode-option">
+    <div
+      class="option-item"
+      v-for="option in options"
+      @click="handleClick(option)"
+      :class="{ disabled: option.disabled }"
+      data-item="btn-documentMode-option"
+      role="menuitem"
+    >
       <div class="document-mode-column icon-column">
         <div class="icon-column__icon" v-html="option.icon"></div>
       </div>

diff --git a/packages/super-editor/src/components/toolbar/IconGrid.vue b/packages/super-editor/src/components/toolbar/IconGrid.vue
@@ -33,6 +33,8 @@ const handleSelect = (option) => {
     <div 
       v-if="hasNoneIcon"
       class="none-option"
+      role="menuitem"
+      aria-label="Clear color selection"
       @click="handleSelect('none')"
     >
       <span 

diff --git a/packages/super-editor/src/components/toolbar/IconGridRow.vue b/packages/super-editor/src/components/toolbar/IconGridRow.vue
@@ -35,11 +35,18 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div class="option-row" v-for="(row, rowIndex) in icons" :key="rowIndex">
+  <div 
+    class="option-row" 
+    v-for="(row, rowIndex) in icons" 
+    :key="rowIndex"
+    role="group"
+  >
     <div
       class="option"
       v-for="(option, optionIndex) in row"
       :key="optionIndex"
+      :aria-label="option.label"
+      role="menuitem"
       @click.stop.prevent="handleClick(option)"
     >
       <div

diff --git a/packages/super-editor/src/components/toolbar/LinkInput.vue b/packages/super-editor/src/components/toolbar/LinkInput.vue
@@ -96,9 +96,15 @@ onMounted(() => {
     <div v-if="showInput && !isAnchor">
       <div class="input-row">
         <div class="input-icon" v-html="toolbarIcons.linkInput"></div>
-        <input type="text" placeholder="Type or paste a link"
-          :class="{ error: urlError }" v-model="rawUrl"
-          @keydown.enter.stop.prevent="handleSubmit" @keydown="urlError = false" />
+        <input
+          type="text"
+          name="link"
+          placeholder="Type or paste a link"
+          :class="{ error: urlError }"
+          v-model="rawUrl"
+          @keydown.enter.stop.prevent="handleSubmit"
+          @keydown="urlError = false"
+        />
 
         <div class="open-link-icon" :class="{ disabled: !validUrl }" v-html="toolbarIcons.openLink" @click="openLink"
           data-item="btn-link-open">

diff --git a/packages/super-editor/src/components/toolbar/OverflowMenu.vue b/packages/super-editor/src/components/toolbar/OverflowMenu.vue
@@ -33,15 +33,22 @@ const handleCommand = ({ item, argument }) => {
 </script>
 
 <template>
-  <div class="overflow-menu">
+  <div 
+    class="overflow-menu"
+  >
     <div class="overflow-menu-trigger">
       <ToolbarButton 
         :toolbar-item="overflowToolbarItem"
         @buttonClick="toggleOverflowMenu" 
       />
     </div>
-    <div v-if="isDropdownOpened" class="overflow-menu_items">
-      <ButtonGroup :toolbar-items="overflowItems" @command="handleCommand" class="superdoc-toolbar-overflow" />
+    <div v-if="isDropdownOpened" class="overflow-menu_items" role="group">
+      <ButtonGroup
+        class="superdoc-toolbar-overflow"
+        :toolbar-items="overflowItems"
+        from-overflow
+        @command="handleCommand"  
+      />
     </div>
   </div>
 </template>

diff --git a/packages/super-editor/src/components/toolbar/TableActions.vue b/packages/super-editor/src/components/toolbar/TableActions.vue
@@ -19,7 +19,10 @@ const handleClick = (item) => {
       :class="{ 'toolbar-table-actions__item--border':  option.bottomBorder}"
       v-for="option in options"
       @click="handleClick(option)"
-      :data-item="option.props?.['data-item'] || ''">
+      :data-item="option.props?.['data-item'] || ''"
+      :ariaLabel="option.props?.ariaLabel"
+      role="menuitem"
+    >
       <div class="toolbar-table-actions__icon">
         <div class="toolbar-table-actions__icon-wrapper" v-html="option.icon"></div>
       </div>

diff --git a/packages/super-editor/src/components/toolbar/TableGrid.vue b/packages/super-editor/src/components/toolbar/TableGrid.vue
@@ -53,7 +53,10 @@ const handleClick = ({ cols, rows }) => {
       </template>
     </div>
 
-    <div class="toolbar-table-grid-value">
+    <div 
+      class="toolbar-table-grid-value"
+      :aria-valuetext="`${selectedRows} x ${selectedCols}`"
+    >
       {{ selectedRows }} x {{ selectedCols }}
     </div>
   </div>

diff --git a/packages/super-editor/src/components/toolbar/Toolbar.vue b/packages/super-editor/src/components/toolbar/Toolbar.vue
@@ -52,7 +52,12 @@ const handleCommand = ({ item, argument, option }) => {
 </script>
 
 <template>
-  <div class="superdoc-toolbar" :key="toolbarKey">
+  <div 
+    class="superdoc-toolbar" 
+    :key="toolbarKey"
+    role="toolbar"
+    aria-label="Toolbar"
+  >
     <ButtonGroup
       v-if="showLeftSide"
       :toolbar-items="getFilteredItems('left')"

diff --git a/packages/super-editor/src/components/toolbar/ToolbarButton.vue b/packages/super-editor/src/components/toolbar/ToolbarButton.vue
@@ -30,6 +30,10 @@ const props = defineProps({
     type: String,
     default: null,
   },
+  isOverflowItem: {
+    type: Boolean,
+    default: false,
+  }
 });
 
 const {
@@ -83,12 +87,20 @@ const caretIcon = computed(() => {
 </script>
 
 <template>
-  <div :class="['toolbar-item', attributes.className]" :style="getStyle">
-    <div @click="handleClick" class="toolbar-button"
+  <div 
+    :class="['toolbar-item', attributes.className]" 
+    :style="getStyle"
+    :role="isOverflowItem ? 'menuitem' : ''"
+  >
+    <div
+      @click="handleClick"
+      class="toolbar-button"
       :class="{ active, disabled, narrow: isNarrow, wide: isWide, 'has-inline-text-input': hasInlineTextInput, 'high-contrast': isHighContrastMode }"
-      :data-item="`btn-${name || ''}`">
-      <ToolbarButtonIcon v-if="icon" :color="iconColor" class="toolbar-icon"
-        :class="{ 'high-contrast': isHighContrastMode }" :icon="icon" :name="name">
+      :data-item="`btn-${name || ''}`"
+      :aria-label="attributes.ariaLabel"
+      role="button"
+    >
+      <ToolbarButtonIcon v-if="icon" :color="iconColor" class="toolbar-icon" :icon="icon" :name="name">
       </ToolbarButtonIcon>
 
       <div class="button-label" v-if="label && !hideLabel && !inlineTextInputVisible">

diff --git a/packages/super-editor/src/components/toolbar/ToolbarSeparator.vue b/packages/super-editor/src/components/toolbar/ToolbarSeparator.vue
@@ -19,7 +19,11 @@ const getSeparatorColor = () => {
 </script>
 
 <template>
-  <div class="toolbar-separator">
+  <div 
+    class="toolbar-separator"
+    role="separator"
+    aria-label="Toolbar separator"
+  >
     <div class="separator-inner" :style="{ backgroundColor: getSeparatorColor() }"></div>
   </div>
 </template>