Page MenuHomePhabricator

OOUI infusion loses aria-label attribute
Closed, InvalidPublicBUG REPORT

Description

An aria-label attribute set in PHP is removed in JS when an element is infused. For example, with the following button created in PHP:

$button = new \OOUI\ButtonWidget( [
	'label' => 'X',
	'id' => 'test-button',
	'infusable' => true,
] );
$button->setAttributes( [
	'aria-label' => 'Close',
] );

And infused like this in JS:

console.log( $( '#test-button' ).attr( 'aria-label' ) );
// Correctly outputs 'Close'.

var button = OO.ui.infuse( '#test-button' );
console.log( button.$element.attr( 'aria-label' ) );
// Incorrectly outputs 'undefined'.

Event Timeline

This is mostly as intended – infusing will only preserve things that were provided in the initial config. If you need something else to be preserved, then I'd suggest either creating a subclass of ButtonWidget that takes extra config options and then does stuff with them consistently in PHP and JS, or just adding some extra code around the OO.ui.infuse() call to pick up and restore it.

For T320414, it looks like you already have a PhonosButton class, so this should be easy to add. You'd just need to add a getConfig() method to the PHP class (example) to have the new configuration options sent to the JS class.

Hmm, okay understood. That makes sense.

I did actually write it with the extra config, but then undid that and did it a different way because it felt inefficient to add the same string to two places in the HTML! I'll return to the extra config, and not worry about the duplication.

Thanks!

If you wanted to do it that way, you could implement reusePreInfuseDOM() on your JS widget and pull it out of the HTML back into the config. OOUI mostly doesn't do that just because it's more complicated (and when implementing infusion initially, we also worried about compatibility with old on-wiki scripts that could mess up your DOM before you get the chance to pull the config out of it – probably not a big concern for Phonos, but it did come up with things like the wikitext edit form buttons).