From 6c5a10fea3194508e79ab73eda2b8c4d70897f97 Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Wed, 11 Oct 2023 17:09:30 -0700 Subject: [PATCH 1/5] enh(a11y): Add accessible user menu semantics Signed-off-by: Christopher Ng --- core/src/views/UserMenu.vue | 135 +++++++++++++++++------------------- 1 file changed, 64 insertions(+), 71 deletions(-) diff --git a/core/src/views/UserMenu.vue b/core/src/views/UserMenu.vue index 6e59289b81397..9f0961f835f60 100644 --- a/core/src/views/UserMenu.vue +++ b/core/src/views/UserMenu.vue @@ -23,21 +23,19 @@ @@ -108,75 +106,70 @@ export default { } } - &__nav { + ul { display: flex; - width: 100%; - - ul { - display: flex; - flex-direction: column; - gap: 2px; - - &:deep { - li { - a, - button { - border-radius: 6px; - display: inline-flex; - align-items: center; - height: var(--header-menu-item-height); + flex-direction: column; + gap: 2px; + + &:deep { + li { + a, + button { + border-radius: 6px; + display: inline-flex; + align-items: center; + height: var(--header-menu-item-height); + color: var(--color-main-text); + padding: 10px 8px; + box-sizing: border-box; + white-space: nowrap; + position: relative; + width: 100%; + + &:hover { + background-color: var(--color-background-hover); + } + + &:focus-visible { + background-color: var(--color-background-hover) !important; + box-shadow: inset 0 0 0 2px var(--color-primary-element) !important; + outline: none !important; + } + + &:active, + &.active { + background-color: var(--color-primary-element); + color: var(--color-primary-element-text); + } + + span { + padding-bottom: 0; color: var(--color-main-text); - padding: 10px 8px; - box-sizing: border-box; white-space: nowrap; - position: relative; - width: 100%; - - &:hover { - background-color: var(--color-background-hover); - } - - &:focus-visible { - background-color: var(--color-background-hover) !important; - box-shadow: inset 0 0 0 2px var(--color-primary-element) !important; - outline: none !important; - } - - &:active, - &.active { - background-color: var(--color-primary-element); - color: var(--color-primary-element-text); - } - - span { - padding-bottom: 0; - color: var(--color-main-text); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 110px; - } - - img { - width: 16px; - height: 16px; - margin-right: 10px; - } - - img, - svg { - filter: var(--background-invert-if-dark); - } + overflow: hidden; + text-overflow: ellipsis; + max-width: 110px; + } + + img { + width: 16px; + height: 16px; + margin-right: 10px; } - // Override global button styles - button { - background-color: transparent; - border: none; - font-weight: normal; - margin: 0; + img, + svg { + filter: var(--background-invert-if-dark); } } + + // Override global button styles + button { + background-color: transparent; + border: none; + font-weight: normal; + margin: 0; + } } } } From f2f1e9c8d652af4b6d2e0f33d43956134b77ab08 Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Wed, 11 Oct 2023 17:09:30 -0700 Subject: [PATCH 2/5] enh(a11y): Add avatar description Signed-off-by: Christopher Ng --- core/src/views/UserMenu.vue | 84 ++++++++++++++++++++++++++++++++++--- 1 file changed, 79 insertions(+), 5 deletions(-) diff --git a/core/src/views/UserMenu.vue b/core/src/views/UserMenu.vue index 9f0961f835f60..464dfc4b39900 100644 --- a/core/src/views/UserMenu.vue +++ b/core/src/views/UserMenu.vue @@ -24,12 +24,15 @@ + :aria-label="t('core', 'Settings menu')" + :description="avatarDescription">
    From a7de1137d7d9a87992f8900f713a11e1a3fd9616 Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Wed, 11 Oct 2023 17:09:30 -0700 Subject: [PATCH 3/5] enh(a11y): Add label to app menu nav Signed-off-by: Christopher Ng --- core/src/components/AppMenu.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/core/src/components/AppMenu.vue b/core/src/components/AppMenu.vue index 6f65f185a4dab..b9373c82ac6d2 100644 --- a/core/src/components/AppMenu.vue +++ b/core/src/components/AppMenu.vue @@ -20,7 +20,8 @@ -->