From 6be5736f1ad550c011e5ef83aa6b12e8278b0edf Mon Sep 17 00:00:00 2001 From: Jesse Greenberg Date: Fri, 30 Mar 2018 12:43:42 -0600 Subject: [PATCH] add innerContent, setter for accessible name for primary sibling element, see #755 --- js/accessibility/Accessibility.js | 43 +++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/js/accessibility/Accessibility.js b/js/accessibility/Accessibility.js index e54afa869..f5edbd75c 100644 --- a/js/accessibility/Accessibility.js +++ b/js/accessibility/Accessibility.js @@ -108,6 +108,7 @@ define( function( require ) { 'groupFocusHighlight', // Sets the outer focus highlight for this node when a descendant has focus, see setGroupFocusHighlight() 'accessibleLabel', // Set the label content for the node, see setAccessibleLabel() 'accessibleLabelAsHTML', // Set the label content for the node as innerHTML, see setAccessibleLabelAsHTML() + 'innerContent', // set the inner text or HTML for a node's primary sibling element, see setInnerContent() 'accessibleDescription', // Set the description content for the node, see setAccessibleDescription() 'accessibleDescriptionAsHTML', // Set the description content for the node as innerHTML, see setAccessibleDescriptionContentAsHTML() 'accessibleVisible', // Sets whether or not the node's DOM element is visible in the parallel DOM @@ -203,6 +204,10 @@ define( function( require ) { // can be associated with a node's dom element, see setAccessibleLabel() for more documentation this._accessibleLabel = null; + // @private {null|string} - the inner label content for this node's primary sibling. Set as inner HTML + // or text content of the actual DOM element. If this is used, the node should not have children. + this._innerContent = null; + // @private {string} - whether or not the label content is innerHTML. Internal flag that is updated // when the label content is set. See setAccessibleLabelAsHTML() for more information this._labelIsHTML = null; @@ -684,6 +689,39 @@ define( function( require ) { }, get accessibleLabel() { return this.getAccessibleLabel(); }, + /** + * Set the inner content for the primary sibling of the AccessiblePeers of this node. Will be set as innerHTML + * unless content includes markup that is not a formatting tag. A node with inner content cannot + * have accessible descendants because this content will override the the HTML of descendants of this node. + * + * @param {string|null} content + * @public + */ + setInnerContent: function( content ) { + this._innerContent = content; + + // make sure HTML is exclusively text or formatting tags + var useHTML = AccessibilityUtil.usesFormattingTagsExclusive( content ); + + var self = this; + this.updateAccessiblePeers( function( accessiblePeer ) { + assert && assert( accessiblePeer.accessibleInstance.children.length === 0, 'descendants exist with accessible content, innerContent cannot be used' ); + setTextContent( accessiblePeer.domElement, self._innerContent, useHTML ); + } ); + }, + set innerContent( content ) { this.setInnerContent( content ); }, + + /** + * Get the inner content, the string that is the innerHTML or innerText for the node's primary sibling element. + * + * @return {string|null} + * @public + */ + getInnerContent: function() { + return this._innerContent; + }, + get innerContent() { return this.getInnerContent(); }, + /** * Should be used rarely and with caution, typically you should use setAccessibleLabel instead. * Sets the accessible label as innerHTML instead of textContent. This allows you to include @@ -1916,6 +1954,11 @@ define( function( require ) { } } + // restore the innerContent + if ( self._innerContent ) { + self.setInnerContent( self._innerContent ); + } + // set if using aria-label if ( self._ariaLabel ) { self.setAriaLabel( self._ariaLabel );