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

Tooltip: Improve the accessibility of the composer and the rich text editor #12459

Merged
merged 13 commits into from
May 15, 2024

Conversation

florianduros
Copy link
Contributor

@florianduros florianduros commented Apr 26, 2024

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
Following #12443, AccessibleButton includes the new tooltip. We are migrating step by step the usage of the deprecated AccessibleTooltipButton to AccessibleButton.
Depends of #12458 for RovingAccessibleTooltipButton migration.
Depends of element-hq/compound-web#165 to use <kbd /> for shortcut in tooltips of formatting buttons.

Marking it at T-Enhancement because it's in the objective to improve accessibility.

Migrating both composer.

@florianduros florianduros changed the title Tooltip: Use AccessibleButton for composer & rich text editor Tooltip: Use AccessibleButton for composer & rich text editor Apr 26, 2024
@florianduros florianduros added the T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements label Apr 26, 2024
# Conflicts:
#	src/accessibility/roving/RovingAccessibleTooltipButton.tsx
@florianduros florianduros changed the title Tooltip: Use AccessibleButton for composer & rich text editor Improve the accessibility of the composer and the rich text editor Apr 30, 2024
@florianduros florianduros changed the title Improve the accessibility of the composer and the rich text editor Improve the tooltip accessibility of the composer and the rich text editor Apr 30, 2024
@florianduros florianduros marked this pull request as ready for review April 30, 2024 12:30
@florianduros florianduros requested a review from a team as a code owner April 30, 2024 12:30
src/components/views/rooms/MessageComposerButtons.tsx Outdated Show resolved Hide resolved
Copy link
Member

@t3chguy t3chguy Apr 30, 2024

Choose a reason for hiding this comment

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

The changes here feel like a visual regression, can design sign off on losing the keyboard key styling here?

Copy link
Member

Choose a reason for hiding this comment

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

Actually my bad, there's no visual regression, only an a11y one. The kbd elements are lost and thus also are the semantics

Before:
image

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good catch, will need to update the tooltip compound to be able this use case.

Copy link
Member

@t3chguy t3chguy left a comment

Choose a reason for hiding this comment

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

See above comments

@florianduros florianduros force-pushed the florianduros/tooltip/composer branch from df840fe to 64f1ab0 Compare May 7, 2024 08:36
@florianduros florianduros changed the title Improve the tooltip accessibility of the composer and the rich text editor Tooltip: Improve the accessibility of the composer and the rich text editor May 7, 2024
@florianduros florianduros added this pull request to the merge queue May 15, 2024
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks May 15, 2024
@florianduros florianduros added this pull request to the merge queue May 15, 2024
Merged via the queue into develop with commit 77a7245 May 15, 2024
30 checks passed
@florianduros florianduros deleted the florianduros/tooltip/composer branch May 15, 2024 08:53
bmwiedemann pushed a commit to bmwiedemann/openSUSE that referenced this pull request May 22, 2024
https://build.opensuse.org/request/show/1175893
by user dheidler + anag+factory
- Version 1.11.67
  ## ✨ Features
  * Tooltip: Improve the accessibility of the composer and the rich text editor (matrix-org/matrix-react-sdk#12459). Contributed by @florianduros.
  * Allow explicit configuration of OIDC dynamic registration metadata (matrix-org/matrix-react-sdk#12514). Contributed by @t3chguy.
  * Tooltip: improve accessibility for messages (matrix-org/matrix-react-sdk#12487). Contributed by @florianduros.
  * Collapse UserSettings tabs to just icons on narrow screens (matrix-org/matrix-react-sdk#12505). Contributed by @dbkr.
  * Add room topic to right panel room info (matrix-org/matrix-react-sdk#12503). Contributed by @t3chguy.
  * OIDC: pass `id_token
bmwiedemann pushed a commit to bmwiedemann/openSUSE that referenced this pull request May 22, 2024
https://build.opensuse.org/request/show/1175898
by user dheidler + anag+factory
- Version 1.11.67
  ## ✨ Features
  * Tooltip: Improve the accessibility of the composer and the rich text editor (matrix-org/matrix-react-sdk#12459). Contributed by @florianduros.
  * Allow explicit configuration of OIDC dynamic registration metadata (matrix-org/matrix-react-sdk#12514). Contributed by @t3chguy.
  * Tooltip: improve accessibility for messages (matrix-org/matrix-react-sdk#12487). Contributed by @florianduros.
  * Collapse UserSettings tabs to just icons on narrow screens (matrix-org/matrix-react-sdk#12505). Contributed by @dbkr.
  * Add room topic to right panel room info (matrix-org/matrix-react-sdk#12503). Contributed by @t3chguy.
  * OIDC: pass `id_token
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.

2 participants