From df1f3dc7fa26bfe5c2dd6adce2a9d2b1584fdab3 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Tue, 23 Jan 2024 21:22:00 +0100
Subject: [PATCH 01/12] fix: apply a11y attrs for session list trigger

- Migrate from deprecated slot syntax
- Use a11y attrs from `NcPopover` on a custom button

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/Editor/SessionList.vue | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/Editor/SessionList.vue b/src/components/Editor/SessionList.vue
index 6390e62874d..83431692cfa 100644
--- a/src/components/Editor/SessionList.vue
+++ b/src/components/Editor/SessionList.vue
@@ -22,17 +22,20 @@
 
 <template>
 	<NcPopover class="session-list" placement="bottom">
-		<div slot="trigger">
-			<button :title="label"
-				:aria-label="label"
-				class="avatar-list">
-				<div class="avatardiv icon-group" />
-				<AvatarWrapper v-for="session in sessionsVisible"
-					:key="session.id"
-					:session="session"
-					:size="40" />
-			</button>
-		</div>
+		<template #trigger="{ attrs }">
+			<div>
+				<button :title="label"
+					:aria-label="label"
+					class="avatar-list"
+					v-bind="attrs">
+					<div class="avatardiv icon-group" />
+					<AvatarWrapper v-for="session in sessionsVisible"
+						:key="session.id"
+						:session="session"
+						:size="40" />
+				</button>
+			</div>
+		</template>
 		<template #default>
 			<div class="session-menu">
 				<slot name="lastSaved" />

From b53602af10d2a1346d29e4cbf10645fd1758799c Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Tue, 9 Jan 2024 19:40:53 +0100
Subject: [PATCH 02/12] fix(menubar): remove unneeded roles `menu`, `menuitem`

All these roles are correctly set by `NcAction*` components when needed.
Setting these roles in mixins and menu bar puts them on wrong elements.

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/Menu/ActionAttachmentUpload.vue | 1 -
 src/components/Menu/ActionList.vue             | 1 -
 src/components/Menu/ActionSingle.vue           | 1 -
 3 files changed, 3 deletions(-)

diff --git a/src/components/Menu/ActionAttachmentUpload.vue b/src/components/Menu/ActionAttachmentUpload.vue
index 24f1509bfee..7d79184663c 100644
--- a/src/components/Menu/ActionAttachmentUpload.vue
+++ b/src/components/Menu/ActionAttachmentUpload.vue
@@ -26,7 +26,6 @@
 		:title="actionEntry.label"
 		:aria-label="actionEntry.label"
 		:container="menuIDSelector"
-		role="menu"
 		aria-haspopup>
 		<template #icon>
 			<component :is="icon"
diff --git a/src/components/Menu/ActionList.vue b/src/components/Menu/ActionList.vue
index 383f52101f2..d37b03c74ac 100644
--- a/src/components/Menu/ActionList.vue
+++ b/src/components/Menu/ActionList.vue
@@ -23,7 +23,6 @@
 <template>
 	<NcActions :title="tooltip"
 		class="entry-list-action entry-action"
-		role="menu"
 		v-bind="state"
 		:container="menuIDSelector"
 		:aria-label="actionEntry.label"
