Commit graph

51 commits

Author SHA1 Message Date
Michael Telatynski
d28a892bb0 Stop using KeyboardEvent.keyCode as it is deprecated 2019-12-16 17:14:03 +00:00
Michael Telatynski
85ade7e1a1 Switch to react-focus-lock for it to comprehend Portals 2019-12-16 12:16:41 +00:00
Michael Telatynski
e01be212e6 improve Settings Accessibility for Toggles and Dialogs
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2019-09-25 09:25:11 +01:00
Michael Telatynski
d94e2179bf Migrate away from React.createClass for views/dialogs. React 16 :D
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2019-08-24 11:59:46 +01:00
David Baker
7925e7169a Design tweaks to dialogs
Little bit of a mix of things in this one:
 * Support variable-width dialogs. Default is fixed-width as before,
   only UploadConformDialog is variable-width. Controlled by a prop
   to BaseDialog.
 * Fixes to the cancel 'x' - scale the mask image, tweak size & colour
 * Colour & boldness of dialog titles
 * Align the dialog title & cancel 'x'
 * Remove gap between dialog buttons & right hand side of dialog(!)
 * Round corners on dialogs
 * Add grey border on image preview in upload confirm dialog
 * and, squeezing in slightly randomly, finish the partially renamed
   ChatInviteDialog to AddressPickerDialog.
2019-04-03 16:27:45 +01:00
Bruno Windels
57b2f691ed fix lint - bis 2019-01-29 16:30:10 +01:00
Bruno Windels
7c0f463c91 fix lint 2019-01-29 15:40:19 +01:00
Bruno Windels
9f1b4ac4cc room directory makeover 2019-01-29 15:34:58 +01:00
J. Ryan Stinnett
20e296b20e Convert image URLs in React to require calls
This allows Webpack to insert the proper image URL after builds steps like
adding a hash and so on. The path you supply to `require` is relative to the JS
source file, just like any other would be.
2019-01-17 22:06:49 -06:00
J. Ryan Stinnett
acc2e98355 Add New Recovery Method dialog
Adds a New Recovery Method dialog which is shown when key backup fails because
of a version mismatch / version not found error.

The set up button in the dialog currently only marks a device as verified (via a
verification prompt) instead of the eventual restore and cross-sign flow, since
those pieces don't exist yet.

Signed-off-by: J. Ryan Stinnett <jryans@gmail.com>
2018-12-18 10:20:12 +00:00
Michael Telatynski
d8a1feb501
fix Modal typo and refactor BaseDialog to fix " undefined" className
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2018-06-12 11:22:02 +01:00
David Baker
5d46efc3e8 Get docs right on hasCancel 2018-04-30 14:17:21 +01:00
David Baker
dcaacfd204 Merge remote-tracking branch 'origin/develop' into dbkr/fix_session_restore_fail_dialog_ux 2018-04-30 14:06:32 +01:00
David Baker
873993a7ca Clarify, hopefully 2018-04-27 17:56:33 +01:00
David Baker
d3c368e19f typo 2018-04-27 17:53:11 +01:00
David Baker
6d9e07580b UI fixes in SessionRestoreErrorDialog
* Make the 'delete my data' button not the default
 * Make it red
 * Give it a confirmation dialog
 * Remove the 'cancel' button: what does it mean to cancel an error?
   In this case, it tried again and almost certainly got the same error.
 * Remove the top-right 'x' and don't cancel on esc for the same reason.
 * Move 'send bug report' to a button rather than a 'click here' link
 * Add a 'refresh' button which, even if it's no more likely to work,
   will at least look like it's doing something (it's mostly so if you
   don't have a bug report endpoint, there's still a button other
   than the one that deletes all your data).
2018-04-27 12:38:49 +01:00
David Baker
db1401f484 Pass false to onFinished from BaseDialog
Everywhere else, onFinished takes a boolean indicating whether the
dialog was confirmed on cancelled, and had function that were
expecting this variable and getting undefined.
2018-04-27 11:19:14 +01:00
David Baker
580b68a1b6
Merge pull request #1652 from pvagner/dialog-a11y
Dialog a11y
2018-03-20 11:35:57 +00:00
Peter Vágner
5e9368e794 Add comments explaining our non standard usage of aria-described-by 2018-02-12 21:13:53 +01:00
lukebarnard
c1649d1b75 Give dialogs a matrixClient context
Dialogs are mounted outside of the main react tree of MatrixChat,
so they won't have its child context.
2018-02-07 09:45:36 +00:00
Peter Vágner
14991afbe5 Merge branch 'develop' into dialog-a11y 2018-02-06 23:04:15 +01:00
David Baker
6162c0b360 Fix key bindings in address picker dialog
Another regression from https://github.com/matrix-org/matrix-react-sdk/pull/1674

Fixes https://github.com/vector-im/riot-web/issues/5994
2018-02-06 15:01:14 +00:00
David Baker
292a6c5767
Merge pull request #1674 from aidalgol/rebase-dialogs
Normalise dialogs
2018-01-11 10:49:40 +00:00
Aidan Gauland
35780f5ae0 Remove use of deprecated React.PropTypes
Replace all uses of React.PropTypes with PropTypes and importing PropTypes from
'prop-types'.
2017-12-26 14:03:18 +13:00
Aidan Gauland
c5284eb070 Allow BaseDialog to take a class for the title <div>
Some dialogs need to set additional classes on the `mx_Dialog_title` `div`
element (for example `danger`).
2017-12-23 17:02:19 +13:00
Peter Vágner
20c485d85e Move aria-hidden management from the BaseDialog component to the Modal 2017-12-20 10:09:26 +01:00
Peter Vágner
ab0ff9b781 BaseDialog: split a very long line 2017-12-12 18:55:57 +01:00
Peter Vágner
321b1adb99 Elliminate lint errors and warnings 2017-12-08 07:47:08 +01:00
Peter Vágner
4171675221 Add some comments explaining how we are using aria-hidden property to
hide content outside of the BaseDialog to screen reader users.
2017-12-07 09:44:00 +01:00
Peter Vágner
f9b0243c8e Merge branch 'develop' into dialog-a11y 2017-12-06 11:10:18 +01:00
Peter Vágner
4f83f6cf25 Move keyboard focus management back to the BaseDialog rather than
leaving it in the Modal manager.
We are using Modal manager to load other components not just BaseDialog
and its subclasses and they might require different keyboard handling.
Also depend on focus-trap-react rather than react-focus-trap for locking
keyboard focus inside the dialog. The experience is much nicer and even
the FocusTrap element it-self no longer gains the focus.
On a side note using the FocusTrap element outside the dialog (on
its parent) stops it from working properly.
2017-12-05 08:50:40 +01:00
Peter Vágner
5ccbcf02e2 Several changes improving accessibility of the dialogs
- Wrapped all the modals inside a react-focus-trap component disabling
keyboard navigation outside the modal dialogs
- Disabled our custom key handling at dialog level. Cancelling on esc
key is now handled via FocusTrap component.
- Removed onEnter prop from the BaseDialog component. Dialogs that
submit data all now embed a form with onSubmit handler. And since
keyboard focus is now managed better via FocusTrap it no longer makes
sense for the other dialog types. Fixes
https://github.com/vector-im/riot-web/issues/5736
- Set aria-hidden on the matrixChat outer node when showing dialogs to
disable navigating outside the modals by using screen reader specific
features.
2017-12-03 21:38:21 +01:00
Luke Barnard
fe81fcb8c6 Factor out isCtrlOrCmdKeyEvent, use that in TagPanel
as opposed to the incorrect ctrl || meta
2017-12-01 10:30:49 +00:00
Stefan Parviainen
cb5c9f2c5a Make Dialogs more accessible
Signed-off-by: Stefan Parviainen <pafcu@iki.fi>
2017-11-29 21:13:48 +01:00
Michael Telatynski
b65e4960a5 move Dialog analytics to Modal controller
mark title as required, it sorta is, why isn't this based on BaseDialog?

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2017-05-29 17:39:03 +01:00
Michael Telatynski
fb3187b58e change event wording
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2017-05-28 13:26:33 +01:00
Michael Telatynski
98c2f9201b initial piwik stuff
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2017-05-27 20:47:09 +01:00
David Baker
ff9c40472a Revert "Merge pull request #822 from t3chguy/BaseDialog_restore_focus"
This reverts commit 0ac836919d, reversing
changes made to 7e07ffd55f.
2017-05-16 14:50:29 +01:00
David Baker
19dcd83aeb Revert "Merge pull request #841 from matrix-org/luke/fix-double-dialogs"
This reverts commit 1913a32fbd, reversing
changes made to 0c16298c45.
2017-05-16 14:50:19 +01:00
David Baker
6bd7af2917 Revert "Merge pull request #867 from matrix-org/t3chguy/BaseDialog-patch1"
This reverts commit 3549ff2543, reversing
changes made to 1db677141e.
2017-05-16 14:00:09 +01:00
Michael Telatynski
f02e659fb7 Consume key{up,down,pressed} events
so they don't trigger other things bubbling up
until Modal is closed
2017-05-09 11:27:06 +01:00
Michael Telatynski
bd32df4ef6 comment wording 2017-05-07 20:58:30 +01:00
Michael Telatynski
360f1cd250 completely missed the ESC check
I need sleep
2017-05-07 20:57:54 +01:00
Michael Telatynski
78e7272344 Fixes 2 issues with Dialog closing
+ Upload Confirmation dialog would just change focus on ESC and not close
+ Keywords Dialog in UserSettings would also close UserSettings because event bubbled up
2017-05-07 20:43:42 +01:00
Luke Barnard
5f0ecc588f Fix dialog reappearing after hitting Enter
Fixes https://github.com/vector-im/riot-web/issues/3714

