Major Changes
-
c9bd577:
RovingTabindexController
,ListboxController
: constructor options were changed.
In particular, theinitItems(items: Item[])
andsetActiveItem(item: Item)
methods
were removed and replaced with thegetItems: () => Item[]
constructor option, and
theatFocusedItemIndex
accessor.Before:
#tabindex = new RovingTabindexController(this); firstUpdated() { this.#tabindex.initItems(this.items); } updated(changed: PropertyValues<this>) { if (changed.has('activeItem')) { this.#tabindex.setActiveItem(this.activeItem); } }
After:
#tabindex = RovingTabindexController.of(this, { getItems: () => this.items, }); updated(changed: PropertyValues<this>) { if (changed.has('activeItem')) { this.#tabindex.atFocusedItemIndex = this.items.indexOf(this.activeItem); } }
For further migration guidance, please see the sources in
@patternfly/pfe-core
,
especially:ATFocusController.ts
,RovingTabindexController.ts
, andListboxController.ts
.
-
c9bd577: Removed global
pfeLog
feature -
c9bd577: Removed
window.PfeConfig
global config object -
c9bd577: Removed global
auto-reveal
feature -
c9bd577: Decorators: Added
@observes
. Use it to add property change callback by
decorating them with the name of the property to observe@customElement("custom-button") class CustomButton extends LitElement { #internals = this.attachInternals(); @property({ type: Boolean }) disabled = false; @observes("disabled") protected disabledChanged() { this.#internals.ariaDisabled = this.disabled ? "true" : this.ariaDisabled ?? "false"; } }
Breaking change: This commit makes some changes to the internal APIs of the
pre-existing@observed
observer, most notably it changes the constructor
signature of thePropertyObserverController
and associated functions. Most
users should not have to make any changes, but if you directly import and use
those functions, check the commit log to see how to update your call sites. -
c9bd577: Removed global
trackPerformance
feature
Minor Changes
-
c9bd577: ✨ Added
ActiveDescendantController
This controller implements the WAI-ARIA activedescendant pattern
for keyboard and screen-reader accessibility.#activedescendant = ActivedescendantController.of(this, { getItems: () => this.options, getItemsContainer: () => this.#listbox, getOrientation: () => "vertical", getActiveDescendantContainer: () => this.#input, getControlsElements: () => [this.#input, this.#button].filter((x) => !!x), setItemActive: (item, active) => void (item.active = active), });
-
c9bd577: ✨ Added
ComboboxController
This controller implements the WAI-ARIA combobox pattern for both
select-only and inline autocomplete comboboxes.#combobox = ComboboxController.of(this, { multi: this.multi, getItems: () => this.options, getFallbackLabel: () => this.accessibleLabel, getListboxElement: () => this._listbox ?? null, getToggleButton: () => this._toggleButton ?? null, getComboboxInput: () => this._toggleInput ?? null, isExpanded: () => this.expanded, requestShowListbox: () => void (this.expanded ||= true), requestHideListbox: () => void (this.expanded &&= false), setItemHidden: (item, hidden) => void (item.hidden = hidden), isItem: (item) => item instanceof PfOption, setItemActive: (item, active) => (item.active = active), setItemSelected: (item, selected) => (item.selected = selected), });
-
6d9045e:
InternalsController
: added staticisSafari
boolean flag -
c9bd577: Decorators: Added
@listen
. Use it to attach element event listeners to
class methods.@customElement("custom-input") class CustomInput extends LitElement { @property({ type: Boolean }) dirty = false; @listen("keyup", { once: true }) protected onKeyup() { this.dirty = true; } }