Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Add Tooltip to AccessibleButton #12443

Merged
merged 29 commits into from
Apr 24, 2024

Conversation

florianduros
Copy link
Contributor

@florianduros florianduros commented Apr 19, 2024

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

Checklist

  • Tests written for new code (and old code if feasible).
  • New or updated public/exported symbols have accurate TSDoc documentation.
  • Linter and other CI checks pass.
  • Sign-off given on the changes (see CONTRIBUTING.md).

Part of element-hq/element-web#26762
Started in #12143 . New PR and branch because I rollbacked some changes.

This PR:

  • Add a tooltip to AccessibleButton
    When a title attribute is added on a div/button/etc, the browser displays a built in tooltip when the element is hovered. Instead we display a compound tooltip to be more accessible and to harmonize (visual and behaviour) all the element tooltips.
  • Deprecate AccessibleTooltipButton, AccessibleButton with the new integrated tooltip is enough and use the compoud tooltip. AccessibleTooltipButton uses the old react-sdk tooltip.
    In a new PR, the AccessibleTooltipButton usage will be migrated to AccessibleButton.

t3chguy and others added 16 commits January 15, 2024 10:43
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
# Conflicts:
#	src/components/views/spaces/SpacePanel.tsx
#	test/components/structures/UserMenu-test.tsx
#	test/components/views/rooms/RoomList-test.tsx
#	test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap
#	test/components/views/spaces/SpacePanel-test.tsx
@florianduros florianduros added the T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements label Apr 19, 2024
@florianduros florianduros requested a review from a team as a code owner April 22, 2024 13:15
Copy link
Member

