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:
parent
644bf78e2a
commit
700b3955a4
24 changed files with 147 additions and 76 deletions
|
@ -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"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue