open-consul/ui/packages/consul-ui/app
John Cowen a2fa60681a
ui: a11y modals (#9819)
This PR uses the excellent a11y-dialog to implement our modal functionality across the UI.

This package covers all our a11y needs - overlay click and ESC to close, controlling aria-* attributes, focus trap and restore. It's also very small (1.6kb) and has good DOM and JS APIs and also seems to be widely used and well tested.

There is one downside to using this, and that is:

We made use of a very handy characteristic of the relationship between HTML labels and inputs in order to implement our modals previously. Adding a for="id" attribute to a label meant you can control an <input id="id" /> from anywhere else in the page without having to pass javascript objects around. It's just based on using the same string for the for attribute and the id attribute. This allowed us to easily open our login dialog with CSS from anywhere within the UI without having to manage passing around a javascript object/function/method in order to open the dialog.

We've PRed #9813 which includes an approach which would make passing around JS modal object easier to do. But in the meantime we've added a little 'hack' here using an additional <input /> element and a change listener which allows us to keep this label/input characteristic of our old modals. I'd originally thought this would be a temporary amend in order to wait on #9813 but the more I think about it, the more I think its quite a nice thing to keep - so longer term we may/may not keep this.
2021-03-09 09:30:01 +00:00
..
abilities ui: Restrict the viewing/editing of certain UI elements based on the users ACLs (#9687) 2021-02-19 16:42:16 +00:00
adapters ui: DataSource Decorator (#9746) 2021-02-23 08:56:42 +00:00
components ui: a11y modals (#9819) 2021-03-09 09:30:01 +00:00
controllers ui: Misc changes for Catalog area (#9414) 2020-12-17 16:35:01 +00:00
decorators ui: DataSource Decorator (#9746) 2021-02-23 08:56:42 +00:00
filter/predicates ui: Auth Methods List view (#9617) 2021-02-17 13:56:56 -05:00
forms ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
helpers ui: Add Route component / routlet service (#9813) 2021-03-08 12:15:54 +00:00
initializers ui: Remove unnecessay reopens from sort and form services (#9146) 2020-11-10 14:36:27 +00:00
instance-initializers ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
mixins ui: DataSource Decorator (#9746) 2021-02-23 08:56:42 +00:00
models ui: Restrict the viewing/editing of certain UI elements based on the users ACLs (#9687) 2021-02-19 16:42:16 +00:00
modifiers ui: Restrict the viewing/editing of certain UI elements based on the users ACLs (#9687) 2021-02-19 16:42:16 +00:00
routes ui: Add Route component / routlet service (#9813) 2021-03-08 12:15:54 +00:00
routing ui: DataSource Decorator (#9746) 2021-02-23 08:56:42 +00:00
search/predicates ui: Auth Methods List view (#9617) 2021-02-17 13:56:56 -05:00
serializers ui: Restrict the viewing/editing of certain UI elements based on the users ACLs (#9687) 2021-02-19 16:42:16 +00:00
services ui: Add Route component / routlet service (#9813) 2021-03-08 12:15:54 +00:00
sort/comparators ui: Auth Methods List view (#9617) 2021-02-17 13:56:56 -05:00
styles ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
templates ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
utils ui: [BUGFIX] Replace all replaceAll with split.join for older browsers without replaceAll (#9715) 2021-02-11 09:49:39 +00:00
validations ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
app.js ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
env.js ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
formats.js ui: Install ember-intl (#9399) 2020-12-15 18:29:32 +00:00
index.html ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
router.js ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00