@richvdh richvdh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@florianduros florianduros added this pull request to the merge queue Apr 24, 2024
Merged via the queue into develop with commit 700b395 Apr 24, 2024
22 checks passed
@florianduros florianduros deleted the florianduros/add-tooltip-accessiblebutton branch April 24, 2024 12:46
netbsd-srcmastr pushed a commit to NetBSD/pkgsrc that referenced this pull request Jul 6, 2024
Changes in [1.11.69](https://github.com/element-hq/element-web/releases/tag/v1.11.69) (2024-06-18)
==================================================================================================
## ✨ Features

* Change avatar setting component to use a menu ([#12585](matrix-org/matrix-react-sdk#12585)). Contributed by @dbkr.
* New user profile UI in User Settings ([#12548](matrix-org/matrix-react-sdk#12548)). Contributed by @dbkr.
* MSC4108 support OIDC QR code login ([#12370](matrix-org/matrix-react-sdk#12370)). Contributed by @t3chguy.

## 🐛 Bug Fixes

* Fix image upload preview size ([#12612](matrix-org/matrix-react-sdk#12612)). Contributed by @RiotRobot.
* Fix screen sharing in recent Chrome (matrix-org/matrix-js-sdk#4243).
* Fix roving tab index crash `compareDocumentPosition` ([#12594](matrix-org/matrix-react-sdk#12594)). Contributed by @t3chguy.
* Keep dialog glass border on narrow screens ([#12591](matrix-org/matrix-react-sdk#12591)). Contributed by @dbkr.
* Add missing a11y label to dismiss onboarding button in room list ([#12587](matrix-org/matrix-react-sdk#12587)). Contributed by @t3chguy.
* Add hover / active state on avatar setting upload button ([#12590](matrix-org/matrix-react-sdk#12590)). Contributed by @dbkr.
* Fix EditInPlace button styles ([#12589](matrix-org/matrix-react-sdk#12589)). Contributed by @dbkr.
* Fix incorrect assumptions about required fields in /search response ([#12575](matrix-org/matrix-react-sdk#12575)). Contributed by @t3chguy.
* Fix display of no avatar in avatar setting controls ([#12558](matrix-org/matrix-react-sdk#12558)). Contributed by @dbkr.
* Element-R: pass pickleKey in as raw key for indexeddb encryption ([#12543](matrix-org/matrix-react-sdk#12543)). Contributed by @richvdh.



Changes in [1.11.68](https://github.com/element-hq/element-web/releases/tag/v1.11.68) (2024-06-04)
==================================================================================================
## ✨ Features

* Tooltip: Improve accessibility for  context menus ([#12462](matrix-org/matrix-react-sdk#12462)). Contributed by @florianduros.
* Tooltip: Improve accessibility of space panel ([#12525](matrix-org/matrix-react-sdk#12525)). Contributed by @florianduros.

## 🐛 Bug Fixes

* Close the release announcement when a dialog is opened ([#12559](matrix-org/matrix-react-sdk#12559)). Contributed by @florianduros.
* Tooltip: close field tooltip when ESC is pressed ([#12553](matrix-org/matrix-react-sdk#12553)). Contributed by @florianduros.
* Fix tabbedview breakpoint width ([#12556](matrix-org/matrix-react-sdk#12556)). Contributed by @dbkr.
* Fix E2E icon display in room header ([#12545](matrix-org/matrix-react-sdk#12545)). Contributed by @florianduros.
* Tooltip: Improve placement for space settings ([#12541](matrix-org/matrix-react-sdk#12541)). Contributed by @florianduros.
* Fix deformed avatar in a call in a narrow timeline ([#12538](matrix-org/matrix-react-sdk#12538)). Contributed by @florianduros.
* Shown own sent state indicator even when showReadReceipts is disabled ([#12540](matrix-org/matrix-react-sdk#12540)). Contributed by @t3chguy.
* Ensure we do not fire the verification mismatch modal multiple times ([#12526](matrix-org/matrix-react-sdk#12526)). Contributed by @t3chguy.
* Fix avatar in chat export ([#12537](matrix-org/matrix-react-sdk#12537)). Contributed by @florianduros.
* Use `*` for italics as it doesn't break when used mid-word ([#12523](matrix-org/matrix-react-sdk#12523)). Contributed by @t3chguy.


Changes in [1.11.67](https://github.com/element-hq/element-web/releases/tag/v1.11.67) (2024-05-22)
==================================================================================================
## ✨ Features

* Tooltip: Improve the accessibility of the composer and the rich text editor ([#12459](matrix-org/matrix-react-sdk#12459)). Contributed by @florianduros.
* Allow explicit configuration of OIDC dynamic registration metadata ([#12514](matrix-org/matrix-react-sdk#12514)). Contributed by @t3chguy.
* Tooltip: improve accessibility for messages ([#12487](matrix-org/matrix-react-sdk#12487)). Contributed by @florianduros.
* Collapse UserSettings tabs to just icons on narrow screens ([#12505](matrix-org/matrix-react-sdk#12505)). Contributed by @dbkr.
* Add room topic to right panel room info ([#12503](matrix-org/matrix-react-sdk#12503)). Contributed by @t3chguy.
* OIDC: pass `id_token` via `id_token_hint` on Manage Account interaction ([#12499](matrix-org/matrix-react-sdk#12499)). Contributed by @t3chguy.
* Tooltip: improve accessibility in room ([#12493](matrix-org/matrix-react-sdk#12493)). Contributed by @florianduros.
* Tooltip: improve accessibility for call and voice messages ([#12489](matrix-org/matrix-react-sdk#12489)). Contributed by @florianduros.
* Move the active tab in user settings to the dialog title ([#12481](matrix-org/matrix-react-sdk#12481)). Contributed by @dbkr.
* Tooltip: improve accessibility of spaces ([#12497](matrix-org/matrix-react-sdk#12497)). Contributed by @florianduros.
* Tooltip: improve accessibility of the right panel ([#12490](matrix-org/matrix-react-sdk#12490)). Contributed by @florianduros.
* MSC3575 (Sliding Sync) add well-known proxy support ([#12307](matrix-org/matrix-react-sdk#12307)). Contributed by @EdGeraghty.

## 🐛 Bug Fixes

* Reuse single PlaybackWorker between Playback instances ([#12520](matrix-org/matrix-react-sdk#12520)). Contributed by @t3chguy.
* Fix well-known lookup for sliding sync labs check ([#12519](matrix-org/matrix-react-sdk#12519)). Contributed by @t3chguy.
* Fix `element-desktop-ssoid being` included in OIDC Authorization call ([#12495](matrix-org/matrix-react-sdk#12495)). Contributed by @t3chguy.
* Fix beta notifications reconciliation for intentional mentions push rules ([#12510](matrix-org/matrix-react-sdk#12510)). Contributed by @t3chguy.
* fix avatar stretched on 1:1 call ([#12494](matrix-org/matrix-react-sdk#12494)). Contributed by @I-lander.
* Check native sliding sync support against an unstable feature flag ([#12498](matrix-org/matrix-react-sdk#12498)). Contributed by @turt2live.
* Use OPTIONS for sliding sync detection poke ([#12492](matrix-org/matrix-react-sdk#12492)). Contributed by @turt2live.
* TAC: hide tooltip when the release announcement is displayed ([#12472](matrix-org/matrix-react-sdk#12472)). Contributed by @florianduros.



Changes in [1.11.66](https://github.com/element-hq/element-web/releases/tag/v1.11.66) (2024-05-07)
==================================================================================================
## ✨ Features

* Use a different error message for UTDs when you weren't in the room. ([#12453](matrix-org/matrix-react-sdk#12453)). Contributed by @uhoreg.
* Take the Threads Activity Centre out of labs ([#12439](matrix-org/matrix-react-sdk#12439)). Contributed by @dbkr.
* Expected UTDs: use a different message for UTDs sent before login ([#12391](matrix-org/matrix-react-sdk#12391)). Contributed by @richvdh.
* Add `Tooltip` to `AccessibleButton` ([#12443](matrix-org/matrix-react-sdk#12443)). Contributed by @florianduros.
* Add analytics to activity toggles ([#12418](matrix-org/matrix-react-sdk#12418)). Contributed by @dbkr.
* Decrypt events in reverse order without copying the array ([#12445](matrix-org/matrix-react-sdk#12445)). Contributed by @Johennes.
* Use new compound tooltip ([#12416](matrix-org/matrix-react-sdk#12416)). Contributed by @florianduros.
* Expected UTDs: report a different Posthog code ([#12389](matrix-org/matrix-react-sdk#12389)). Contributed by @richvdh.

## 🐛 Bug Fixes

* TAC: Fix accessibility issue when the Release announcement is displayed ([#12484](matrix-org/matrix-react-sdk#12484)). Contributed by @RiotRobot.
* TAC: Close Release Announcement when TAC button is clicked ([#12485](matrix-org/matrix-react-sdk#12485)). Contributed by @florianduros.
* MenuItem: fix caption usage ([#12455](matrix-org/matrix-react-sdk#12455)). Contributed by @florianduros.
* Show the local echo in previews ([#12451](matrix-org/matrix-react-sdk#12451)). Contributed by @langleyd.
* Fixed the drag and drop of X #27186 ([#12450](matrix-org/matrix-react-sdk#12450)). Contributed by @asimdelvi.
* Move the TAC to above the button ([#12438](matrix-org/matrix-react-sdk#12438)). Contributed by @dbkr.
* Use the same logic in previews as the timeline to hide events that should be hidden ([#12434](matrix-org/matrix-react-sdk#12434)). Contributed by @langleyd.
* Fix selector so maths support doesn't mangle divs ([#12433](matrix-org/matrix-react-sdk#12433)). Contributed by @uhoreg.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants