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
@@ -10,10 +10,38 @@ const select = (alignment) => {
 
 <template>
   <div class="alignment-buttons">
-    <div class="button-icon" @click="select('left')" v-html="toolbarIcons.alignLeft" data-item="btn-textAlign-option"></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>
-    <div class="button-icon" @click="select('justify')" v-html="toolbarIcons.alignJustify" data-item="btn-textAlign-option"></div>
+    <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" 
+      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" 
+      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
@@ -20,6 +20,10 @@ const props = defineProps({
     type: String,
     default: 'left',
   },
+  fromOverflow: {
+    type: Boolean,
+    default: false,
+  }
 });
 
 const currentItem = ref(null);
@@ -89,13 +93,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"
@@ -120,6 +135,10 @@ const handleClickOutside = (e) => {
         @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>
@@ -140,6 +159,7 @@ const handleClickOutside = (e) => {
         <template #trigger>
           <ToolbarButton
             :toolbar-item="item"
+            :is-overflow-item="fromOverflow"
             @textSubmit="handleToolbarButtonTextSubmit(item, $event)"
             @buttonClick="handleToolbarButtonClick(item)"
           />

diff --git a/packages/super-editor/src/components/toolbar/DocumentMode.vue b/packages/super-editor/src/components/toolbar/DocumentMode.vue
@@ -19,6 +19,7 @@ const handleClick = (item) => {
       @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>

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,6 +96,7 @@ onMounted(() => {
         <div class="input-icon" v-html="toolbarIcons.linkInput"></div>
         <input
           type="text"
+          name="link"
           placeholder="Type or paste a link"
           :class="{ error: urlError }"
           v-model="rawUrl"

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
@@ -56,7 +56,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 {
@@ -82,12 +86,18 @@ const caretIcon = computed(() => {
 </script>
 
 <template>
-  <div :class="['toolbar-item', attributes.className]" :style="getStyle">
+  <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 }"
       :data-item="`btn-${name || ''}`"
+      :aria-label="attributes.ariaLabel"
+      role="button"
     >
       <ToolbarButtonIcon v-if="icon" :color="iconColor" class="toolbar-icon" :icon="icon" :name="name">
       </ToolbarButtonIcon>

diff --git a/packages/super-editor/src/components/toolbar/ToolbarSeparator.vue b/packages/super-editor/src/components/toolbar/ToolbarSeparator.vue
@@ -9,7 +9,11 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="toolbar-separator">
+  <div 
+    class="toolbar-separator"
+    role="separator"
+    aria-label="Toolbar separator"
+  >
     <div class="separator-inner"></div>
   </div>
 </template>