Improve accessibility of font slider #10473

t3chguy · 2023-03-29T12:04:29Z

Fixes element-hq/element-web#20168
Closes #10126
Fixes element-hq/element-web#24962

Has to take some stylistic cuts in order to enable use of range input which screen readers understand.

Safari:

Chrome:

Firefox:

Screen.Recording.2023-03-29.at.12.57.04.mov

Resources:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
https://sipsandbits.com/2020/10/21/create-a-nice-looking-input-range-with-only-css/
https://codepen.io/nlfonseca/pen/MwbovQ
https://codepen.io/ShadowShahriar/pen/zYPPYrQ
https://css-tricks.com/value-bubbles-for-range-inputs/
https://www.cssportal.com/style-input-range/

Here's what your changelog entry will look like:

✨ Features

Improve accessibility of font slider (#10473). Fixes Font slider should be draggable element-hq/element-web#20168 and A11y: It's not possible to use the keyboard to navigate element-hq/element-web#24962.

t3chguy · 2023-03-29T14:18:43Z

@matrix-org/design I am happy to iterate on this design, but there will be some limitations from using a native input range element

kerryarchibald

Yay for using built in components!
Testing on chrome the keyboard navigation doesn't seem to work, I can only occasionally get it to change on left arrow.
I also think it needs some focus styling, up to design though

src/components/views/elements/Slider.tsx

t3chguy · 2023-03-30T16:38:10Z

Testing on chrome the keyboard navigation doesn't seem to work, I can only occasionally get it to change on left arrow.

I can reproduce in Chrome but not Firefox - Fn+Right (End) works though, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range behaves fine. Will play with it some more - EDIT: looks like it is a bug with step="any"

I also think it needs some focus styling, up to design though

Agreed!

t3chguy · 2023-03-30T16:41:40Z

Sorry about the force push, accidentally had a rebase merge in there

daniellekirkwood · 2023-03-31T16:27:24Z

Have used internal processes with @rufuskahler to ensure the design team are aware of this.

Personally, I think we should go ahead and approve these changes as they're an improvement for a11y and the component can be reviewed as part of design systems when this screen is updated in the future...

t3chguy · 2023-03-31T18:15:24Z

@daniellekirkwood at the very least it needs a focus style, even if it is just a focus outline, as right now there's no visual hint that your keyboard focus is on the element

daniellekirkwood · 2023-04-03T08:49:02Z

@daniellekirkwood at the very least it needs a focus style, even if it is just a focus outline, as right now there's no visual hint that your keyboard focus is on the element

as something extra to this PR? Or in the future?

t3chguy · 2023-04-03T08:49:47Z

@daniellekirkwood extra in this PR, otherwise the accessibility still sucks.

into t3chguy/fix/24962

t3chguy · 2023-04-04T13:10:29Z

@daniellekirkwood

I added a browser-matched accessible outline, if design is happy enough with that for now to approve we can re-visit focus outlines more holistically at another time

daniellekirkwood · 2023-04-05T11:18:33Z

So once tabbed in focus, it looks like this?

Happy with that, especially as this interaction will be updated with the new Design System soon enough.

t3chguy · 2023-04-05T11:21:49Z

@daniellekirkwood yes

nadonomy

LGTM to merge in as is.

I think there's an argument for the label to use the primary text colour for legibility, but would prefer to not over-think this for now as it'll get sanitised with Compound re-working in due course.

(cc @janogarcia @gsouquet in case you want to hotfix any tweaks when you're back in).

@andybalaam

* Fixes for [CVE-2023-30609](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE-2023-30609) / GHSA-xv83-x443-7rmw * Pick sensible default option for phone country dropdown ([\#10627](matrix-org/matrix-react-sdk#10627)). Fixes element-hq/element-web#3528. * Relate field validation tooltip via aria-describedby ([\#10522](matrix-org/matrix-react-sdk#10522)). Fixes element-hq/element-web#24963. * Handle more completion types in rte autocomplete ([\#10560](matrix-org/matrix-react-sdk#10560)). Contributed by @alunturner. * Show a tile for an unloaded predecessor room if it has via_servers ([\#10483](matrix-org/matrix-react-sdk#10483)). Contributed by @andybalaam. * Exclude message timestamps from aria live region ([\#10584](matrix-org/matrix-react-sdk#10584)). Fixes element-hq/element-web#5696. * Make composer format bar an aria toolbar ([\#10583](matrix-org/matrix-react-sdk#10583)). Fixes element-hq/element-web#11283. * Improve accessibility of font slider ([\#10473](matrix-org/matrix-react-sdk#10473)). Fixes element-hq/element-web#20168 and element-hq/element-web#24962. * fix file size display from kB to KB ([\#10561](matrix-org/matrix-react-sdk#10561)). Fixes element-hq/element-web#24866. Contributed by @NSV1991. * Handle /me in rte ([\#10558](matrix-org/matrix-react-sdk#10558)). Contributed by @alunturner. * bind html with switch for manage extension setting option ([\#10553](matrix-org/matrix-react-sdk#10553)). Contributed by @NSV1991. * Handle command completions in RTE ([\#10521](matrix-org/matrix-react-sdk#10521)). Contributed by @alunturner. * Add room and user avatars to rte ([\#10497](matrix-org/matrix-react-sdk#10497)). Contributed by @alunturner. * Support for MSC3882 revision 1 ([\#10443](matrix-org/matrix-react-sdk#10443)). Contributed by @hughns. * Check profiles before starting a DM ([\#10472](matrix-org/matrix-react-sdk#10472)). Fixes element-hq/element-web#24830. * Quick settings: Change the copy / labels on the options ([\#10427](matrix-org/matrix-react-sdk#10427)). Fixes element-hq/element-web#24522. Contributed by @justjanne. * Update rte autocomplete styling ([\#10503](matrix-org/matrix-react-sdk#10503)). Contributed by @alunturner. * Workaround Squirrel.Mac wedging app restart after failed update check ([\element-hq#629](element-hq#629)). * Fix error about webContents on log out ([\element-hq#627](element-hq#627)). * Fix error when breadcrumb image fails to load ([\element-hq#609](element-hq#609)). * Fix create subspace dialog not working ([\#10652](matrix-org/matrix-react-sdk#10652)). Fixes element-hq/element-web#24882 * Fix multiple accessibility defects identified by AXE ([\#10606](matrix-org/matrix-react-sdk#10606)). * Fix view source from edit history dialog always showing latest event ([\#10626](matrix-org/matrix-react-sdk#10626)). Fixes element-hq/element-web#21859. * #21451 Fix WebGL disabled error message ([\#10589](matrix-org/matrix-react-sdk#10589)). Contributed by @rashmitpankhania. * Properly translate errors in `AddThreepid.ts` so they show up translated to the user but not in our logs ([\#10432](matrix-org/matrix-react-sdk#10432)). Contributed by @MadLittleMods. * Fix overflow on auth pages ([\#10605](matrix-org/matrix-react-sdk#10605)). Fixes element-hq/element-web#19548. * Fix incorrect avatar background colour when using a custom theme ([\#10598](matrix-org/matrix-react-sdk#10598)). Contributed by @jdauphant. * Remove dependency on `org.matrix.e2e_cross_signing` unstable feature ([\#10593](matrix-org/matrix-react-sdk#10593)). * Update setting description to match reality ([\#10600](matrix-org/matrix-react-sdk#10600)). Fixes element-hq/element-web#25106. * Fix no identity server in help & about settings ([\#10563](matrix-org/matrix-react-sdk#10563)). Fixes element-hq/element-web#25077. * Fix: Images no longer reserve their space in the timeline correctly ([\#10571](matrix-org/matrix-react-sdk#10571)). Fixes element-hq/element-web#25082. Contributed by @kerryarchibald. * Fix issues with inhibited accessible focus outlines ([\#10579](matrix-org/matrix-react-sdk#10579)). Fixes element-hq/element-web#19742. * Fix read receipts falling from sky ([\#10576](matrix-org/matrix-react-sdk#10576)). Fixes element-hq/element-web#25081. * Fix avatar text issue in rte ([\#10559](matrix-org/matrix-react-sdk#10559)). Contributed by @alunturner. * fix resizer only work with left mouse click ([\#10546](matrix-org/matrix-react-sdk#10546)). Contributed by @NSV1991. * Fix send two join requests when joining a room from spotlight search ([\#10534](matrix-org/matrix-react-sdk#10534)). Fixes element-hq/element-web#25054. * Highlight event when any version triggered a highlight ([\#10502](matrix-org/matrix-react-sdk#10502)). Fixes element-hq/element-web#24923 and element-hq/element-web#24970. Contributed by @kerryarchibald. * Fix spacing of headings of integration manager on General settings tab ([\#10232](matrix-org/matrix-react-sdk#10232)). Fixes element-hq/element-web#24085. Contributed by @luixxiul.

@andybalaam

* Fixes for [CVE-2023-30609](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE-2023-30609) / GHSA-xv83-x443-7rmw * Pick sensible default option for phone country dropdown ([\element-hq#10627](matrix-org/matrix-react-sdk#10627)). Fixes element-hq#3528. * Relate field validation tooltip via aria-describedby ([\element-hq#10522](matrix-org/matrix-react-sdk#10522)). Fixes element-hq#24963. * Handle more completion types in rte autocomplete ([\element-hq#10560](matrix-org/matrix-react-sdk#10560)). Contributed by @alunturner. * Show a tile for an unloaded predecessor room if it has via_servers ([\element-hq#10483](matrix-org/matrix-react-sdk#10483)). Contributed by @andybalaam. * Exclude message timestamps from aria live region ([\element-hq#10584](matrix-org/matrix-react-sdk#10584)). Fixes element-hq#5696. * Make composer format bar an aria toolbar ([\element-hq#10583](matrix-org/matrix-react-sdk#10583)). Fixes element-hq#11283. * Improve accessibility of font slider ([\element-hq#10473](matrix-org/matrix-react-sdk#10473)). Fixes element-hq#20168 and element-hq#24962. * fix file size display from kB to KB ([\element-hq#10561](matrix-org/matrix-react-sdk#10561)). Fixes element-hq#24866. Contributed by @NSV1991. * Handle /me in rte ([\element-hq#10558](matrix-org/matrix-react-sdk#10558)). Contributed by @alunturner. * bind html with switch for manage extension setting option ([\element-hq#10553](matrix-org/matrix-react-sdk#10553)). Contributed by @NSV1991. * Handle command completions in RTE ([\element-hq#10521](matrix-org/matrix-react-sdk#10521)). Contributed by @alunturner. * Add room and user avatars to rte ([\element-hq#10497](matrix-org/matrix-react-sdk#10497)). Contributed by @alunturner. * Support for MSC3882 revision 1 ([\element-hq#10443](matrix-org/matrix-react-sdk#10443)). Contributed by @hughns. * Check profiles before starting a DM ([\element-hq#10472](matrix-org/matrix-react-sdk#10472)). Fixes element-hq#24830. * Quick settings: Change the copy / labels on the options ([\element-hq#10427](matrix-org/matrix-react-sdk#10427)). Fixes element-hq#24522. Contributed by @justjanne. * Update rte autocomplete styling ([\element-hq#10503](matrix-org/matrix-react-sdk#10503)). Contributed by @alunturner. * Fix create subspace dialog not working ([\element-hq#10652](matrix-org/matrix-react-sdk#10652)). Fixes element-hq#24882 * Fix multiple accessibility defects identified by AXE ([\element-hq#10606](matrix-org/matrix-react-sdk#10606)). * Fix view source from edit history dialog always showing latest event ([\element-hq#10626](matrix-org/matrix-react-sdk#10626)). Fixes element-hq#21859. * element-hq#21451 Fix WebGL disabled error message ([\element-hq#10589](matrix-org/matrix-react-sdk#10589)). Contributed by @rashmitpankhania. * Properly translate errors in `AddThreepid.ts` so they show up translated to the user but not in our logs ([\element-hq#10432](matrix-org/matrix-react-sdk#10432)). Contributed by @MadLittleMods. * Fix overflow on auth pages ([\element-hq#10605](matrix-org/matrix-react-sdk#10605)). Fixes element-hq#19548. * Fix incorrect avatar background colour when using a custom theme ([\#10598](matrix-org/matrix-react-sdk#10598)). Contributed by @jdauphant. * Remove dependency on `org.matrix.e2e_cross_signing` unstable feature ([\element-hq#10593](matrix-org/matrix-react-sdk#10593)). * Update setting description to match reality ([\element-hq#10600](matrix-org/matrix-react-sdk#10600)). Fixes element-hq#25106. * Fix no identity server in help & about settings ([\element-hq#10563](matrix-org/matrix-react-sdk#10563)). Fixes element-hq#25077. * Fix: Images no longer reserve their space in the timeline correctly ([\element-hq#10571](matrix-org/matrix-react-sdk#10571)). Fixes element-hq#25082. Contributed by @kerryarchibald. * Fix issues with inhibited accessible focus outlines ([\element-hq#10579](matrix-org/matrix-react-sdk#10579)). Fixes element-hq#19742. * Fix read receipts falling from sky ([\element-hq#10576](matrix-org/matrix-react-sdk#10576)). Fixes element-hq#25081. * Fix avatar text issue in rte ([\element-hq#10559](matrix-org/matrix-react-sdk#10559)). Contributed by @alunturner. * fix resizer only work with left mouse click ([\element-hq#10546](matrix-org/matrix-react-sdk#10546)). Contributed by @NSV1991. * Fix send two join requests when joining a room from spotlight search ([\#10534](matrix-org/matrix-react-sdk#10534)). Fixes element-hq#25054. * Highlight event when any version triggered a highlight ([\element-hq#10502](matrix-org/matrix-react-sdk#10502)). Fixes element-hq#24923 and element-hq#24970. Contributed by @kerryarchibald. * Fix spacing of headings of integration manager on General settings tab ([\element-hq#10232](matrix-org/matrix-react-sdk#10232)). Fixes element-hq#24085. Contributed by @luixxiul.

@andybalaam

Changes in [1.11.30](https://github.com/vector-im/element-web/releases/tag/v1.11.30) (2023-04-25) ================================================================================================= ## 🔒 Security * Fixes for [CVE-2023-30609](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE-2023-30609) / GHSA-xv83-x443-7rmw ## ✨ Features * Pick sensible default option for phone country dropdown ([\#10627](matrix-org/matrix-react-sdk#10627)). Fixes #3528. * Relate field validation tooltip via aria-describedby ([\#10522](matrix-org/matrix-react-sdk#10522)). Fixes #24963. * Handle more completion types in rte autocomplete ([\#10560](matrix-org/matrix-react-sdk#10560)). Contributed by @alunturner. * Show a tile for an unloaded predecessor room if it has via_servers ([\#10483](matrix-org/matrix-react-sdk#10483)). Contributed by @andybalaam. * Exclude message timestamps from aria live region ([\#10584](matrix-org/matrix-react-sdk#10584)). Fixes #5696. * Make composer format bar an aria toolbar ([\#10583](matrix-org/matrix-react-sdk#10583)). Fixes #11283. * Improve accessibility of font slider ([\#10473](matrix-org/matrix-react-sdk#10473)). Fixes #20168 and #24962. * fix file size display from kB to KB ([\#10561](matrix-org/matrix-react-sdk#10561)). Fixes #24866. Contributed by @NSV1991. * Handle /me in rte ([\#10558](matrix-org/matrix-react-sdk#10558)). Contributed by @alunturner. * bind html with switch for manage extension setting option ([\#10553](matrix-org/matrix-react-sdk#10553)). Contributed by @NSV1991. * Handle command completions in RTE ([\#10521](matrix-org/matrix-react-sdk#10521)). Contributed by @alunturner. * Add room and user avatars to rte ([\#10497](matrix-org/matrix-react-sdk#10497)). Contributed by @alunturner. * Support for MSC3882 revision 1 ([\#10443](matrix-org/matrix-react-sdk#10443)). Contributed by @hughns. * Check profiles before starting a DM ([\#10472](matrix-org/matrix-react-sdk#10472)). Fixes #24830. * Quick settings: Change the copy / labels on the options ([\#10427](matrix-org/matrix-react-sdk#10427)). Fixes #24522. Contributed by @justjanne. * Update rte autocomplete styling ([\#10503](matrix-org/matrix-react-sdk#10503)). Contributed by @alunturner. ## 🐛 Bug Fixes * Fix create subspace dialog not working ([\#10652](matrix-org/matrix-react-sdk#10652)). Fixes element-hq/element-web#24882 * Fix multiple accessibility defects identified by AXE ([\#10606](matrix-org/matrix-react-sdk#10606)). * Fix view source from edit history dialog always showing latest event ([\#10626](matrix-org/matrix-react-sdk#10626)). Fixes #21859. * #21451 Fix WebGL disabled error message ([\#10589](matrix-org/matrix-react-sdk#10589)). Contributed by @rashmitpankhania. * Properly translate errors in `AddThreepid.ts` so they show up translated to the user but not in our logs ([\#10432](matrix-org/matrix-react-sdk#10432)). Contributed by @MadLittleMods. * Fix overflow on auth pages ([\#10605](matrix-org/matrix-react-sdk#10605)). Fixes #19548. * Fix incorrect avatar background colour when using a custom theme ([\#10598](matrix-org/matrix-react-sdk#10598)). Contributed by @jdauphant. * Remove dependency on `org.matrix.e2e_cross_signing` unstable feature ([\#10593](matrix-org/matrix-react-sdk#10593)). * Update setting description to match reality ([\#10600](matrix-org/matrix-react-sdk#10600)). Fixes #25106. * Fix no identity server in help & about settings ([\#10563](matrix-org/matrix-react-sdk#10563)). Fixes #25077. * Fix: Images no longer reserve their space in the timeline correctly ([\#10571](matrix-org/matrix-react-sdk#10571)). Fixes #25082. Contributed by @kerryarchibald. * Fix issues with inhibited accessible focus outlines ([\#10579](matrix-org/matrix-react-sdk#10579)). Fixes #19742. * Fix read receipts falling from sky ([\#10576](matrix-org/matrix-react-sdk#10576)). Fixes #25081. * Fix avatar text issue in rte ([\#10559](matrix-org/matrix-react-sdk#10559)). Contributed by @alunturner. * fix resizer only work with left mouse click ([\#10546](matrix-org/matrix-react-sdk#10546)). Contributed by @NSV1991. * Fix send two join requests when joining a room from spotlight search ([\#10534](matrix-org/matrix-react-sdk#10534)). Fixes #25054. * Highlight event when any version triggered a highlight ([\#10502](matrix-org/matrix-react-sdk#10502)). Fixes #24923 and #24970. Contributed by @kerryarchibald. * Fix spacing of headings of integration manager on General settings tab ([\#10232](matrix-org/matrix-react-sdk#10232)). Fixes #24085. Contributed by @luixxiul. Changes in [1.11.29](https://github.com/vector-im/element-web/releases/tag/v1.11.29) (2023-04-11) ================================================================================================= ## ✨ Features * Allow desktop app to expose recent rooms in UI integrations ([\#16940](element-hq/element-web#16940)). * Add API params to mute audio and/or video in Jitsi calls by default ([\#24820](element-hq/element-web#24820)). Contributed by @dhenneke. * Style mentions as pills in rich text editor ([\#10448](matrix-org/matrix-react-sdk#10448)). Contributed by @alunturner. * Show room create icon if "UIComponent.roomCreation" is enabled ([\#10364](matrix-org/matrix-react-sdk#10364)). Contributed by @maheichyk. * Mentions as links rte ([\#10463](matrix-org/matrix-react-sdk#10463)). Contributed by @alunturner. * Better error handling in jump to date ([\#10405](matrix-org/matrix-react-sdk#10405)). Contributed by @MadLittleMods. * Show "Invite" menu option if "UIComponent.sendInvites" is enabled. ([\#10363](matrix-org/matrix-react-sdk#10363)). Contributed by @maheichyk. * Added `UserProfilesStore`, `LruCache` and user permalink profile caching ([\#10425](matrix-org/matrix-react-sdk#10425)). Fixes #10559. * Mentions as links rte ([\#10422](matrix-org/matrix-react-sdk#10422)). Contributed by @alunturner. * Implement MSC3952: intentional mentions ([\#9983](matrix-org/matrix-react-sdk#9983)). * Implement MSC3973: Search users in the user directory with the Widget API ([\#10269](matrix-org/matrix-react-sdk#10269)). Contributed by @dhenneke. * Permalinks to message are now displayed as pills ([\#10392](matrix-org/matrix-react-sdk#10392)). Fixes #24751 and #24706. * Show search,dial,explore in filterContainer if "UIComponent.filterContainer" is enabled ([\#10381](matrix-org/matrix-react-sdk#10381)). Contributed by @maheichyk. * Increase space panel collapse clickable area ([\#6084](matrix-org/matrix-react-sdk#6084)). Fixes #17379. Contributed by @jaiwanth-v. * Add fallback for replies to Polls ([\#10380](matrix-org/matrix-react-sdk#10380)). Fixes #24197. Contributed by @kerryarchibald. * Permalinks to rooms and users are now pillified ([\#10388](matrix-org/matrix-react-sdk#10388)). Fixes #24825. * Poll history - access poll history from room settings ([\#10356](matrix-org/matrix-react-sdk#10356)). Contributed by @kerryarchibald. * Add API params to mute audio and/or video in Jitsi calls by default ([\#10376](matrix-org/matrix-react-sdk#10376)). Contributed by @dhenneke. * Notifications: inline error message on notifications saving error ([\#10288](matrix-org/matrix-react-sdk#10288)). Contributed by @kerryarchibald. * Support dynamic room predecessor in SpaceProvider ([\#10348](matrix-org/matrix-react-sdk#10348)). Contributed by @andybalaam. * Support dynamic room predecessors for RoomProvider ([\#10346](matrix-org/matrix-react-sdk#10346)). Contributed by @andybalaam. * Support dynamic room predecessors in OwnBeaconStore ([\#10339](matrix-org/matrix-react-sdk#10339)). Contributed by @andybalaam. * Support dynamic room predecessors in ForwardDialog ([\#10344](matrix-org/matrix-react-sdk#10344)). Contributed by @andybalaam. * Support dynamic room predecessors in SpaceHierarchy ([\#10341](matrix-org/matrix-react-sdk#10341)). Contributed by @andybalaam. * Support dynamic room predecessors in AddExistingToSpaceDialog ([\#10342](matrix-org/matrix-react-sdk#10342)). Contributed by @andybalaam. * Support dynamic room predecessors in leave-behaviour ([\#10340](matrix-org/matrix-react-sdk#10340)). Contributed by @andybalaam. * Support dynamic room predecessors in StopGapWidgetDriver ([\#10338](matrix-org/matrix-react-sdk#10338)). Contributed by @andybalaam. * Support dynamic room predecessors in WidgetLayoutStore ([\#10326](matrix-org/matrix-react-sdk#10326)). Contributed by @andybalaam. * Support dynamic room predecessors in SpaceStore ([\#10332](matrix-org/matrix-react-sdk#10332)). Contributed by @andybalaam. * Sync polls push rules on changes to account_data ([\#10287](matrix-org/matrix-react-sdk#10287)). Contributed by @kerryarchibald. * Support dynamic room predecessors in BreadcrumbsStore ([\#10295](matrix-org/matrix-react-sdk#10295)). Contributed by @andybalaam. * Improved a11y for Field feedback and Secure Phrase input ([\#10320](matrix-org/matrix-react-sdk#10320)). Contributed by @Sebbones. * Support dynamic room predecessors in RoomNotificationStateStore ([\#10297](matrix-org/matrix-react-sdk#10297)). Contributed by @andybalaam. ## 🐛 Bug Fixes * Use a newly generated access_token while joining Jitsi ([\#24646](element-hq/element-web#24646)). Fixes #24687. Contributed by @emrahcom. * Fix cloudflare action pointing at commit hash instead of tag ([\#24777](element-hq/element-web#24777)). Contributed by @justjanne. * Allow editing with RTE to overflow for autocomplete visibility ([\#10499](matrix-org/matrix-react-sdk#10499)). Contributed by @alunturner. * Added auto focus to Github URL on opening of debug logs modal ([\#10479](matrix-org/matrix-react-sdk#10479)). Contributed by @ShivamSpm. * Fix detection of encryption for all users in a room ([\#10487](matrix-org/matrix-react-sdk#10487)). Fixes #24995. * Properly generate mentions when editing a reply with MSC3952 ([\#10486](matrix-org/matrix-react-sdk#10486)). Fixes #24924. Contributed by @kerryarchibald. * Improve performance of rendering a room with many hidden events ([\#10131](matrix-org/matrix-react-sdk#10131)). Contributed by @andybalaam. * Prevent future date selection in jump to date ([\#10419](matrix-org/matrix-react-sdk#10419)). Fixes #20800. Contributed by @MadLittleMods. * Add aria labels to message search bar to improve accessibility ([\#10476](matrix-org/matrix-react-sdk#10476)). Fixes #24921. * Fix decryption failure bar covering the timeline ([\#10360](matrix-org/matrix-react-sdk#10360)). Fixes #24780 #24074 and #24183. Contributed by @luixxiul. * Improve profile picture settings accessibility ([\#10470](matrix-org/matrix-react-sdk#10470)). Fixes #24919. * Handle group call redaction ([\#10465](matrix-org/matrix-react-sdk#10465)). * Display relative timestamp for threads on the same calendar day ([\#10399](matrix-org/matrix-react-sdk#10399)). Fixes #24841. Contributed by @kerryarchibald. * Fix timeline list and paragraph display issues ([\#10424](matrix-org/matrix-react-sdk#10424)). Fixes #24602. Contributed by @alunturner. * Use unique keys for voice broadcast pips ([\#10457](matrix-org/matrix-react-sdk#10457)). Fixes #24959. * Fix "show read receipts sent by other users" not applying to threads ([\#10445](matrix-org/matrix-react-sdk#10445)). Fixes #24910. * Fix joining public rooms without aliases in search dialog ([\#10437](matrix-org/matrix-react-sdk#10437)). Fixes #23937. * Add input validation for `m.direct` in `DMRoomMap` ([\#10436](matrix-org/matrix-react-sdk#10436)). Fixes #24909. * Reduce height reserved for "collapse" button's line on IRC layout ([\#10211](matrix-org/matrix-react-sdk#10211)). Fixes #24605. Contributed by @luixxiul. * Fix `creatorUserId is required` error when opening sticker picker ([\#10423](matrix-org/matrix-react-sdk#10423)). * Fix block/inline Element descendants error noise in `NewRoomIntro.tsx` ([\#10412](matrix-org/matrix-react-sdk#10412)). Contributed by @MadLittleMods. * Fix profile resizer to make first character of a line selectable in IRC layout ([\#10396](matrix-org/matrix-react-sdk#10396)). Fixes #14764. Contributed by @luixxiul. * Ensure space between wrapped lines of room name on IRC layout ([\#10188](matrix-org/matrix-react-sdk#10188)). Fixes #24742. Contributed by @luixxiul. * Remove unreadable alt attribute from the room status bar warning icon (nonsense to screenreaders) ([\#10402](matrix-org/matrix-react-sdk#10402)). Contributed by @MadLittleMods. * Fix big date separators when jump to date is enabled ([\#10404](matrix-org/matrix-react-sdk#10404)). Fixes #22969. Contributed by @MadLittleMods. * Fixes user authentication when registering via the module API ([\#10257](matrix-org/matrix-react-sdk#10257)). Contributed by @maheichyk. * Handle more edge cases in Space Hierarchy ([\#10280](matrix-org/matrix-react-sdk#10280)). Contributed by @justjanne. * Further improve performance with lots of hidden events ([\#10353](matrix-org/matrix-react-sdk#10353)). Fixes #24480. Contributed by @andybalaam. * Respect user cancelling upload flow by dismissing spinner ([\#10373](matrix-org/matrix-react-sdk#10373)). Fixes #24667. * When starting a DM, the end-to-end encryption status icon does now only appear if the DM can be encrypted ([\#10394](matrix-org/matrix-react-sdk#10394)). Fixes #24397. * Fix `[object Object]` in feedback metadata ([\#10390](matrix-org/matrix-react-sdk#10390)). * Fix pinned messages card saying nothing pinned while loading ([\#10385](matrix-org/matrix-react-sdk#10385)). Fixes #24615. * Fix import e2e key dialog staying disabled after paste ([\#10375](matrix-org/matrix-react-sdk#10375)). Fixes #24818. * Show all labs even if incompatible, with appropriate tooltip explaining requirements ([\#10369](matrix-org/matrix-react-sdk#10369)). Fixes #24813. * Fix UIFeature.Registration not applying to all paths ([\#10371](matrix-org/matrix-react-sdk#10371)). Fixes #24814. * Clicking on a user pill does now only open the profile in the right panel and no longer navigates to the home view. ([\#10359](matrix-org/matrix-react-sdk#10359)). Fixes #24797. * Fix start DM with pending third party invite ([\#10347](matrix-org/matrix-react-sdk#10347)). Fixes #24781. * Fix long display name overflowing reply tile on IRC layout ([\#10343](matrix-org/matrix-react-sdk#10343)). Fixes #24738. Contributed by @luixxiul. * Display redacted body on ThreadView in the same way as normal messages ([\#9016](matrix-org/matrix-react-sdk#9016)). Fixes #24729. Contributed by @luixxiul. * Handle more edge cases in ACL updates ([\#10279](matrix-org/matrix-react-sdk#10279)). Contributed by @justjanne. * Allow parsing png files to fail if thumbnailing is successful ([\#10308](matrix-org/matrix-react-sdk#10308)).

@andybalaam

* Fixes for [CVE-2023-30609](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE-2023-30609) / GHSA-xv83-x443-7rmw * Pick sensible default option for phone country dropdown ([\#10627](matrix-org/matrix-react-sdk#10627)). Fixes #3528. * Relate field validation tooltip via aria-describedby ([\#10522](matrix-org/matrix-react-sdk#10522)). Fixes #24963. * Handle more completion types in rte autocomplete ([\#10560](matrix-org/matrix-react-sdk#10560)). Contributed by @alunturner. * Show a tile for an unloaded predecessor room if it has via_servers ([\#10483](matrix-org/matrix-react-sdk#10483)). Contributed by @andybalaam. * Exclude message timestamps from aria live region ([\#10584](matrix-org/matrix-react-sdk#10584)). Fixes #5696. * Make composer format bar an aria toolbar ([\#10583](matrix-org/matrix-react-sdk#10583)). Fixes #11283. * Improve accessibility of font slider ([\#10473](matrix-org/matrix-react-sdk#10473)). Fixes #20168 and #24962. * fix file size display from kB to KB ([\#10561](matrix-org/matrix-react-sdk#10561)). Fixes #24866. Contributed by @NSV1991. * Handle /me in rte ([\#10558](matrix-org/matrix-react-sdk#10558)). Contributed by @alunturner. * bind html with switch for manage extension setting option ([\#10553](matrix-org/matrix-react-sdk#10553)). Contributed by @NSV1991. * Handle command completions in RTE ([\#10521](matrix-org/matrix-react-sdk#10521)). Contributed by @alunturner. * Add room and user avatars to rte ([\#10497](matrix-org/matrix-react-sdk#10497)). Contributed by @alunturner. * Support for MSC3882 revision 1 ([\#10443](matrix-org/matrix-react-sdk#10443)). Contributed by @hughns. * Check profiles before starting a DM ([\#10472](matrix-org/matrix-react-sdk#10472)). Fixes #24830. * Quick settings: Change the copy / labels on the options ([\#10427](matrix-org/matrix-react-sdk#10427)). Fixes #24522. Contributed by @justjanne. * Update rte autocomplete styling ([\#10503](matrix-org/matrix-react-sdk#10503)). Contributed by @alunturner. * Fix create subspace dialog not working ([\#10652](matrix-org/matrix-react-sdk#10652)). Fixes element-hq/element-web#24882 * Fix multiple accessibility defects identified by AXE ([\#10606](matrix-org/matrix-react-sdk#10606)). * Fix view source from edit history dialog always showing latest event ([\#10626](matrix-org/matrix-react-sdk#10626)). Fixes #21859. * #21451 Fix WebGL disabled error message ([\#10589](matrix-org/matrix-react-sdk#10589)). Contributed by @rashmitpankhania. * Properly translate errors in `AddThreepid.ts` so they show up translated to the user but not in our logs ([\#10432](matrix-org/matrix-react-sdk#10432)). Contributed by @MadLittleMods. * Fix overflow on auth pages ([\#10605](matrix-org/matrix-react-sdk#10605)). Fixes #19548. * Fix incorrect avatar background colour when using a custom theme ([\#10598](matrix-org/matrix-react-sdk#10598)). Contributed by @jdauphant. * Remove dependency on `org.matrix.e2e_cross_signing` unstable feature ([\#10593](matrix-org/matrix-react-sdk#10593)). * Update setting description to match reality ([\#10600](matrix-org/matrix-react-sdk#10600)). Fixes #25106. * Fix no identity server in help & about settings ([\#10563](matrix-org/matrix-react-sdk#10563)). Fixes #25077. * Fix: Images no longer reserve their space in the timeline correctly ([\#10571](matrix-org/matrix-react-sdk#10571)). Fixes #25082. Contributed by @kerryarchibald. * Fix issues with inhibited accessible focus outlines ([\#10579](matrix-org/matrix-react-sdk#10579)). Fixes #19742. * Fix read receipts falling from sky ([\#10576](matrix-org/matrix-react-sdk#10576)). Fixes #25081. * Fix avatar text issue in rte ([\#10559](matrix-org/matrix-react-sdk#10559)). Contributed by @alunturner. * fix resizer only work with left mouse click ([\#10546](matrix-org/matrix-react-sdk#10546)). Contributed by @NSV1991. * Fix send two join requests when joining a room from spotlight search ([\#10534](matrix-org/matrix-react-sdk#10534)). Fixes #25054. * Highlight event when any version triggered a highlight ([\#10502](matrix-org/matrix-react-sdk#10502)). Fixes #24923 and #24970. Contributed by @kerryarchibald. * Fix spacing of headings of integration manager on General settings tab ([\#10232](matrix-org/matrix-react-sdk#10232)). Fixes #24085. Contributed by @luixxiul.

t3chguy added the T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements label Mar 29, 2023

t3chguy mentioned this pull request Mar 29, 2023

A11y: It's not possible to use the keyboard to navigate element-hq/element-web#24962

Closed

github-actions bot deployed to Netlify March 29, 2023 12:16 View deployment

github-actions bot deployed to Netlify March 29, 2023 12:44 View deployment

github-actions bot deployed to Netlify March 29, 2023 13:27 View deployment

github-actions bot deployed to Netlify March 29, 2023 14:01 View deployment

t3chguy requested a review from a team March 29, 2023 14:18

t3chguy marked this pull request as ready for review March 29, 2023 14:18

t3chguy requested a review from a team as a code owner March 29, 2023 14:18

t3chguy requested review from germain-gg and kerryarchibald March 29, 2023 14:18

kerryarchibald reviewed Mar 29, 2023

View reviewed changes

src/components/views/elements/Slider.tsx Outdated Show resolved Hide resolved

t3chguy added 9 commits March 30, 2023 17:32

Clamp font size when disabling "Use custom size"

14d5b33

Switch Slider to use a semantic input range element

5fad0e6

Iterate

c794428

delint

e84038f

delint

227c8e2

snapshot

64fa543

Iterate

c0ce259

Iterate

36997ec

Fix step size

411df0c

t3chguy closed this Mar 30, 2023

t3chguy force-pushed the t3chguy/fix/24962 branch from 24b4773 to 567248d Compare March 30, 2023 16:40

RiotRobot temporarily deployed to Kiwi March 30, 2023 16:40 — with GitHub Actions Inactive

t3chguy reopened this Mar 30, 2023

t3chguy requested a review from kerryarchibald March 30, 2023 16:41

github-actions bot deployed to Netlify March 30, 2023 16:45 View deployment

germain-gg removed their request for review April 3, 2023 08:49

daniellekirkwood added the Z-Community-PR Issue is solved by a community member's PR label Apr 3, 2023

t3chguy added 2 commits April 4, 2023 14:07

Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk

d6b9433

into t3chguy/fix/24962

Add focus outline to slider

c4e8486

github-actions bot deployed to Netlify April 4, 2023 13:14 View deployment

Derp

bd42460

github-actions bot deployed to Netlify April 5, 2023 11:32 View deployment

Merge branch 'develop' into t3chguy/fix/24962

ca2625a

github-actions bot deployed to Netlify April 12, 2023 08:03 View deployment

nadonomy approved these changes Apr 12, 2023

View reviewed changes

t3chguy added this pull request to the merge queue Apr 12, 2023

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Apr 12, 2023

t3chguy added this pull request to the merge queue Apr 12, 2023

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Apr 12, 2023

t3chguy added this pull request to the merge queue Apr 12, 2023

Merged via the queue into develop with commit d2066ba Apr 12, 2023

t3chguy deleted the t3chguy/fix/24962 branch April 12, 2023 11:41

luixxiul mentioned this pull request May 3, 2023

Remove obsolete variable and use a custom property for Slider #10779

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve accessibility of font slider #10473

Improve accessibility of font slider #10473

t3chguy commented Mar 29, 2023 •

edited by github-actions bot

Loading

t3chguy commented Mar 29, 2023 •

edited

Loading

kerryarchibald left a comment

t3chguy commented Mar 30, 2023

t3chguy commented Mar 30, 2023

daniellekirkwood commented Mar 31, 2023

t3chguy commented Mar 31, 2023

daniellekirkwood commented Apr 3, 2023

t3chguy commented Apr 3, 2023

t3chguy commented Apr 4, 2023

daniellekirkwood commented Apr 5, 2023

t3chguy commented Apr 5, 2023

nadonomy left a comment

Improve accessibility of font slider #10473

Improve accessibility of font slider #10473

Conversation

t3chguy commented Mar 29, 2023 • edited by github-actions bot Loading

✨ Features

t3chguy commented Mar 29, 2023 • edited Loading

kerryarchibald left a comment

Choose a reason for hiding this comment

t3chguy commented Mar 30, 2023

t3chguy commented Mar 30, 2023

daniellekirkwood commented Mar 31, 2023

t3chguy commented Mar 31, 2023

daniellekirkwood commented Apr 3, 2023

t3chguy commented Apr 3, 2023

t3chguy commented Apr 4, 2023

daniellekirkwood commented Apr 5, 2023

t3chguy commented Apr 5, 2023

nadonomy left a comment

Choose a reason for hiding this comment

t3chguy commented Mar 29, 2023 •

edited by github-actions bot

Loading

t3chguy commented Mar 29, 2023 •

edited

Loading