Skip to content

Commit

Permalink
remove updateAccessiblePeers for HTMLElement attributes, see #825
Browse files Browse the repository at this point in the history
  • Loading branch information
@zepumph
zepumph committed Jul 4, 2018
1 parent f974dbc commit e220b7c
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 46 deletions.
55 changes: 25 additions & 30 deletions js/accessibility/Accessibility.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -837,9 +837,10 @@ define( function( require ) {
assert && assert( this._tagName.toUpperCase() === INPUT_TAG, 'tag name must be INPUT to support inputType' );

this._inputType = inputType;
this.updateAccessiblePeers( function( accessiblePeer ) {
accessiblePeer.primarySibling.type = inputType;
} );
for ( var i = 0; i < this._accessibleInstances.length; i++ ) {
var peer = this._accessibleInstances[ i ].peer;
peer && peer.setAttributeToElement( 'type', inputType );
}
},
set inputType( inputType ) { this.setInputType( inputType ); },

Expand Down Expand Up @@ -1898,9 +1899,10 @@ define( function( require ) {
value = '' + value;
this._inputValue = value;

this.updateAccessiblePeers( function( accessiblePeer ) {
accessiblePeer.primarySibling.value = value;
} );
for ( var i = 0; i < this._accessibleInstances.length; i++ ) {
var peer = this._accessibleInstances[ i ].peer;
peer && peer.setAttributeToElement( 'value', value );
}
},
set inputValue( value ) { this.setInputValue( value ); },

Expand Down Expand Up @@ -1928,9 +1930,10 @@ define( function( require ) {

this._accessibleChecked = checked;

this.updateAccessiblePeers( function( accessiblePeer ) {
accessiblePeer.primarySibling.checked = checked;
} );
for ( var i = 0; i < this._accessibleInstances.length; i++ ) {
var peer = this._accessibleInstances[ i ].peer;
peer && peer.setAttributeToElement( 'checked', checked );
}
},
set accessibleChecked( checked ) { this.setAccessibleChecked( checked ); },

Expand Down Expand Up @@ -1990,14 +1993,11 @@ define( function( require ) {
value: value,
namespace: options.namespace
} );
this.updateAccessiblePeers( function( accessiblePeer ) {
if ( options.namespace ) {
accessiblePeer.primarySibling.setAttributeNS( options.namespace, attribute, value );
}
else {
accessiblePeer.primarySibling.setAttribute( attribute, value );
}
} );

for ( var j = 0; j < this._accessibleInstances.length; j++ ) {
var peer = this._accessibleInstances[ j ].peer;
peer && peer.setAttributeToElement( attribute, value, options );
}
},

/**
Expand Down Expand Up @@ -2027,14 +2027,10 @@ define( function( require ) {
}
assert && assert( attributeRemoved, 'Node does not have accessible attribute ' + attribute );

this.updateAccessiblePeers( function( accessiblePeer ) {
if ( options.namespace ) {
accessiblePeer.primarySibling.removeAttributeNS( options.namespace, attribute );
}
else {
accessiblePeer.primarySibling.removeAttribute( attribute );
}
} );
for ( var j = 0; j < this._accessibleInstances.length; j++ ) {
var peer = this._accessibleInstances[ j ].peer;
peer && peer.removeAttributeFromElement( attribute, options );
}
},

/**
Expand Down Expand Up @@ -2068,11 +2064,10 @@ define( function( require ) {

this._focusableOverride = focusable;

this.updateAccessiblePeers( function( accessiblePeer ) {
if ( accessiblePeer.primarySibling ) {
accessiblePeer.primarySibling.tabIndex = self.focusable ? 0 : -1;
}
} );
for ( var i = 0; i < this._accessibleInstances.length; i++ ) {
var peer = this._accessibleInstances[ i ].peer;
peer && peer.setAttributeToElement( 'tabIndex', self.focusable ? 0 : -1 );
}
},
set focusable( isFocusable ) { this.setFocusable( isFocusable ); },

Expand Down
5 changes: 5 additions & 0 deletions js/accessibility/AccessibilityTests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -765,6 +765,11 @@ define( function( require ) {

a1.removeAccessibleAttribute( 'role' );
assert.ok( !a1Element.getAttribute( 'role' ), 'attribute removed' );

var b = new Node( { focusable: true } );
a1.addChild( b );
b.tagName = 'div';
assert.ok( getPrimarySiblingElementByNode( b ).tabIndex >= 0, 'set tagName after focusable' );
} );

QUnit.test( 'Accessibility input listeners', function( assert ) {
Expand Down
88 changes: 72 additions & 16 deletions js/accessibility/AccessiblePeer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,12 @@ define( function( require ) {

var globalId = 1;

// constants
var PRIMARY_SIBLING = 'PRIMARY_SIBLING';
var LABEL_SIBLING = 'LABEL_SIBLING';
var DESCRIPTION_SIBLING = 'DESCRIPTION_SIBLING';
var CONTAINER_PARENT = 'CONTAINER_PARENT';

/**
* Constructor.
*
Expand Down Expand Up @@ -144,46 +150,96 @@ define( function( require ) {
},

/**
* Get an element on this node, looked up by the association flag passed in.
* Get an element on this node, looked up by the elementName flag passed in.
* @public (scenery-internal)
*
* @param {string} association - see AccessibilityUtil for valid associations
* @param {string} elementName - see AccessibilityUtil for valid associations
* @return {HTMLElement}
*/
getElementByName: function( association ) {
if ( association === AccessiblePeer.PRIMARY_SIBLING ) {
getElementByName: function( elementName ) {
if ( elementName === AccessiblePeer.PRIMARY_SIBLING ) {
return this.primarySibling;
}
else if ( association === AccessiblePeer.LABEL_SIBLING ) {
else if ( elementName === AccessiblePeer.LABEL_SIBLING ) {
return this.labelSibling;
}
else if ( association === AccessiblePeer.DESCRIPTION_SIBLING ) {
else if ( elementName === AccessiblePeer.DESCRIPTION_SIBLING ) {
return this.descriptionSibling;
}
else if ( association === AccessiblePeer.CONTAINER_PARENT ) {
else if ( elementName === AccessiblePeer.CONTAINER_PARENT ) {
return this.containerParent;
}

assert && assert( false, 'invalid association name: ' + association );
assert && assert( false, 'invalid elementName name: ' + elementName );
},

/**
* Add DOM Event listeners to the peer's primary sibling.
* @param {Object} accessibleInput - see Accessibility.addAccessibleInputListener
*/
addDOMEventListeners: function( accessibleInput ){
addDOMEventListeners: function( accessibleInput ) {
AccessibilityUtil.addDOMEventListeners( accessibleInput, this.primarySibling );
},
/**
* Remove DOM Event listeners from the peer's primary sibling.
* @param {Object} accessibleInput - see Accessibility.addAccessibleInputListener
*/
removeDOMEventListeners: function( accessibleInput ){
removeDOMEventListeners: function( accessibleInput ) {
AccessibilityUtil.removeDOMEventListeners( accessibleInput, this.primarySibling );
},
},

/**
* Sets a attribute on one of the peer's HTMLElements.
* @param {string} attribute
* @param {*} attributeValue
* @param {Object} [options]
*/
setAttributeToElement: function( attribute, attributeValue, options ) {

options = _.extend( {
// {string|null} - If non-null, will set the attribute with the specified namespace. This can be required
// for setting certain attributes (e.g. MathML).
namespace: null,

/**
elementName: PRIMARY_SIBLING // see this.getElementName() for valid values, default to the primary sibling
}, options );

var element = this.getElementByName( options.elementName );

if ( options.namespace ) {
element.setAttributeNS( options.namespace, attribute, attributeValue );
}
else {
element.setAttribute( attribute, attributeValue );
}
},
/**
* Remove attribute from one of the peer's HTMLElements.
* @param {string} attribute
* @param {Object} [options]
*/
removeAttributeFromElement: function( attribute, options ) {

options = _.extend( {
// {string|null} - If non-null, will set the attribute with the specified namespace. This can be required
// for setting certain attributes (e.g. MathML).
namespace: null,

elementName: PRIMARY_SIBLING // see this.getElementName() for valid values, default to the primary sibling
}, options );

var element = this.getElementByName( options.elementName );

if ( options.namespace ) {
element.removeAttributeNS( options.namespace, attribute );
}
else {
element.removeAttribute( attribute );
}
},


/**
* Removes external references from this peer, and places it in the pool.
* @public (scenery-internal)
*/
Expand Down Expand Up @@ -260,10 +316,10 @@ define( function( require ) {
}, {

// @static - specifies valid associations between related AccessiblePeers in the DOM
PRIMARY_SIBLING: 'PRIMARY_SIBLING', // associate with all accessible content related to this peer
LABEL_SIBLING: 'LABEL_SIBLING', // associate with just the label content of this peer
DESCRIPTION_SIBLING: 'DESCRIPTION_SIBLING', // associate with just the description content of this peer
CONTAINER_PARENT: 'CONTAINER_PARENT' // associate with everything under the container parent of this peer
PRIMARY_SIBLING: PRIMARY_SIBLING, // associate with all accessible content related to this peer
LABEL_SIBLING: LABEL_SIBLING, // associate with just the label content of this peer
DESCRIPTION_SIBLING: DESCRIPTION_SIBLING, // associate with just the description content of this peer
CONTAINER_PARENT: CONTAINER_PARENT // associate with everything under the container parent of this peer
} );

// Set up pooling
Expand Down

0 comments on commit e220b7c

Please sign in to comment.