bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-20 18:23:31 +00:00
Code Issues Releases Wiki Activity

[CL-879] use tooltip on icon button (#16576)

Browse Source 
* Add tooltip to icon button to display label

* remove legacy cdr variable

* create overlay on focus or hover

* attach describdedby ids

* fix type errors

* remove aria-describedby when not necessary

* fix failing tests

* implement Claude feedback

* fixing broken specs

* remove host attr binding

* Simplify directive aria logic

* Move id to statis number

* do not render empty tooltip

* pass id to tooltip component

* remove pointer-events none to allow tooltip on normal buttons

* exclude some tooltip stories

* change describedby input name

* add story with tooltip on regular button

* enhanced tooltip docs

* set model directly

* change model to input
This commit is contained in:
Bryan Cunningham
2025-10-29 09:49:16 -04:00
committed by GitHub
parent 460d66d624
commit 5b815c4ae4
11 changed files with 137 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
libs/vault/src/cipher-form/components/attachments/delete-attachment/delete-attachment.component.spec.ts
View File

@@ -68,7 +68,7 @@ describe("DeleteAttachmentComponent", () => {
it("renders delete button", () => {
const deleteButton = fixture.debugElement.query(By.css("button"));
expect(deleteButton.attributes["title"]).toBe("deleteAttachmentName");
expect(deleteButton.attributes["aria-label"]).toBe("deleteAttachmentName");
});
it("does not delete when the user cancels the dialog", async () => {

10
libs/vault/src/cipher-form/components/autofill-options/uri-option.component.spec.ts
View File

@@ -149,13 +149,17 @@ describe("UriOptionComponent", () => {
expect(getMatchDetectionSelect()).not.toBeNull();
});
it("should update the match detection button title when the toggle is clicked", () => {
it("should update the match detection button aria-label when the toggle is clicked", () => {
component.writeValue({ uri: "https://example.com", matchDetection: UriMatchStrategy.Exact });
fixture.detectChanges();
expect(getToggleMatchDetectionBtn().title).toBe("showMatchDetection https://example.com");
expect(getToggleMatchDetectionBtn().getAttribute("aria-label")).toBe(
"showMatchDetection https://example.com",
);
getToggleMatchDetectionBtn().click();
fixture.detectChanges();
expect(getToggleMatchDetectionBtn().title).toBe("hideMatchDetection https://example.com");
expect(getToggleMatchDetectionBtn().getAttribute("aria-label")).toBe(
"hideMatchDetection https://example.com",
);
});
});

2
libs/vault/src/components/download-attachment/download-attachment.component.spec.ts
View File

@@ -108,7 +108,7 @@ describe("DownloadAttachmentComponent", () => {
it("renders delete button", () => {
const deleteButton = fixture.debugElement.query(By.css("button"));
expect(deleteButton.attributes["title"]).toBe("downloadAttachmentName");
expect(deleteButton.attributes["aria-label"]).toBe("downloadAttachmentName");
});
describe("download attachment", () => {