diff --git a/src/components/Menu/ActionSingle.vue b/src/components/Menu/ActionSingle.vue
index f3b49393576..81485214d01 100644
--- a/src/components/Menu/ActionSingle.vue
+++ b/src/components/Menu/ActionSingle.vue
@@ -120,7 +120,6 @@ export default {
 			attrs: {
 				title,
 				type: attrs.active ? 'primary' : 'tertiary',
-				role: 'menuitem',
 				'data-text-action-entry': actionEntry.key,
 				...attrs,
 			},

From a762115e8992edbe8a4e5eaf6df4ff65be787e28 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Wed, 31 Jan 2024 10:28:08 +0100
Subject: [PATCH 03/12] fix(menubar): remove incorrect `aria-haspopup`

- It must have string `"true"/"menu"` value
- It must be placed on the `button` itself
- It is already correctly set by `NcActions` and `NcPopover`

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/Menu/ActionAttachmentUpload.vue | 6 ++----
 src/components/Menu/ActionInsertLink.vue       | 4 +---
 src/components/Menu/EmojiPickerAction.vue      | 3 +--
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/Menu/ActionAttachmentUpload.vue b/src/components/Menu/ActionAttachmentUpload.vue
index 7d79184663c..81871e3a56f 100644
--- a/src/components/Menu/ActionAttachmentUpload.vue
+++ b/src/components/Menu/ActionAttachmentUpload.vue
@@ -25,13 +25,11 @@
 		:name="actionEntry.label"
 		:title="actionEntry.label"
 		:aria-label="actionEntry.label"
-		:container="menuIDSelector"
-		aria-haspopup>
+		:container="menuIDSelector">
 		<template #icon>
 			<component :is="icon"
 				:name="actionEntry.label"
-				:aria-label="actionEntry.label"
-				aria-haspopup />
+				:aria-label="actionEntry.label" />
 		</template>
 		<NcActionButton v-if="$editorUpload"
 			close-after-click
diff --git a/src/components/Menu/ActionInsertLink.vue b/src/components/Menu/ActionInsertLink.vue
index a11c64b39ec..2cafe67f016 100644
--- a/src/components/Menu/ActionInsertLink.vue
+++ b/src/components/Menu/ActionInsertLink.vue
@@ -19,7 +19,6 @@
   -->
 <template>
 	<NcActions class="entry-action entry-action__insert-link"
-		aria-haspopup
 		:title="actionEntry.label"
 		:aria-label="actionEntry.label"
 		:class="activeClass"
@@ -31,8 +30,7 @@
 		<template #icon>
 			<component :is="icon"
 				:name="actionEntry.label"
-				:aria-label="actionEntry.label"
-				aria-haspopup />
+				:aria-label="actionEntry.label" />
 		</template>
 		<NcActionButton v-if="state.active"
 			:data-text-action-entry="`${actionEntry.key}-remove`"
diff --git a/src/components/Menu/EmojiPickerAction.vue b/src/components/Menu/EmojiPickerAction.vue
index 727a95075c2..e7d0522323e 100644
--- a/src/components/Menu/EmojiPickerAction.vue
+++ b/src/components/Menu/EmojiPickerAction.vue
@@ -28,8 +28,7 @@
 			<NcButton class="entry-action__button"
 				role="menu"
 				:title="actionEntry.label"
-				:aria-label="actionEntry.label"
-				:aria-haspopup="true">
+				:aria-label="actionEntry.label">
 				<template #icon>
 					<component :is="icon" />
 				</template>

From 34d971099245be13d48798a81ef90f25f6d6147a Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Fri, 12 Jan 2024 05:57:53 +0100
Subject: [PATCH 04/12] fix(menubar): remove incorrect `aria-activedescendant`

- `aria-activedescendant` should identify a visually focused element when the real focus remains on this element.
  In the current implementation it identified selected element (even when the menu is closed), not the focused.
- `aria-activedescendant` is not needed because NcAction has actual focus anyway.
  In case it will be actually needed, it should be implemented in the `NcActions`

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/Menu/ActionList.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/Menu/ActionList.vue b/src/components/Menu/ActionList.vue
index d37b03c74ac..98140a00197 100644
--- a/src/components/Menu/ActionList.vue
+++ b/src/components/Menu/ActionList.vue
@@ -28,7 +28,6 @@
 		:aria-label="actionEntry.label"
 		:aria-pressed="state.active"
 		:type="state.active ? 'primary': 'tertiary'"
-		:aria-activedescendant="currentChild ? `${$menuID}-child-${currentChild.key}` : null"
 		:force-menu="true"
 		:name="actionEntry.label"
 		:data-text-action-entry="actionEntry.key"
@@ -38,7 +37,6 @@
 			<component :is="icon" :key="iconKey" />
 		</template>
 		<ActionSingle v-for="child in children"
-			:id="`${$menuID}-child-${child.key}`"
 			:key="`child-${child.key}`"
 			:active="currentChild?.key === child.key"
 			is-item

From 21e76f34c43174616e86064074504b9520b05ce9 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Wed, 10 Jan 2024 14:16:21 +0100
Subject: [PATCH 05/12] fix(table): replace InlineActionsContainer by
 NcActionButtonGroup

It has the same styles and correct a11y attributes.

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/InlineActionsContainer.vue | 56 -----------------------
 src/nodes/Table/TableHeaderView.vue       |  9 ++--
 2 files changed, 4 insertions(+), 61 deletions(-)
 delete mode 100644 src/components/InlineActionsContainer.vue

diff --git a/src/components/InlineActionsContainer.vue b/src/components/InlineActionsContainer.vue
deleted file mode 100644
index c428edd6e3c..00000000000
--- a/src/components/InlineActionsContainer.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2022
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-<template>
-	<li class="inline-container-base">
-		<ul class="inline-container-content">
-			<slot />
-		</ul>
-	</li>
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-
-/**
- * A wrapper for allowing inlining NcAction components
- * within the action menu (see TableHeaderView for a usage example)
- */
-export default defineComponent({
-	name: 'InlineActionsContainer',
-})
-</script>
-
-<style lang="scss">
-ul.inline-container-content {
-	display: flex;
-	justify-content: space-between;
-	li {
-		flex: 1 1;
-	}
-
-	.action-button {
-		// Fix action buttons beeing shifted to the left (right padding)
-		padding: 0 !important;
-		width: 100%;
-		display: flex;
-		justify-content: center;
-	}
-}
-</style>
diff --git a/src/nodes/Table/TableHeaderView.vue b/src/nodes/Table/TableHeaderView.vue
index e640e3eaeef..1b88e77217b 100644
--- a/src/nodes/Table/TableHeaderView.vue
+++ b/src/nodes/Table/TableHeaderView.vue
@@ -27,7 +27,7 @@
 			<NcActions v-if="editor.isEditable"
 				ref="menu"
 				data-text-table-actions="header">
-				<InlineActionsContainer>
+				<NcActionButtonGroup>
 					<NcActionButton data-text-table-action="align-column-left"
 						:aria-label="t('text', 'Left align column')"
 						@click="alignLeft">
@@ -49,7 +49,7 @@
 							<AlignHorizontalRight />
 						</template>
 					</NcActionButton>
-				</InlineActionsContainer>
+				</NcActionButtonGroup>
 				<NcActionButton data-text-table-action="add-column-before"
 					close-after-click
 					@click="addColumnBefore">
@@ -81,8 +81,7 @@
 
 <script>
 import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
-import { NcActions, NcActionButton } from '@nextcloud/vue'
-import InlineActionsContainer from '../../components/InlineActionsContainer.vue'
+import { NcActions, NcActionButton, NcActionButtonGroup } from '@nextcloud/vue'
 import {
 	AlignHorizontalCenter,
 	AlignHorizontalLeft,
@@ -99,8 +98,8 @@ export default {
 		AlignHorizontalLeft,
 		AlignHorizontalRight,
 		Delete,
-		InlineActionsContainer,
 		NcActionButton,
+		NcActionButtonGroup,
 		NcActions,
 		NodeViewWrapper,
 		NodeViewContent,

From ada2fdd7cc0b7ae2ea002595bd9e1d87836e35ad Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Wed, 31 Jan 2024 11:50:02 +0100
Subject: [PATCH 06/12] fix(table): make text align buttons radio

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/nodes/Table/TableHeaderView.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/nodes/Table/TableHeaderView.vue b/src/nodes/Table/TableHeaderView.vue
index 1b88e77217b..8209c2f7696 100644
--- a/src/nodes/Table/TableHeaderView.vue
+++ b/src/nodes/Table/TableHeaderView.vue
@@ -2,6 +2,7 @@
   - @copyright Copyright (c) 2022 Max <max@nextcloud.com>
   -
   - @author Max <max@nextcloud.com>
+  - @author Grigorii K. Shartsev <me@shgk.me>
   -
   - @license GNU AGPL version 3 or any later version
   -
@@ -30,6 +31,9 @@
 				<NcActionButtonGroup>
 					<NcActionButton data-text-table-action="align-column-left"
 						:aria-label="t('text', 'Left align column')"
+						type="radio"
+						value="left"
+						:model-value="node.attrs.textAlign"
 						@click="alignLeft">
 						<template #icon>
 							<AlignHorizontalLeft />
@@ -37,6 +41,9 @@
 					</NcActionButton>
 					<NcActionButton data-text-table-action="align-column-center"
 						:aria-label="t('text', 'Center align column')"
+						type="radio"
+						value="center"
+						:model-value="node.attrs.textAlign"
 						@click="alignCenter">
 						<template #icon>
 							<AlignHorizontalCenter />
@@ -44,6 +51,9 @@
 					</NcActionButton>
 					<NcActionButton data-text-table-action="align-column-right"
 						:aria-label="t('text', 'Right align column')"
+						type="radio"
+						value="right"
+						:model-value="node.attrs.textAlign"
 						@click="alignRight">
 						<template #icon>
 							<AlignHorizontalRight />

From eb02f5de9d7d4e164fc3d96050b66896a537df8b Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Thu, 11 Jan 2024 12:50:31 +0100
Subject: [PATCH 07/12] fix(menubar): replace aria-pressed with text
 description in action list

- `aria-pressed` is not valid for a menu trigger button
- As alternative solution - show that there is a selected value directly in the text
- Remove incorrect prop for NcActions

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/Menu/ActionList.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/Menu/ActionList.vue b/src/components/Menu/ActionList.vue
index 98140a00197..7a0e8b854c2 100644
--- a/src/components/Menu/ActionList.vue
+++ b/src/components/Menu/ActionList.vue
@@ -2,6 +2,7 @@
   - @copyright Copyright (c) 2022 Vinicius Reis <vinicius@nextcloud.com>
   -
   - @author Vinicius Reis <vinicius@nextcloud.com>
+  - @author Grigorii K. Shartsev <me@shgk.me>
   -
   - @license GNU AGPL version 3 or any later version
   -
@@ -25,11 +26,9 @@
 		class="entry-list-action entry-action"
 		v-bind="state"
 		:container="menuIDSelector"
-		:aria-label="actionEntry.label"
-		:aria-pressed="state.active"
+		:aria-label="labelWithSelected"
 		:type="state.active ? 'primary': 'tertiary'"
 		:force-menu="true"
-		:name="actionEntry.label"
 		:data-text-action-entry="actionEntry.key"
 		:data-text-action-active="activeKey"
 		@update:open="onOpenChange">
@@ -107,6 +106,17 @@ export default {
 					: visible
 			})
 		},
+		labelWithSelected() {
+			if (this.currentChild) {
+				// TRANSLATORS: examples - Headings, "Heading 1" is selected - Callouts, "Info" is selected
+				return t('text', '{menuItemName}, "{selectedSubMenuItemName}" is selected', {
+					menuItemName: this.actionEntry.label,
+					selectedSubMenuItemName: this.currentChild.label,
+				})
+			}
+
+			return this.actionEntry.label
+		},
 	},
 	methods: {
 		onOpenChange(val) {

From e5629fc7532144f71978f151bf67dda067b9704d Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Tue, 23 Jan 2024 11:52:34 +0100
Subject: [PATCH 08/12] refactor: implement ActionSingle via template instead
 of render-function

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/Menu/ActionSingle.vue | 66 ++++++++++------------------
 1 file changed, 22 insertions(+), 44 deletions(-)

diff --git a/src/components/Menu/ActionSingle.vue b/src/components/Menu/ActionSingle.vue
index 81485214d01..ae61107b730 100644
--- a/src/components/Menu/ActionSingle.vue
+++ b/src/components/Menu/ActionSingle.vue
@@ -2,6 +2,7 @@
   - @copyright Copyright (c) 2022 Vinicius Reis <vinicius@nextcloud.com>
   -
   - @author Vinicius Reis <vinicius@nextcloud.com>
+  - @author Grigorii K. Shartsev <me@shgk.me>
   -
   - @license GNU AGPL version 3 or any later version
   -
@@ -20,6 +21,26 @@
   -
   -->
 
+<template>
+	<component :is="component"
+		class="entry-single-action entry-action"
+		:title="isItem ? undefined : tooltip"
+		:type="state.active ? 'primary' : 'tertiary'"
+		:data-text-action-entry="actionEntry.key"
+		:pressed="isItem ? state.active : undefined"
+		v-bind="bindState"
+		v-on="$listeners"
+		@click="runAction">
+		<template #icon>
+			<component :is="icon" />
+		</template>
+
+		<template v-if="isItem || actionEntry.forceLabel" #default>
+			{{ label }}
+		</template>
+	</component>
+</template>
+
 <script>
 import { NcButton, NcActionButton } from '@nextcloud/vue'
 import { BaseActionEntry } from './BaseActionEntry.js'
@@ -71,6 +92,7 @@ export default {
 	mounted() {
 		this.$editor.on('transaction', () => this.updateState())
 	},
+
 	methods: {
 		runAction() {
 			const { actionEntry } = this
@@ -88,49 +110,5 @@ export default {
 			})
 		},
 	},
-
-	render(h) {
-		const {
-			$listeners,
-			actionEntry,
-			bindState,
-			component,
-			icon,
-			isItem,
-			runAction,
-			tooltip,
-			label,
-		} = this
-
-		const { class: classes, ...attrs } = bindState
-
-		const children = [h(icon, { slot: 'icon' })]
-
-		// do not use title if is a item of action list
-		const title = isItem ? undefined : tooltip
-
-		if (isItem || actionEntry.forceLabel) {
-			// add label
-			children.push(label)
-		}
-
-		return h(component, {
-			staticClass: 'entry-single-action entry-action',
-			class: classes,
-			attrs: {
-				title,
-				type: attrs.active ? 'primary' : 'tertiary',
-				'data-text-action-entry': actionEntry.key,
-				...attrs,
-			},
-			props: isItem
-				? { pressed: attrs.active }
-				: {},
-			on: {
-				...$listeners,
-				click: runAction,
-			},
-		}, children)
-	},
 }
 </script>

From bfa83dff741eaa970252ed5da50f3ca703385d68 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Wed, 10 Jan 2024 14:02:16 +0100
Subject: [PATCH 09/12] fix(menubar): set correct type for buttons instead of
 aria-selected

- Since `@nextcloud/vue@8.6.0` correct attributes are covered by `NcAction*` and `NcButton` components, including fixes:
  - Attribute should display not only active `attr="true"` state, but also non-active `attr="false"`
  - It should be `aria-pressed` for buttons and `aria-checked` for menu items instead of `aria-selected`
- Set correct `type` and active state
  - `type="radio"` for a list of options like `Heading`
  - `type="checkbox"` for toggle buttons like `Bold`
  - `type="button"` for general buttons widhout active state like `Undo`

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/Menu/ActionSingle.vue | 41 ++++++++++++----------------
 src/components/Menu/utils.js         | 21 +++++++++++++-
 2 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/src/components/Menu/ActionSingle.vue b/src/components/Menu/ActionSingle.vue
index ae61107b730..c66180aab69 100644
--- a/src/components/Menu/ActionSingle.vue
+++ b/src/components/Menu/ActionSingle.vue
@@ -24,11 +24,11 @@
 <template>
 	<component :is="component"
 		class="entry-single-action entry-action"
-		:title="isItem ? undefined : tooltip"
-		:type="state.active ? 'primary' : 'tertiary'"
+		:class="[state.class, { 'entry-action-item': isItem }]"
+		:disabled="state.disabled"
+		:aria-keyshortcuts="keyshortcuts || undefined"
 		:data-text-action-entry="actionEntry.key"
-		:pressed="isItem ? state.active : undefined"
-		v-bind="bindState"
+		v-bind="componentSpecificParams"
 		v-on="$listeners"
 		@click="runAction">
 		<template #icon>
@@ -62,30 +62,23 @@ export default {
 				? NcActionButton
 				: NcButton
 		},
-		bindState() {
-			const { keyshortcuts } = this
-
-			const state = {
-				...this.state,
-				ariaLabel: this.label,
-			}
-
-			state.class = {
-				...state.class,
-				// inject a extra class
-				'entry-action-item': this.isItem,
+		componentSpecificParams() {
+			const ncActionButtonParams = {
+				type: this.state.type,
+				modelValue: this.state.type !== 'button' ? this.state.active : undefined,
+				closeAfterClick: true,
 			}
 
-			if (keyshortcuts) {
-				state['aria-keyshortcuts'] = keyshortcuts
-			}
-
-			// item list behaviour
-			if (this.isItem) {
-				state.closeAfterClick = true
+			const ncButtonParams = {
+				ariaLabel: this.label,
+				title: this.tooltip,
+				type: 'tertiary',
+				pressed: this.state.type !== 'button' ? this.state.active : undefined,
 			}
 
-			return state
+			return this.isItem
+				? ncActionButtonParams
+				: ncButtonParams
 		},
 	},
 
diff --git a/src/components/Menu/utils.js b/src/components/Menu/utils.js
index 10a1b034d5f..06c1492da8c 100644
--- a/src/components/Menu/utils.js
+++ b/src/components/Menu/utils.js
@@ -2,6 +2,7 @@
  * @copyright Copyright (c) 2022 Vinicius Reis <vinicius@nextcloud.com>
  *
  * @author Vinicius Reis <vinicius@nextcloud.com>
+ * @author Grigorii K. Shartsev <me@shgk.me>
  *
  * @license GNU AGPL version 3 or any later version
  *
@@ -68,6 +69,24 @@ const getIsActive = ({ isActive }, $editor) => {
 	return $editor.isActive(...args)
 }
 
+const getType = (actionEntry) => {
+	// isActive stores the value changing on active state change (on click)
+
+	// If it is an array, the button is one of the list of alternative values for a specific option
+	// Like ['heading', { level: 1 }]
+	if (Array.isArray(actionEntry.isActive)) {
+		return 'radio'
+	}
+
+	// If it is a string, it toggles a specific option like a checkbox
+	if (typeof actionEntry.isActive === 'string') {
+		return 'checkbox'
+	}
+
+	// Otherwise it is just a button
+	return 'button'
+}
+
 const getActionState = (actionEntry, $editor) => {
 	const active = getIsActive(actionEntry, $editor)
 
@@ -75,7 +94,7 @@ const getActionState = (actionEntry, $editor) => {
 		disabled: isDisabled(actionEntry, $editor),
 		class: getEntryClasses(actionEntry, active),
 		active,
-		'aria-selected': active,
+		type: getType(actionEntry),
 	}
 }
 

From af83b384c9277fe4fc44fcf49c87827136158666 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Tue, 30 Jan 2024 21:51:00 +0100
Subject: [PATCH 10/12] fix(menubar): separate NcActionButton from ActionSingle

- ActionSingle was used in 2 places:
  1. As a single button in the menu
  2. As an item in NcActions
- NcActions doesn't fully support non-direct NcAction* children
- Move NcActionButton usage from ActionSingle to a new component
- This new component is named NcActionButton so that NcActions will consider it to be a valid NcAction* component

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/Menu/ActionList.vue     |  6 +-
 src/components/Menu/ActionListItem.vue | 82 ++++++++++++++++++++++++++
 src/components/Menu/ActionSingle.vue   | 49 +++++----------
 3 files changed, 100 insertions(+), 37 deletions(-)
 create mode 100644 src/components/Menu/ActionListItem.vue

diff --git a/src/components/Menu/ActionList.vue b/src/components/Menu/ActionList.vue
index 7a0e8b854c2..887508bcbb1 100644
--- a/src/components/Menu/ActionList.vue
+++ b/src/components/Menu/ActionList.vue
@@ -35,7 +35,7 @@
 		<template #icon>
 			<component :is="icon" :key="iconKey" />
 		</template>
-		<ActionSingle v-for="child in children"
+		<ActionListItem v-for="child in children"
 			:key="`child-${child.key}`"
 			:active="currentChild?.key === child.key"
 			is-item
@@ -49,7 +49,7 @@
 <script>
 import { NcActions } from '@nextcloud/vue'
 import { BaseActionEntry } from './BaseActionEntry.js'
-import ActionSingle from './ActionSingle.vue'
+import ActionListItem from './ActionListItem.vue'
 import { getIsActive } from './utils.js'
 import { useOutlineStateMixin } from '../Editor/Wrapper.provider.js'
 import useStore from '../../mixins/store.js'
@@ -59,7 +59,7 @@ export default {
 	name: 'ActionList',
 	components: {
 		NcActions,
-		ActionSingle,
+		ActionListItem,
 	},
 	extends: BaseActionEntry,
 	mixins: [useStore, useOutlineStateMixin, useMenuIDMixin],
diff --git a/src/components/Menu/ActionListItem.vue b/src/components/Menu/ActionListItem.vue
new file mode 100644
index 00000000000..0a4e27a818e
--- /dev/null
+++ b/src/components/Menu/ActionListItem.vue
@@ -0,0 +1,82 @@
+<!--
+  - @copyright Copyright (c) 2022 Vinicius Reis <vinicius@nextcloud.com>
+  -
+  - @author Vinicius Reis <vinicius@nextcloud.com>
+  - @author Grigorii K. Shartsev <me@shgk.me>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<NextcloudVueNcActionButton class="entry-single-action entry-action entry-action-item"
+		:class="state.class"
+		:disabled="state.disabled"
+		:aria-keyshortcuts="keyshortcuts || undefined"
+		:data-text-action-entry="actionEntry.key"
+		:type="state.type"
+		:model-value="state.type !== 'button' ? state.active : undefined"
+		close-after-click
+		v-on="$listeners"
+		@click="runAction">
+		<template #icon>
+			<component :is="icon" />
+		</template>
+		{{ label }}
+	</NextcloudVueNcActionButton>
+</template>
+
+<script>
+import { NcActionButton as NextcloudVueNcActionButton } from '@nextcloud/vue'
+import { BaseActionEntry } from './BaseActionEntry.js'
+
+export default {
+	// This component is used as a direct child of NcActions.
+	// Even if it actually renders NcActionButton, NcActions cannot see it due to rendering limitations in Vue.
+	// Though it works in general, NcActions doesn't handle it correctly. See NcActions docs for details.
+	// Hotfix - rename the component to NcActionButton because it represents and renders it.
+	// eslint-disable-next-line vue/match-component-file-name
+	name: 'NcActionButton',
+
+	components: {
+		NextcloudVueNcActionButton,
+	},
+
+	extends: BaseActionEntry,
+
+	mounted() {
+		this.$editor.on('transaction', () => this.updateState())
+	},
+
+	methods: {
+		runAction() {
+			const { actionEntry } = this
+
+			if (actionEntry.click) {
+				actionEntry.click(this)
+			} else {
+				// Some actions run themselves.
+				// others still need to have .run() called upon them.
+				actionEntry.action(this.$editor.chain().focus())?.run()
+			}
+
+			this.$nextTick(() => {
+				this.$emit('trigged', { ...actionEntry })
+			})
+		},
+	},
+}
+</script>
diff --git a/src/components/Menu/ActionSingle.vue b/src/components/Menu/ActionSingle.vue
index c66180aab69..fdd526d6cd1 100644
--- a/src/components/Menu/ActionSingle.vue
+++ b/src/components/Menu/ActionSingle.vue
@@ -22,65 +22,46 @@
   -->
 
 <template>
-	<component :is="component"
-		class="entry-single-action entry-action"
-		:class="[state.class, { 'entry-action-item': isItem }]"
+	<NcButton class="entry-single-action entry-action"
+		:class="state.class"
 		:disabled="state.disabled"
 		:aria-keyshortcuts="keyshortcuts || undefined"
 		:data-text-action-entry="actionEntry.key"
-		v-bind="componentSpecificParams"
+		:aria-label="label"
+		:title="tooltip"
+		type="tertiary"
+		:pressed="state.type !== 'button' ? state.active : undefined"
 		v-on="$listeners"
 		@click="runAction">
 		<template #icon>
 			<component :is="icon" />
 		</template>
 
-		<template v-if="isItem || actionEntry.forceLabel" #default>
+		<template v-if="actionEntry.forceLabel" #default>
 			{{ label }}
 		</template>
-	</component>
+	</NcButton>
 </template>
 
 <script>
-import { NcButton, NcActionButton } from '@nextcloud/vue'
+import { NcButton } from '@nextcloud/vue'
 import { BaseActionEntry } from './BaseActionEntry.js'
 
 export default {
 	name: 'ActionSingle',
+
+	components: {
+		NcButton,
+	},
+
 	extends: BaseActionEntry,
+
 	props: {
 		isItem: {
 			type: Boolean,
 			default: false,
 		},
 	},
-	computed: {
-		component() {
-			// Button and NcActionButton shares styles and behaviours
-			// to keep it simple, this component handle the small differences
-			return this.isItem
-				? NcActionButton
-				: NcButton
-		},
-		componentSpecificParams() {
-			const ncActionButtonParams = {
-				type: this.state.type,
-				modelValue: this.state.type !== 'button' ? this.state.active : undefined,
-				closeAfterClick: true,
-			}
-
-			const ncButtonParams = {
-				ariaLabel: this.label,
-				title: this.tooltip,
-				type: 'tertiary',
-				pressed: this.state.type !== 'button' ? this.state.active : undefined,
-			}
-
-			return this.isItem
-				? ncActionButtonParams
-				: ncButtonParams
-		},
-	},
 
 	mounted() {
 		this.$editor.on('transaction', () => this.updateState())

From e851f885836ac8ed6b788e8165efc42490b06a0d Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Tue, 30 Jan 2024 21:54:18 +0100
Subject: [PATCH 11/12] fix(menubar): add separator between radio groups

- Separates different parts visually
- Required for a11y to group radio button in the menu

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/Menu/ActionList.vue | 20 ++++++++++++--------
 src/components/Menu/MenuBar.vue    | 16 ++++++++++++++--
 src/components/Menu/entries.js     |  8 ++++++++
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/components/Menu/ActionList.vue b/src/components/Menu/ActionList.vue
index 887508bcbb1..b98b59e8419 100644
--- a/src/components/Menu/ActionList.vue
+++ b/src/components/Menu/ActionList.vue
@@ -35,19 +35,22 @@
 		<template #icon>
 			<component :is="icon" :key="iconKey" />
 		</template>
-		<ActionListItem v-for="child in children"
-			:key="`child-${child.key}`"
-			:active="currentChild?.key === child.key"
-			is-item
-			:action-entry="child"
-			v-on="$listeners"
-			@trigged="onTrigger" />
+		<template v-for="child in children">
+			<NcActionSeparator v-if="child.isSeparator" :key="`child-${child.key}`" />
+			<ActionListItem v-else
+				:key="`child-${child.key}`"
+				:active="currentChild?.key === child.key"
+				is-item
+				:action-entry="child"
+				v-on="$listeners"
+				@trigged="onTrigger" />
+		</template>
 		<slot v-bind="{ visible }" name="lastAction" />
 	</NcActions>
 </template>
 
 <script>
-import { NcActions } from '@nextcloud/vue'
+import { NcActions, NcActionSeparator } from '@nextcloud/vue'
 import { BaseActionEntry } from './BaseActionEntry.js'
 import ActionListItem from './ActionListItem.vue'
 import { getIsActive } from './utils.js'
@@ -59,6 +62,7 @@ export default {
 	name: 'ActionList',
 	components: {
 		NcActions,
+		NcActionSeparator,
 		ActionListItem,
 	},
 	extends: BaseActionEntry,
diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue
index 412a2fceabe..a66b45cfddb 100644
--- a/src/components/Menu/MenuBar.vue
+++ b/src/components/Menu/MenuBar.vue
@@ -3,6 +3,7 @@
   -
   - @author Vinicius Reis <vinicius@nextcloud.com>
   - @author Julius Härtl <jus@bitgrid.net>
+  - @author Grigorii K. Shartsev <me@shgk.me>
   -
   - @license AGPL-3.0-or-later
   -
@@ -161,12 +162,23 @@ export default {
 			return list
 		},
 		hiddenEntries() {
-			const entries = this.entries.filter(({ priority }) => {
+			const remainingEntries = this.entries.filter(({ priority }) => {
 				// reverse logic from visibleEntries
 				return priority !== undefined && priority > this.iconsLimit
-			}).reduce((acc, entry) => {
+			})
+			const entries = remainingEntries.reduce((acc, entry, index) => {
 				// If entry has children, merge them into list. Otherwise keep entry itself.
 				const children = entry.children ?? [entry]
+				// If this block has menu entries, it should be separated for better visibility and a11y (menu item radio grouping)
+				if (children.length > 1) {
+					const hasPreviousItem = acc.length && !acc.at(-1).isSeparator
+					const separatorBefore = hasPreviousItem ? [{ key: `separator-before-${entry.id}`, isSeparator: true }] : []
+
+					const hasNextItem = index !== remainingEntries.length - 1
+					const separatorAfter = hasNextItem ? [{ key: `separator-after-${entry.id}`, isSeparator: true }] : []
+
+					return [...acc, ...separatorBefore, ...children, ...separatorAfter]
+				}
 				return [...acc, ...children]
 			}, [])
 
diff --git a/src/components/Menu/entries.js b/src/components/Menu/entries.js
index 1d2809c6a41..bfa0dd4ebcf 100644
--- a/src/components/Menu/entries.js
+++ b/src/components/Menu/entries.js
@@ -2,6 +2,7 @@
  * @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
  *
  * @author Julius Härtl <jus@bitgrid.net>
+ * @author Grigorii K. Shartsev <me@shgk.me>
  *
  * @license GNU AGPL version 3 or any later version
  *
@@ -194,6 +195,13 @@ export default [
 					return command.toggleHeading({ level: 6 })
 				},
 			},
+			{
+				key: 'headings-separator',
+				isSeparator: true,
+				visible: ({ $outlineState }) => {
+					return $outlineState.enable
+				},
+			},
 			{
 				key: 'outline',
 				icon: FormatListBulleted,

From 9d3139038cb39633f96a543d41de6809ea9bbd3a Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Thu, 1 Feb 2024 11:52:04 +0100
Subject: [PATCH 12/12] fix(menubar): name ActionFormattingHelp as
 NcActionButton to support NcActions

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/Menu/ActionFormattingHelp.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/Menu/ActionFormattingHelp.vue b/src/components/Menu/ActionFormattingHelp.vue
index de19b253300..9d4361a867b 100644
--- a/src/components/Menu/ActionFormattingHelp.vue
+++ b/src/components/Menu/ActionFormattingHelp.vue
@@ -20,25 +20,30 @@
   -
   -->
 <template>
-	<NcActionButton close-after-click
+	<NextcloudVueNcActionButton close-after-click
 		data-text-action-entry="formatting-help"
 		v-on="$listeners">
 		<template #icon>
 			<Help />
 		</template>
 		{{ t('text', 'Formatting help') }}
-	</NcActionButton>
+	</NextcloudVueNcActionButton>
 </template>
 
 <script>
 import { defineComponent } from 'vue'
-import { NcActionButton } from '@nextcloud/vue'
+import { NcActionButton as NextcloudVueNcActionButton } from '@nextcloud/vue'
 import { Help } from '../icons.js'
 
 export default defineComponent({
-	name: 'ActionFormattingHelp',
+	// This component is used as a direct child of NcActions.
+	// Even if it actually renders NcActionButton, NcActions cannot see it due to rendering limitations in Vue.
+	// Though it works in general, NcActions doesn't handle it correctly. See NcActions docs for details.
+	// Hotfix - rename the component to NcActionButton because it represents and renders it.
+	// eslint-disable-next-line vue/match-component-file-name
+	name: 'NcActionButton',
 	components: {
-		NcActionButton,
+		NextcloudVueNcActionButton,
 		Help,
 	},
 })