status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
consul/ui/packages/consul-ui/app/components
History
John Cowen 33d0383779
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
..
action ui: Search/filtering 'Filtered by:' search status (#9442) 2021-01-25 18:13:54 +00:00
anonymous ui: Notice component (#9011) 2020-10-23 09:26:32 +01:00
app ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
app-error ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
app-view ui: document-attrs helper (#9336) 2020-12-09 09:22:01 +00:00
aria-menu ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
auth-dialog ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
auth-form ui: Upgrade the rest of the UI to use the new Notice component (#9035) 2020-10-26 16:51:53 +00:00
auth-profile ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
child-selector ui: [BUGFIX] Role/Policy selector default sort (#9434) 2021-01-04 18:28:35 +00:00
code-editor ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
confirmation-alert ui: Search/filtering 'Filtered by:' search status (#9442) 2021-01-25 18:13:54 +00:00
confirmation-dialog ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
consul ui: a11y modals (#9819) 2021-03-09 09:30:01 +00:00
copy-button ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
data-collection ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
data-form ui: Change URI helper to a template based approach (#9344) 2020-12-09 09:22:46 +00:00
data-loader ui: Restrict the viewing/editing of certain UI elements based on the users ACLs (#9687) 2021-02-19 16:42:16 +00:00
data-sink ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
data-source ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
data-writer ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
debug/navigation ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
delete-confirmation ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
empty-state ui: Surface 'detail' of API errors in the error page (#9237) 2020-11-19 16:07:23 +00:00
error-state ui: Surface 'detail' of API errors in the error page (#9237) 2020-11-19 16:07:23 +00:00
event-source ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
filter-bar ui: Add 'Search Across' for finer grained searching (#9282) 2020-12-01 15:45:09 +00:00
form-component ui: Move linting to the `node:test` script (#9385) 2020-12-14 15:28:35 +00:00
form-group ui: [BUGFIX] Replace all replaceAll with split.join for older browsers without replaceAll (#9715) 2021-02-11 09:49:39 +00:00
freetext-filter ui: [BUGFIX] Replace all replaceAll with split.join for older browsers without replaceAll (#9715) 2021-02-11 09:49:39 +00:00
hashicorp-consul ui: a11y modals (#9819) 2021-03-09 09:30:01 +00:00
informed-action ui: Re-organize our %h* placeholders (#9584) 2021-01-26 17:53:45 +00:00
jwt-source ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
list-collection ui: Move linting to the `node:test` script (#9385) 2020-12-14 15:28:35 +00:00
main-header-horizontal ui: Sidebar navigation / redesign (#9553) 2021-01-26 17:40:33 +00:00
main-nav-horizontal ui: Add Route component / routlet service (#9813) 2021-03-08 12:15:54 +00:00
main-nav-vertical ui: Add Route component / routlet service (#9813) 2021-03-08 12:15:54 +00:00
menu-panel ui: Side navigation tweaks (#9812) 2021-02-25 09:35:53 +00:00
modal-dialog ui: a11y modals (#9819) 2021-03-09 09:30:01 +00:00
modal-layer ui: a11y modals (#9819) 2021-03-09 09:30:01 +00:00
more-popover-menu ui: Add 'Search Across' for finer grained searching (#9282) 2020-12-01 15:45:09 +00:00
notice ui: Re-organize our %h* placeholders (#9584) 2021-01-26 17:53:45 +00:00
notification ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
oidc-select ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
outlet ui: Add Route component / routlet service (#9813) 2021-03-08 12:15:54 +00:00
overlay ui: New overlays (#9305) 2020-12-02 09:43:34 +00:00
policy-form ui: Move identity components (#9298) 2020-11-30 18:42:59 +00:00
policy-selector ui: a11y modals (#9819) 2021-03-09 09:30:01 +00:00
popover-menu ui: Add 'Search Across' for finer grained searching (#9282) 2020-12-01 15:45:09 +00:00
popover-select ui: Search/filtering 'Filtered by:' search status (#9442) 2021-01-25 18:13:54 +00:00
power-select ui: Initial Intention Permission Integration and acceptance testing (#9003) 2020-10-23 17:26:06 +01:00
radio-card ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
radio-group ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
ref ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
role-form ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
role-selector ui: a11y modals (#9819) 2021-03-09 09:30:01 +00:00
route ui: Add Route component / routlet service (#9813) 2021-03-08 12:15:54 +00:00
search-bar ui: Search/filtering 'Filtered by:' search status (#9442) 2021-01-25 18:13:54 +00:00
secret-button ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
skip-links ui: Sidebar navigation / redesign (#9553) 2021-01-26 17:40:33 +00:00
state ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
state-chart ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
tab-nav ui: Accessibility scan improvements (#9485) 2021-01-05 10:05:59 +00:00
tabular-collection ui: Remove ember-computed-style to avoid deprecation error (#9218) 2020-11-18 18:55:30 +00:00
tabular-details ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
tag-list ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
toggle-button ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
token-list ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
token-source ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
tooltip ui: New overlays (#9305) 2020-12-02 09:43:34 +00:00
topology-metrics ui: a11y modals (#9819) 2021-03-09 09:30:01 +00:00