Add Tooltip to AccessibleButton (#12443)

* Deprecate AccessibleTooltipButton

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Deprecate AccessibleTooltipButton

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix `UserInfo-test.tsx`

* Update `LoginWithQRFlow-test.tsx` snapshot

* Remove tooltip provider from test

* Fix `AccessibleButton`

* Update snapshots

* Revert to original import

* Use title to populate aria-label

* Rollback AccessibleButton or Tooltip changes. Will come in another PR

* Rollback en.json change

* Update snapshots

* Fix `UserInfo`

* Update snapshots

* Use label instead of title in test

* Use label instead of title in TAC test

* Use label instead of title in read-receipt test

* Remove tooltip for ContextMenu

* Add extra information for caption field

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Florian Duros 2024-04-24 14:24:25 +02:00 committed by GitHub
parent 644bf78e2a
commit 700b3955a4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 147 additions and 76 deletions

View file

@ -135,20 +135,26 @@ exports[`<CurrentDeviceSection /> handles when device is falsy 1`] = `
>
Current session
</h3>
<div
aria-disabled="true"
aria-expanded="false"
aria-haspopup="true"
class="mx_AccessibleButton mx_AccessibleButton_disabled"
data-testid="current-session-menu"
disabled=""
role="button"
<span
data-state="closed"
tabindex="0"
>
<div
class="mx_KebabContextMenu_icon"
/>
</div>
aria-disabled="true"
aria-expanded="false"
aria-haspopup="true"
aria-label="Options"
class="mx_AccessibleButton mx_AccessibleButton_disabled"
data-testid="current-session-menu"
disabled=""
role="button"
tabindex="0"
>
<div
class="mx_KebabContextMenu_icon"
/>
</div>
</span>
</div>
<div
class="mx_SettingsSubsection_content"
@ -174,7 +180,9 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
<div
aria-expanded="false"
aria-haspopup="true"
aria-label="Options"
class="mx_AccessibleButton"
data-state="closed"
data-testid="current-session-menu"
role="button"
tabindex="0"
@ -317,7 +325,9 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
<div
aria-expanded="false"
aria-haspopup="true"
aria-label="Options"
class="mx_AccessibleButton"
data-state="closed"
data-testid="current-session-menu"
role="button"
tabindex="0"

View file

@ -517,11 +517,12 @@ exports[`<LoginWithQRFlow /> renders QR code 1`] = `
class="mx_LoginWithQR_heading"
>
<div
aria-label="Back"
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
data-state="closed"
data-testid="back-button"
role="button"
tabindex="0"
title="Back"
>
<div />
</div>
@ -649,11 +650,12 @@ exports[`<LoginWithQRFlow /> renders spinner while connecting 1`] = `
class="mx_LoginWithQR_heading"
>
<div
aria-label="Back"
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
data-state="closed"
data-testid="back-button"
role="button"
tabindex="0"
title="Back"
>
<div />
</div>
@ -719,11 +721,12 @@ exports[`<LoginWithQRFlow /> renders spinner while loading 1`] = `
class="mx_LoginWithQR_heading"
>
<div
aria-label="Back"
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
data-state="closed"
data-testid="back-button"
role="button"
tabindex="0"
title="Back"
>
<div />
</div>
@ -777,11 +780,12 @@ exports[`<LoginWithQRFlow /> renders spinner while signing in 1`] = `
class="mx_LoginWithQR_heading"
>
<div
aria-label="Back"
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
data-state="closed"
data-testid="back-button"
role="button"
tabindex="0"
title="Back"
>
<div />
</div>
@ -847,11 +851,12 @@ exports[`<LoginWithQRFlow /> renders spinner while verifying 1`] = `
class="mx_LoginWithQR_heading"
>
<div
aria-label="Back"
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
data-state="closed"
data-testid="back-button"
role="button"
tabindex="0"
title="Back"
>
<div />
</div>
@ -908,11 +913,12 @@ exports[`<LoginWithQRFlow /> renders spinner whilst QR generating 1`] = `
class="mx_LoginWithQR_heading"
>
<div
aria-label="Back"
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
data-state="closed"
data-testid="back-button"
role="button"
tabindex="0"
title="Back"
>
<div />
</div>

View file

@ -68,10 +68,11 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
</div>
</div>
<div
aria-label="Deny"
class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary_outline"
data-state="closed"
role="button"
tabindex="0"
title="Deny"
>
<div
height="18"
@ -79,10 +80,11 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
/>
</div>
<div
aria-label="Approve"
class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary"
data-state="closed"
role="button"
tabindex="0"
title="Approve"
>
<div
height="18"
@ -135,10 +137,11 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests reduced 1`
</span>
</div>
<div
aria-label="Deny"
class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary_outline"
data-state="closed"
role="button"
tabindex="0"
title="Deny"
>
<div
height="18"
@ -146,10 +149,11 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests reduced 1`
/>
</div>
<div
aria-label="Approve"
class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary"
data-state="closed"
role="button"
tabindex="0"
title="Approve"
>
<div
height="18"

View file

@ -84,7 +84,9 @@ exports[`<SessionManagerTab /> current session section renders current session s
<div
aria-expanded="false"
aria-haspopup="true"
aria-label="Options"
class="mx_AccessibleButton"
data-state="closed"
data-testid="current-session-menu"
role="button"
tabindex="0"
@ -213,7 +215,9 @@ exports[`<SessionManagerTab /> current session section renders current session s
<div
aria-expanded="false"
aria-haspopup="true"
aria-label="Options"
class="mx_AccessibleButton"
data-state="closed"
data-testid="current-session-menu"
role="button"
tabindex="0"