bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-06 19:53:59 +00:00
Code Issues Releases Wiki Activity

address feedback: add ngClass; improve accessibility

Browse Source
This commit is contained in:
bensbits91
2025-06-10 09:54:02 -07:00
parent 1b7e24a3f7
commit ec918e91a0
2 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
libs/components/src/search/search.component.html
View File

@@ -1,6 +1,6 @@
<label class="tw-sr-only" [for]="id">{{ "search" | i18n }}</label>
<div class="tw-relative tw-flex tw-items-center">
<form class="tw-relative tw-flex tw-items-center tw-w-full">
<form role="search" class="tw-relative tw-flex tw-items-center tw-w-full">
<label class="tw-sr-only" [for]="id">{{ "search" | i18n }}</label>
<label
[for]="id"
aria-hidden="true"
@@ -29,10 +29,14 @@
*ngIf="searchText"
(mouseenter)="resetHovered = true"
(mouseleave)="resetHovered = false"
[class.opacity-0]="!isInputFocused && !isInputHovered && !resetHovered"
[class.tw-bg-text-muted]="isInputFocused || isInputHovered || resetHovered"
[ngClass]="{
'tw-opacity-0': !isInputFocused && !isInputHovered && !resetHovered,
'tw-bg-text-muted': isInputFocused || isInputHovered || resetHovered,
}"
class="bw-reset-btn tw-size-6 tw-absolute hover:tw-bg-text-main tw-right-2 tw-z-20 !tw-mb-0 tw-cursor-pointer"
type="reset"
[attr.aria-label]="searchText ? ('Reset search' | i18n) : ('' | i18n)"
[attr.aria-hidden]="!searchText"
(click)="clearSearch()"
></button>
</form>

4
libs/components/src/search/search.component.ts
View File

@@ -1,6 +1,6 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { NgIf } from "@angular/common";
import { NgIf, NgClass } from "@angular/common";
import { Component, ElementRef, Input, ViewChild } from "@angular/core";
import {
ControlValueAccessor,
@@ -32,7 +32,7 @@ let nextId = 0;
},
],
standalone: true,
imports: [InputModule, ReactiveFormsModule, FormsModule, I18nPipe, NgIf],
imports: [InputModule, ReactiveFormsModule, FormsModule, I18nPipe, NgIf, NgClass],
})
export class SearchComponent implements ControlValueAccessor, FocusableElement {
private notifyOnChange: (v: string) => void;