From d9c6cdddb50c4299b8888c0fb2a5c1db90f47caa Mon Sep 17 00:00:00 2001 From: Michael Bromley Date: Fri, 30 Jun 2023 16:27:02 +0200 Subject: [PATCH] fix(admin-ui): Make dropdowns keyboard-accessible --- .../dropdown/dropdown-menu.component.scss | 4 ++ .../dropdown/dropdown-menu.component.ts | 44 ++++++++++++++++++- .../components/dropdown/dropdown.component.ts | 2 +- .../src/lib/core/src/shared/shared.module.ts | 2 + .../src/lib/static/styles/theme/default.scss | 2 + 5 files changed, 51 insertions(+), 3 deletions(-) diff --git a/packages/admin-ui/src/lib/core/src/shared/components/dropdown/dropdown-menu.component.scss b/packages/admin-ui/src/lib/core/src/shared/components/dropdown/dropdown-menu.component.scss index 5ccb194488..2eddcac12b 100644 --- a/packages/admin-ui/src/lib/core/src/shared/components/dropdown/dropdown-menu.component.scss +++ b/packages/admin-ui/src/lib/core/src/shared/components/dropdown/dropdown-menu.component.scss @@ -15,6 +15,10 @@ clr-icon { margin-right: 3px; } + &:focus { + outline: var(--color-dropdown-item-focus-outline) solid 1px; + outline-offset: 1px 0; + } } } diff --git a/packages/admin-ui/src/lib/core/src/shared/components/dropdown/dropdown-menu.component.ts b/packages/admin-ui/src/lib/core/src/shared/components/dropdown/dropdown-menu.component.ts index 67354b44ff..25b37db1f5 100644 --- a/packages/admin-ui/src/lib/core/src/shared/components/dropdown/dropdown-menu.component.ts +++ b/packages/admin-ui/src/lib/core/src/shared/components/dropdown/dropdown-menu.component.ts @@ -13,6 +13,7 @@ import { Component, ContentChild, ElementRef, + HostListener, Input, OnDestroy, OnInit, @@ -42,7 +43,11 @@ export type DropdownPosition = 'top-left' | 'top-right' | 'bottom-left' | 'botto