yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix keyboard navigation

Browse Source
This commit is contained in:
JesmoDev
2024-04-24 19:32:50 +02:00
parent f03db2b55c
commit e3215d2670
1 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts
View File

@@ -337,7 +337,12 @@ export class UmbSearchModalElement extends UmbLitElement {
#closeModal(event: MouseEvent | KeyboardEvent) {
if (event instanceof KeyboardEvent && event.key !== 'Enter') return;
this.modalContext?.reject();
requestAnimationFrame(() => {
// In the case where the browser has not triggered focus-visible and we keyboard navigate and press enter.
// It is necessary to wait one frame.
this.modalContext?.reject();
});
}
static styles = [
@@ -456,6 +461,10 @@ export class UmbSearchModalElement extends UmbLitElement {
outline-offset: -3px;
display: flex;
}
.search-item:hover {
background: var(--uui-color-surface-emphasis);
color: var(--uui-color-interactive-emphasis);
}
.search-item:focus {
outline: 2px solid var(--uui-color-interactive-emphasis);
border-radius: 6px;