- React Button was only ever used to render a link (a element)
- This creates a potential accessibility issue if developers want to render a button, it's confusing and incorrect
- Additionally, the unused prop (dialogTrigger) & aria-haspopup is non-compliant and has been removed
Tippy unmounts its popper element from the DOM on hide, which means that
the filter fields get detached from the form. As a result, when
performing a search (which means the filters popup is closed), any
filters that have been applied will be lost. The issue does not occur
the other way around (filtering after search) because the filter fields
will still be in the DOM (as the popup is open while you're applying the
filters).
Unfortunately, Tippy does not offer a built-in option to keep the popper
mounted in the DOM when it's hidden.
As a workaround, use Tippy's hooks to re-append the popper to the DOM.
- onCreate: ensure the popper element is mounted even when the tippy was
just created (normally it's only mounted when shown). This is useful
to keep the filters when searching after a full-page refresh (e.g.
after navigating to the next page in pagination).
- onHidden: ensure the popper is still mounted, to solve the main issue
- onShow: remove the hidden attribute and let tippy move the popper
element as necessary (though usually this isn't necessary, because we
remount it in the same position (the controller's element).
The 'hidden' attribute shouldn't cause any issues here as Tippy doesn't
use it. Without it, the solution still works because Tippy uses CSS to
make the element invisible. However, the complete CSS doesn't get
applied until the tippy is shown at least once. This means on initial
load with the onCreate hook, the tippy will take up the space while
being invisible. Using the attribute fixes it (and display:none probably
would too).
This behaviour can be enabled using the newly-added DropdownController
value 'keepMounted'.
Also move the insertion of the param to get_url_without_foo methods to avoid the param getting applied multiple times and to avoid having to parse the URL again.
Rename the filter_fragment to _w_filter_fragment to avoid clashes
Fixes #11420
Two issues existed;
1. Safari will not set `document.activeElement` as expected in all other browsers, instead, when a button is clicked it will keep the activeElement as `body`. This meant that the reset of the disabled button (before the confirm triggers a click) was not working.
2. Visually the button still had the loading spinner due to w-progress controller having triggered the loading visuals, this did not block the behaviour but looked broken.
See Safari behaviour docs:
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
- https://bugs.webkit.org/show_bug.cgi?id=22261
bulk-action-checkbox is the checkbox in the <td> elements. On page
listings, if you're searching and there are no results, the table will
still be displayed (to give you the option to search the whole site).
The table has no data rows, which means there are no elements with
bulk-action-checkbox class.
Change the selector to target the bulk-actions-filter-checkbox class
instead, which is the bulk action's <th> checkbox. This element (in the
header cell) is always available even when there are no results.
- updated the font to its direct use theme and removed -title-height
- removed the 1-time used scss variables and updated directly in the files
- Fixes #11458
- Fix edge case where keyboard ordering and then drag drop ordering could get out of sync
- Ensure the sortable instance is cleaned up if the controller gets removed
- Relates to PR #11250 & Issue #10909
- Add w-dialog root classname to support overall styling of the dialog if a message is provided
- Fix up layout of dynamic classes to avoid additional spaces
- Fixes #11306
- Make the new table_header_choice select backwards compatible with tables stored before Wagtail 6.0
- Built on previous PRs #9673 & #6763
- Fixes #5989
- Closes #8507
- Make caption default to "" for tables that predate adding the caption field
- Update the html generated in JS so the rendered form matches our new styles
- Use a consistent period (full stop) at the end of the help text sentence (including table fields)
- Fully remove initTooltips util and replace with Controller usage
- Move plugins to their used Controller files
- Export hideTooltipOnEsc as it's used by other code
- Add unit tests for plugin behaviour in the controller tests
- Fixes #10668
- Built on #10869
The added CSS handles the case when nice padding is removed (to make the listing
go full-width) and no bulk actions are available (e.g. a ModelViewSet index view
or some other view that extends generic listing view).
This allows us to not rely on the full-width class (which should
eventually be removed) while correctly apply the spacing regardless
whether nice-padding is used or not, and whether bulk actions are
available or not.
If nice-padding is used, then the listing view will look as they
previously do.
We want to make the slim_header.html as the basis for the modern header
template that will be used everywhere, eventually replacing header.html.
Rather than making the page explorer be the special case where we want
the last item to be bigger, do it the other way around i.e. use the
smaller font size on the create/edit views. This ensures that the big
font size is used on all other views e.g. Inspect view.
Remove use of shared/filters.html, as it contains a duplicate `<form>` element we don't want, and generally has more stuff we don't want than stuff we do, to the point that it'll just get in the way of restyling.
Where possible, adopt a subset of stylelint-config-wagtail changes.
- Formatting & ordering (auto applied), this includes the padding/inset shorthand changes
- Adopt a small set of no-union-classes changes as an example of changes to come in future PRs
- Ignore some areas where we are selecting against data* attributes that will not be practical to change
- Move some no-important ignore rules to specific lines
- Ignore max-combinators in modeladmin styles (legacy)
- Remove error messages forced-color-adjust setting to none
- Ensure that some rules are always ignored in overrides (aka vendor) styles. This avoids us having to add ignore comments all over these styles.
- Resolves #10719
At this point wagtailadmin/shared/field.html is still used by FieldPanel, as well as third-party code. Replace this by a template that simply pulls the relevant context variables from the template and passes them on to `{% formattedfield %}` (which renders them using the old template, now renamed formatted_field.html). This will allow us to move logic from the template to the tag function without breaking the existing wagtailadmin/shared/field.html API.
- Set the side panel width custom property ('--side-panel-width') globally, not just on the form container.
- Use this custom property to determine the max width of the form content.
- Fixes #11038
Ensures that when the iframe content is loaded there is a background on the iframe. So that transparent websites show correctly in the preview panel.
Fixes #11174
These will not be removed in 6.0, to ensure that the two-release deprecation period is still in place.
The removal of the legacy moderation is an exception, as this was slated for removal from 2.x, long before the deprecation warnings were put in place.
- Remove the sidebar duplicate JS that would also add a ready class but NOT after a settimeout, only after the component renders
- This means we now have one location in the code that does this, driven by Stimulus
- Update the Storybook preview JS so that we can rely on similar behaviour in Storybook for transitions
- Controller will automatically add or remove some initial classes when connected
- An optional delay can be set to have this run after a settimeout
- Replace the core.js ready class addition (which would run after a settimeout)
- Accessing constructor was confusing and createController is not a core requirement
- Avoid modifying the base Stimulus application class
- Expose `window.StimulusModule` as the module output
- Expose `window.wagtail.app` as the Wagtail Stimulus application instance
- Rename root element variable to `root` in initStimulus (so we do not conflict with potential action option registration that uses `element` variable names)
- Pull in the wagtail.components to the same core.js file and add JSDoc for exposed global
- Relates to #10197
- This constraint is not required in unit tests where the output of a class is not the main thing being tested
- Avoid noise in tests by just removing disabling this linting rule in these files
- There is one case where the closing tag was malformed
- All other cases are just ensuring the final backtick is on the closing tag's line
- This allows IDEs to better pick up on html within template tags
- Replace global util window.updateFooterSaveWarning with the w-messages usage
- Remove window.updateFooterSaveWarning usage in core.js & move 'delay before clearing' time delay to the Stimulus value
- Fix JSDoc usage in `enableDirtyFormCheck`
- Add aria-live="polite" so message updates can be advised to screen readers
- Add release considerations and for `window.updateFooterSaveWarning` removal
- Closes #10091
- Changes default show-delay to zero (immediate) and update the w-messages (page messages) to have the 100ms delay
- Add support for 'hide' classes to be added/removed based on clone usage
- Add support for calling the clear method from actions, and resetting classes if used after a clear delay value
- Add JSDoc descriptions to most other properties, add better TS types
- Pull out logic to get template content to class method
- Based on initial work in #10327
- Register with two identifiers; w-messages & w-clone
- Update unit tests and basic JSDoc to align with new naming
- This allows the Controller to reflect the 'behaviour' not the 'usage'
- Allow the debounced function to be used with a Promise API
- Allow debounce to be called with a non-number/falsey to indicate there should be no wait (runs immediately)
- Add error handling
- Refine types to be better to work with for callers
- Add full unit test suite to implementation
Handsontable has support for merging table cells using the `mergeCells`
plugin but there was no support in Wagtail for storing which cells have
been merged or rendering them in the output template.
The client JavaScript will now save which cells have been merged and
the output template will merge or hide cells.
See https://handsontable.com/docs/6.2.0/Options.html#mergeCells
- Adds a new generic `RevealController` that handles the ability for content to be opened/closed while updating the relevant parts of the DOM such as aria-expanded on the toggle.
- Register this controller as a generic `w-reveal` and also the `w-breadcrumb` identifiers so that we can differentiate usage via different DOM attributes and events.
- Closes #10118
- Passing anything to Promise.resolve just means that will be the return value of the promise (.then)
- This does not actually run the function (e.g. in the case of requestAnimationFrame)
- Avoiding unit tests that could cause confusion in the future
- This allows us to pass extra data for the widget to use in a backwards-compatible way.
- FieldBlock: render 'required' and 'aria-describedby' attributes when appropriate
- Ensure options passed to `render` override defaults
- FieldBlock: add test proving options are constructed and passed down
- Allow Telepath's widget rendering to take options
- Include extra accessibility-related attributes in html output
- Resolves missing required attribute on input elements for required fields
- Resolves missing aria-describedby attribute on input element when the field has help text.
- Partial work on #10300
- The `update` util's types are not compatible with future TS v5 adoption.
- This util is simply a wrapper around `Object.assign` and only used in three places.
- Instead use the Object.assign in place for simplicity instead and remove the `update` util.
- Align JS with latest Eslint package updates
- Update configs to ignore new defaults not required in test files
- Update Controller js usage & configs for classProperty naming rules
- Remove eslint ignore directives no longer required due to changed defaults
- Test that uses setTimeout never ran as Tippy relies on `transitionend` events, which JSDom will not dispatch. Rework tests to correctly test this custom event gets dispatched
- Use Stimulus dispatch method for custom event dispatching as the controller name (e.g. 'w-dropdown') will automatically be added, work around TypeScript bug in Stimulus which should be fixed in a future release https://github.com/hotwired/stimulus/issues/642
- Add show/hide methods, pull out options to own get method
- Add unit tests for show/hide, content being in dropdown
- Relates to #10557
- Removes six inline scripts completely, no longer relying on window.headerSearch
- Update the fallback Stimulus Swap controller afterLoad to be a deprecated method
- Add upgrade considerations
- Fix regression from d554cbe310 where manually submitting page search results would load the partial, not full page response
- Closes #9950
- Builds on #9952
- Create a new method `submit` and `submitLazy` to serialise a form's inputs and submit (GET) async to replace content
- Create a lazy version of `replace` and add unit tests for it
- Partial progress on #9950
- Use a console.error spy to avoid the console error bubbling into logs for FieldBlock.test.js (also allows us to confirm an error was thrown)
- Adopt proper approach to 'flush promises' now that API is available for JSDom usage of microtasks/animation frame
- Adapt to new Jest timer mocking approach, use legacy timers in one file as there is not a suitable setTimeout (with zero delay) while also using async await
- `uuid` update is required to avoid import errors - https://github.com/uuidjs/uuid/blob/main/CHANGELOG.md#900-2022-09-05
- Add stubs for window.scrollTo to avoid console errors when running tests
- Filter out warnings for Draftail React warnings, these are unlikely to be resolved anytime soon and add noise to the Jests tests that are unhelpful
- Closes #10043
- Removes the jQuery slide animation so content will be instantly replaced
- Removes the autofocus behaviour on the search fields as this is not helpful for screen readers / keyboard control
- Includes support for `window.header` if provided alongside dynamic adding of data-* attributes if not included
- Base implementation for #9950
- Co-authored-by: sage <laymonage@gmail.com>
- Stimulus CountController content is programatically generated but best to avoid writing HTML accidentally
- ChooserModel field required label should avoid risk of translations with HTML
- Image focal point chooser's label does not need to support HTML
- FieldBlock us using h util but this can be avoided by built in browser escaping when innerText is used
- focal-point-chooser gets value from its set up but we should avoid innerHTML if we can
