fix(a11y): contrast for active menubar buttons

cypress/e2e/workspace.spec.js

@@ -81,7 +81,13 @@ describe('Workspace', function() {
 		]
 		cy.getContent().click()
 		buttons.forEach(([button, tag]) => testButtonUnselected(button, tag))
-		cy.getContent().type('Format me{selectall}')
+		// format is gone when text is gone
+		cy.getContent().type('Format me')
+		cy.getContent().find('s')
+			.should('not.exist')
+		cy.getContent()
+			.should('contain', 'Format me')
+		cy.getContent().type('{selectall}')
 		buttons.forEach(([button, tag]) => testButton(button, tag, 'Format me'))
 	})
 
@@ -303,13 +309,15 @@ const openSidebar = filename => {
  * @param {string} content Content expected in the element.
  */
 function testButton(button, tag, content) {
-	cy.getMenuEntry(button).click()
-	cy.getMenuEntry(button).should('have.class', 'is-active')
+	cy.getMenuEntry(button)
+		.should('not.have.class', 'is-active')
+		.click()
 	cy.getContent()
 		.find(`${tag}`)
 		.should('contain', content)
-	cy.getMenuEntry(button).click()
-	cy.getMenuEntry(button).should('not.have.class', 'is-active')
+	cy.getMenuEntry(button)
+		.should('have.class', 'is-active')
+		.click()
 }
 
 /**
@@ -318,16 +326,11 @@ function testButton(button, tag, content) {
  * @param {string} tag Html tag expected to be toggled.
  */
 function testButtonUnselected(button, tag) {
-	cy.getMenuEntry(button).click()
-	cy.getMenuEntry(button).should('have.class', 'is-active')
-	cy.getContent().type('Format me{selectall}')
+	cy.getMenuEntry(button)
+		.should('not.have.class', 'is-active')
+		.click()
+	cy.getContent().type('Format me')
 	cy.getContent().find(`${tag}`)
-		.should('contain', 'Format me').type('{del}')
-	cy.getMenuEntry(button).click()
-	cy.getMenuEntry(button).should('have.class', 'is-active').click()
-	cy.getMenuEntry(button).should('not.have.class', 'is-active')
-	cy.getContent().type('Format me{selectall}')
-	cy.getMenuEntry(button).find(`${tag}`)
-		.should('not.exist')
-	cy.getContent().type('{del}')
+		.should('contain', 'Format me')
+	cy.getContent().type('{selectall}{del}')
 }

src/components/Menu/ActionEntry.scss

@@ -1,20 +1,10 @@
-%text__is-active-item-btn {
-	opacity: 1;
-	background-color: var(--color-primary-element-light);
-	border-radius: 50%;
-	.material-design-icon > svg {
-		fill: var(--color-primary-element);
-	}
-}
-
 .text-menubar, .v-popper__inner {
 	button.entry-action__button {
 		height: 44px;
 		margin: 0;
 		border: 0;
 		// opacity: 0.5;
 		position: relative;
-		color: var(--color-main-text);
 		background-color: transparent;
 		vertical-align: top;
 		box-shadow: none;
@@ -49,25 +39,15 @@
 			box-shadow: var(--color-primary-element);
 		}
 
-		&.is-active {
-			@extend %text__is-active-item-btn;
-		}
 	}
 
-	.entry-action.is-active:not(.entry-action-item) {
-		@extend %text__is-active-item-btn;
-	}
-
-	.entry-action.entry-action-item {
-		&.is-active {
-			background-color: var(--color-primary-element-light);
-			border-radius: var(--border-radius-large);
-		}
+	.button-vue {
+		margin-right: 2px;
 	}
 
-	.button-vue {
-		svg {
-			fill: var(--color-main-text);
+	@media only screen and (max-width: 767px) {
+		.button-vue {
+			margin-right: 0;
 		}
 	}
 

src/components/Menu/ActionList.vue

@@ -27,6 +27,8 @@
 		v-bind="state"
 		:container="menuIDSelector"
 		: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"
@@ -39,6 +41,7 @@
 		<ActionSingle v-for="child in children"
 			:id="`${$menuID}-child-${child.key}`"
 			:key="`child-${child.key}`"
+			:active="currentChild?.key === child.key"
 			is-item
 			:action-entry="child"
 			v-on="$listeners"

src/components/Menu/ActionSingle.vue

@@ -128,11 +128,14 @@ export default {
 			class: classes,
 			attrs: {
 				title,
-				type: 'tertiary',
+				type: attrs.active ? 'primary' : 'tertiary',
 				role: 'menuitem',
 				'data-text-action-entry': actionEntry.key,
 				...attrs,
 			},
+			props: isItem
+				? { pressed: attrs.active }
+				: {},
 			on: {
 				...$listeners,
 				click: runAction,

src/components/Menu/MenuBar.vue

@@ -99,6 +99,7 @@ import { MENU_ID } from './MenuBar.provider.js'
 import { DotsHorizontal, TranslateVariant } from '../icons.js'
 import {
 	useEditorMixin,
+	useIsMobileMixin,
 	useIsRichEditorMixin,
 	useIsRichWorkspaceMixin,
 } from '../Editor.provider.js'
@@ -119,6 +120,7 @@ export default {
 	extends: ToolBarLogic,
 	mixins: [
 		useEditorMixin,
+		useIsMobileMixin,
 		useIsRichEditorMixin,
 		useIsRichWorkspaceMixin,
 	],
@@ -204,7 +206,8 @@ export default {
 
 			// leave some buffer - this is necessary so the bar does not wrap during resizing
 			const spaceToFill = width - 4
-			const slots = Math.floor(spaceToFill / 44)
+			const spacePerSlot = this.$isMobile ? 44 : 46
+			const slots = Math.floor(spaceToFill / spacePerSlot)
 
 			// Leave one slot empty for the three dot menu
 			this.iconsLimit = slots - 1