* check if there is a screen reader active on page load
* hide the flat picker for screen readers
* make the banner focusable
* change the focus color in banner
* change disabled to readonly input fields
* change replace_via_turbo_stream to add a message to it
* add live region of github to out project
* add a method to send the aria message
* make it possible to pass the attributes
* pass type of aria live region to front-end based on the action
* remove focused field from date picker
* focus on tabs when there is no banner
* Revert "remove focused field from date picker"
This reverts commit ab5e3060343860e9c34514818f6d9eee59e91ee1.
* focus on the first element when opening the dialog
* remove auto-focus
* undo changes for adding a message
* add a new input method for adding a date and select today as a date
* remove label and name from form input
* change readonly to disabled
* undo changes for date-form
* delete dateform file
* add aria-live for fields in date pickr
* add a turbo stream to the component to load the messages for aria live regions
* undo changes for check f there is an active screen reader
* use settimeout instead of add event listener, so turbo frame also can be used hare
* undo changes for text with link form input
* remove text with link form input
* add documentation for aria-live region
* add an example for using current method in relation creation
* add aria live region in date-pickr dialog
* add some delay for polite messages to make sure it is caught
* send a message to be gotten by screen reader in date picker while changing inputs
* remove aria-live form inputs in date pickr
* show update message after any change in inputs of date picker
* fix rubocup errors in relation controller
* fix rubocup errors in datepicker controller
* fix eslint error
* update docs
* add some details to the aria live doc
* remove test for aria-live on inputs of date pickr
* remove unnecessary live region polite for date picker
* Update lookbook/docs/patterns/18-aria-live.md.erb
Co-authored-by: Henriette Darge <h.darge@openproject.com>
* Update lookbook/docs/patterns/18-aria-live.md.erb
Co-authored-by: Henriette Darge <h.darge@openproject.com>
* fix comment in preview controller
* remove role: alert
* set correct value for target
* move aria turbo stream below live region
* add missing spaces and a better headline for js handling turbo aria action
* move the exception of modals and dialogs to the end of doc file
* Update lookbook/docs/patterns/accessibility/18-aria-live.md.erb
Co-authored-by: Alexander Brandon Coles <a.coles@openproject.com>
* Update frontend/src/turbo/aria-stream-action.ts
Co-authored-by: Alexander Brandon Coles <a.coles@openproject.com>
* Update lookbook/docs/patterns/accessibility/18-aria-live.md.erb
Co-authored-by: Alexander Brandon Coles <a.coles@openproject.com>
* Update app/controllers/work_packages/date_picker_controller.rb
Co-authored-by: Alexander Brandon Coles <a.coles@openproject.com>
* Update lookbook/docs/patterns/accessibility/18-aria-live.md.erb
Co-authored-by: Alexander Brandon Coles <a.coles@openproject.com>
* Update app/controllers/concerns/op_turbo/component_stream.rb
Co-authored-by: Alexander Brandon Coles <a.coles@openproject.com>
* Update app/controllers/work_packages/date_picker_controller.rb
Co-authored-by: Alexander Brandon Coles <a.coles@openproject.com>
* Update app/controllers/work_packages/date_picker_controller.rb
Co-authored-by: Alexander Brandon Coles <a.coles@openproject.com>
* Update lookbook/docs/patterns/accessibility/18-aria-live.md.erb
Co-authored-by: Alexander Brandon Coles <a.coles@openproject.com>
* Update lookbook/docs/patterns/accessibility/18-aria-live.md.erb
Co-authored-by: Alexander Brandon Coles <a.coles@openproject.com>
* Update lookbook/docs/patterns/accessibility/18-aria-live.md.erb
Co-authored-by: Alexander Brandon Coles <a.coles@openproject.com>
* Update lookbook/docs/patterns/accessibility/18-aria-live.md.erb
Co-authored-by: Alexander Brandon Coles <a.coles@openproject.com>
* change parameter in update_inputs_aria_live_message string
* change type to politeness
* Update lookbook/docs/patterns/accessibility/18-aria-live.md.erb
Co-authored-by: Alexander Brandon Coles <a.coles@openproject.com>
* set delay for polite updates
* use delay in relations tab update and date pickr update
* remove the usage of aria live region update message in relations tab, since we should handle update message here in another way
* use assistive technology instead of screen reader only
* change the stream action to live region
* change the aria action to live region
* remove alert role
* change the string in away that if there is no value for start date, finish date or duration, it shouldn't be part of the string
* remove aria-live from input text fields
* test for updated message in date pickr
* undo changes for relations updates
* check if message is null then return
* add more delay for updating data in date picker
* fix test for adding more delay for updating data in date picker
---------
Co-authored-by: Henriette Darge <h.darge@openproject.com>
Co-authored-by: Alexander Brandon Coles <a.coles@openproject.com>
We should be able to render a custom implementation of component_wrapper
in scenarios where we're sending turbo stream responses for a "Slot"
view component and wouldn't want to have a different DOM structure when
sending a "replace" action with an extra tag as compared to initial
renders.
The purpose of `@component_wrapper_used` in this scenario is to check
if the component that is to be inserted into the target has used
a `component_wrapper` in its template rendering.
This both:
* Fixes the issue where this will always raise an error as
the target component is not being rendered (and doesn't need to be).
* Ensures that there is a unique ID set at the top-most level of
the turbo stream response and turbo can de-duplicate any existing
components that match the current ID of the component before
appending/prepending.
Given I attempt to remove a component via a turbo stream, this resulted
in a
```
"You need to wrap your component in a `component_wrapper` block in order to use the turbo-stream methods"
```
error. This is due to the component template not being rendered and
the `@component_wrapped_used` instance variable not being set (because
the `component_wrapper` invocation in the component template is never
called.
The proposed fix for this is to render JUST the `component_wrapper` (without
its block content) in order to get the dom id that needs removal
and turbo streams is able to do its magic.
This is achieved by providing a `@wrapper_only` flag so when the
`component_wrapper` method is called within the component's template,
only the wrapper tag is rendered, making it enough to perform a
successful turbo stream removal of the component by handling this
case with the short circuit. We don't really care in this case about
rendering the entire component given all we care about is that
outer tag.
Kabiru Mwenja