fix(a11y): contrast for active menubar buttons

Dropdown menus (headings and callouts) are still low contrast.

Signed-off-by: Max <[email protected]>

src/components/Menu/ActionEntry.scss

@@ -1,12 +1,3 @@
-%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;
@@ -49,20 +40,6 @@
 			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 {

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,