Skip to content

Commit

Permalink
enh(a11y): Use button as header menu trigger
Browse files Browse the repository at this point in the history
Signed-off-by: Christopher Ng <chrng8@gmail.com>
  • Loading branch information
Pytal committed Aug 30, 2023
1 parent bdab171 commit 63aca76
Showing 1 changed file with 6 additions and 5 deletions.
11 changes: 6 additions & 5 deletions src/components/NcHeaderMenu/NcHeaderMenu.vue
Expand Up @@ -68,18 +68,17 @@ export default {
v-click-outside="clickOutsideConfig"
:class="{ 'header-menu--opened': opened }"
class="header-menu">
<!-- Open trigger icon -->
<a ref="trigger"
class="header-menu__trigger"
href="#"
<!-- Trigger -->
<button ref="trigger"
class="header-menu__trigger button-vue"
:aria-label="ariaLabel"
:aria-controls="`header-menu-${id}`"
:aria-expanded="opened.toString()"
@click.prevent="toggleMenu">
<!-- @slot Icon trigger slot. Make sure the svg path
is at least 16px. Usually mdi icon works at 20px -->
<slot name="trigger" />
</a>
</button>

<!-- Visual triangle -->
<div v-show="opened" class="header-menu__carret" />
Expand Down Expand Up @@ -293,6 +292,8 @@ $externalMargin: 8px;
padding: 0;
cursor: pointer;
opacity: .85;
background-color: transparent;
border: none;
// header is filled with primary or image background
filter: none !important;
Expand Down

0 comments on commit 63aca76

Please sign in to comment.