https://github.com/vector-im/riot-web/issues/3714#issuecomment-297460620 :
> It's as if there are two dialogs and as one closes, the other one appears. For some reason matrix-org/matrix-react-sdk#822 is causing this.
> I've realised it's because the `priorActiveElement` is probably the button that opened the dialog. If this is focused and the enter key is released, this triggers a keyPress which fires once the dialog has closed and the button has been focused 😬 the BaseDialog only calls stopPropagation _onKeyDown.

The soln. was to submit the dialog as finished `onKeyUp`. This means the `priorActiveElement` is focussed after any key events that should be associated with the dialog.
2017-04-26 17:37:52 +01:00
Michael Telatynski
6a657a6555 Remember element that was in focus before rendering dialog
restore focus to that element when we unmount

also remove some whitespace because ESLint is a big bad bully...

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2017-04-22 05:44:27 +01:00
Matthew Hodgson
e5a5b5cd08 oops 2017-03-12 20:13:39 +00:00
Matthew Hodgson
b7d5d2fd56 beautify UserSettings error msg
fix up default dialog cancel button
2017-03-12 20:03:14 +00:00
David Baker
36d126f3a9 PR feedback 2017-02-13 19:09:43 +00:00
David Baker
79d9deb339 Split out InterActiveAuthDialog
Into a component that does Interactive Auth and a dialog that
wraps it, so we can do interactive auth not necessarily in a
dialog.

As a side effect:
 * Put the buttons for each auth stage in the stage itself.
   Some stages don't have submit buttons (and it's very possible
   other stages may have other buttons entirely, like 'resend')
   so it makes more sense for the buttons to live in the stage
   components themselves. Plus it saves the slightly evil
   calling-functions-on-react-children thing we were doing (and
   indeed extending that to show the submit button at all).
 * Give all BaseDialogs a cross in the top right to cancel. They
   were all dismissable by clicking outside or pressing esc, so
   this adds a more visually obvious way of dismissing them. Plus,
   it means our InteractiveAuthDialog can have a way of canceling
   the whole operation separate from buttons for the individual
   stages.
2017-02-13 16:03:21 +00:00