ADOFAIEditorForum/ComponentTest
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Dropdown Focus Behavior to Be More Accessible

Browse Source
This commit is contained in:
copecone committed 2026-04-21 15:52:20 +09:00
1 parent c21845a579
commit 9092c97b9c
3 files changed
+75 -52
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/components/dropdown/dropdown.html
+7 -6
View File
@@ -1,22 +1,23 @@
<ng-template #inputTemplate>
<div #searchInput class="dropdown-input" [class.hidden]="!isOpen()" [class.focus-mode]="inputFocusMode()"
contenteditable="true" role="textbox" aria-multiline="false" [aria-placeholder]="translation.common.selectOption" [aria-activedescendant]="ariaActiveDescendant()"
[attr.placeholder]="translation.common.selectOption" tabindex="-1" spellcheck="false"
(input)="onSearch($event)" (click)="handleInputClick($event)" (mousedown)="handleInputMouseDown()" (beforeinput)="preprocessInputContent($event)"></div>
contenteditable="true" role="textbox" aria-multiline="false" [aria-placeholder]="placeholder().trim().length > 0 ? placeholder() : translation.common.selectOption" [aria-activedescendant]="ariaActiveDescendant()"
[attr.placeholder]="placeholder().trim().length > 0 ? placeholder() : translation.common.selectOption" tabindex="-1" spellcheck="false"
(input)="onSearch($event)" (click)="handleInputClick($event)" (mousedown)="handleInputMouseDown()" (beforeinput)="preprocessInputContent($event)"
(focus)="onInputFocusIn()" (focusout)="onInputFocusOut()"></div>
</ng-template>
<div class="dropdown-box">
@if (icon()) {
<span class="material-symbols-outlined icon-24 prefix-icon">{{ icon() }}</span>
<span class="material-symbols-outlined icon-24 prefix-icon" aria-hidden="true">{{ icon() }}</span>
}
@if (recreateKey() % 2 == 0) {<ng-container [ngTemplateOutlet]="inputTemplate" />}
@else {<ng-container [ngTemplateOutlet]="inputTemplate" />}
@if (!isOpen()) {
<span class="placeholder">{{ selectedLabel() }}</span>
<span class="placeholder" [class.value-empty]="selectedOption() === undefined">{{ selectedLabel() }}</span>
}
<span class="material-symbols-outlined icon-24 chevron" [class.open]="isOpen()">keyboard_arrow_down</span>
<span class="material-symbols-outlined icon-24 chevron" aria-hidden="true" [class.open]="isOpen()">keyboard_arrow_down</span>
</div>
@if (isOpen()) {