From 275d1fc385fe745eacb5bcbe06c5980c06f3dfde Mon Sep 17 00:00:00 2001 From: Max Date: Tue, 5 Dec 2023 21:36:54 +0100 Subject: [PATCH 1/4] fix(a11y): contrast for active menubar buttons Dropdown menus (headings and callouts) are still low contrast. Signed-off-by: Max --- src/components/Menu/ActionEntry.scss | 23 ----------------------- src/components/Menu/ActionList.vue | 3 +++ src/components/Menu/ActionSingle.vue | 5 ++++- 3 files changed, 7 insertions(+), 24 deletions(-) diff --git a/src/components/Menu/ActionEntry.scss b/src/components/Menu/ActionEntry.scss index d85e0ce036a..553282f4a58 100644 --- a/src/components/Menu/ActionEntry.scss +++ b/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 { diff --git a/src/components/Menu/ActionList.vue b/src/components/Menu/ActionList.vue index d566aa32c3d..b6bbcbab797 100644 --- a/src/components/Menu/ActionList.vue +++ b/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 @@ Date: Mon, 11 Dec 2023 10:32:49 +0100 Subject: [PATCH 2/4] fix(style): according to feedback in PR * Use default (white) text in active buttons in light mode. * Add a 2px margin between menubar buttons to have a bit of spacing when two buttons are active next to each other. Signed-off-by: Max --- src/components/Menu/ActionEntry.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Menu/ActionEntry.scss b/src/components/Menu/ActionEntry.scss index 553282f4a58..de622dd00a4 100644 --- a/src/components/Menu/ActionEntry.scss +++ b/src/components/Menu/ActionEntry.scss @@ -5,7 +5,6 @@ border: 0; // opacity: 0.5; position: relative; - color: var(--color-main-text); background-color: transparent; vertical-align: top; box-shadow: none; @@ -43,9 +42,7 @@ } .button-vue { - svg { - fill: var(--color-main-text); - } + margin-right: 2px; } .action-item__menutoggle.action-item__menutoggle--with-icon-slot { From 4fcf60b21367ebc0f9f499cfb9046423ccca5173 Mon Sep 17 00:00:00 2001 From: Max Date: Thu, 21 Dec 2023 08:13:19 +0100 Subject: [PATCH 3/4] fix(style): no padding between menu buttons on mobile Also fix the computation of the number of slots available Signed-off-by: Max --- src/components/Menu/ActionEntry.scss | 6 ++++++ src/components/Menu/MenuBar.vue | 5 ++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/Menu/ActionEntry.scss b/src/components/Menu/ActionEntry.scss index de622dd00a4..ad5c2182a01 100644 --- a/src/components/Menu/ActionEntry.scss +++ b/src/components/Menu/ActionEntry.scss @@ -45,6 +45,12 @@ margin-right: 2px; } + @media only screen and (max-width: 767px) { + .button-vue { + margin-right: 0; + } + } + .action-item__menutoggle.action-item__menutoggle--with-icon-slot { opacity: 1; } diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue index fef9cf34b9d..235119fa89f 100644 --- a/src/components/Menu/MenuBar.vue +++ b/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 From 66d4d8e4c11cb1a119e8b0400823da518928fc17 Mon Sep 17 00:00:00 2001 From: Max Date: Thu, 28 Dec 2023 09:17:23 +0100 Subject: [PATCH 4/4] fix(cy): format test with actions in overflow menu Signed-off-by: Max --- cypress/e2e/workspace.spec.js | 35 +++++++++++++++++++---------------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/cypress/e2e/workspace.spec.js b/cypress/e2e/workspace.spec.js index 405bbe37a98..d32d0bf8241 100644 --- a/cypress/e2e/workspace.spec.js +++ b/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}') }