As of Codex 0.10.0, we ought to have enough components in place to be able to migrate the Commons Special:MediaSearch page over to the new component library. This should be a very minor change from the perspective of users (in fact, many of the home-brewed Structured Data components used here went on to serve as the starting point for the equivalent Codex components) – there may be minor cosmetic shifts, but these will bring the feature more in line with the design system.

Despite the small user-facing impact, this work is important because MediaSearch is one of the last production features that still relies on the Vue 3 Compatibility build. Migrating MediaSearch to use Codex will improve UI consistency but it will also get us closer to where we can ship regular Vue 3 (w/o the compat build) everywhere in MediaWiki – an important task in terms of performance/tech debt.

Blockers

Here is a running list of blockers as I uncover them. Most of these are likely to be small.

• T336954: TextInput: Emit a "clear" event when the clear button is clicked – MediaSearch has a custom search input (different enough from our existing search components: Typeahead, Lookup, SearchInput). We could at least migrate to the Codex TextInput for better visual consistency in terms of the embedded icons, etc. but the MediaSearch app relies on a clear event being emitted from the clear button (this is used as a signal to also clear all existing search results, something that does not happen during a normal text input event). (merged, and available in next Codex release)

• T337429: TextInput: Add public blur() method The TextInput component exposes a public focus method to allow parent components to focus it automatically. The MediaSearch AutocompleteSearchInput component also expects to be able to programmatically blur the input element after a search suggestion has been selected/submitted.

• T337442: Don't output ARIA attributes with "false" values in component markup – MediaSearch runs in the Vue 3 compatibility build, and it is currently throwing warnings about the fact that some Codex components provide "false" values as attribute bindings (meaning that the attribute w/false value appears in the rendered HTML in Vue 3 but not in Vue 2). By updating the appropriate places in Codex to use an explicit null value, we can ensure that these dead attributes don't get included in the rendered HTML.