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

[CL-910] Use tooltip in title directive (#17084)

Browse Source 
* use tooltip in a11y directive

* remove commented code

* add deprecation warning to appA11yTitle directive

* use label for tooltip in carousel nav

* wait for timeout before assertion

* remove unnecessary title directive use

* fix private variable lint errors

* increase tooltip show delay

* fix spec delay and export as constant

* use delay constant

---------

Co-authored-by: Vicki League <vleague@bitwarden.com>
This commit is contained in:
Bryan Cunningham
2025-12-01 11:59:20 -05:00
committed by GitHub
parent 4a2858132d
commit 963a9156fb
7 changed files with 38 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
libs/components/src/icon-button/icon-button.component.ts
View File

@@ -120,7 +120,7 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
* label input will be used to set the `aria-label` attributes on the button.
* This is for accessibility purposes, as it provides a text alternative for the icon button.
*
* NOTE: It will also be used to set the `title` attribute on the button if no `title` is provided.
* NOTE: It will also be used to set the content of the tooltip on the button if no `title` is provided.
*/
readonly label = input<string>();

9
libs/components/src/icon-button/icon-button.mdx
View File

@@ -81,10 +81,5 @@ with less padding around the icon, such as in the navigation component.
Follow guidelines outlined in the [Button docs](?path=/docs/component-library-button--doc)
Always use the `appA11yTitle` directive set to a string that describes the action of the
icon-button. This will auto assign the same string to the `title` and `aria-label` attributes.
`aria-label` allows assistive technology to announce the action the button takes to the users.
`title` attribute provides a user with the browser tool tip if they do not understand what the icon
is indicating.
label input will be used to set the `aria-label` attributes on the button. This is for accessibility
purposes, as it provides a text alternative for the icon button.