add a way to remove formatting tags from strings and add underscores to list, see phetsims/joist#1038

Author: jessegreenberg

js/accessibility/pdom/PDOMUtils.ts

@@ -61,14 +61,15 @@ const INS_TAG = 'INS';
 const SUB_TAG = 'SUB';
 const SUP_TAG = 'SUP';
 const BR_TAG = 'BR';
+const U_TAG = 'U';
 
 // These browser tags define which elements are focusable by default. Used by ParallelDOM to decide when
 // to override tabindex on the primary sibling. See https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus
 const DEFAULT_FOCUSABLE_TAGS = [ A_TAG, AREA_TAG, INPUT_TAG, SELECT_TAG, TEXTAREA_TAG, BUTTON_TAG, IFRAME_TAG ];
 
 // collection of tags that are used for formatting text
 const FORMATTING_TAGS = [ BOLD_TAG, STRONG_TAG, I_TAG, EM_TAG, MARK_TAG, SMALL_TAG, DEL_TAG, INS_TAG, SUB_TAG,
-  SUP_TAG, BR_TAG ];
+  SUP_TAG, BR_TAG, U_TAG ];
 
 // these elements do not have a closing tag, so they won't support features like innerHTML. This is how PhET treats
 // these elements, not necessary what is legal html.

js/nodes/RichText.ts

@@ -1784,7 +1784,7 @@ export default class RichText extends WidthSizable( Node ) {
    * Stringifies an HTML subtree defined by the given element, but removing certain tags that we don't need for
    * accessibility (like <a>, <span>, etc.), and adding in tags we do want (see ACCESSIBLE_TAGS).
    */
-  public static himalayaElementToAccessibleString( element: HimalayaNode ): string {
+  public static himalayaElementToAccessibleString( element: HimalayaNode, keepFormattingTags = true ): string {
     if ( isHimalayaTextNode( element ) ) {
       return richTextContentToString( element.content );
     }
@@ -1797,11 +1797,18 @@ export default class RichText extends WidthSizable( Node ) {
         content = StringUtils.wrapDirection( content, dir );
       }
 
-      if ( _.includes( ACCESSIBLE_TAGS, element.tagName ) ) {
+      if ( keepFormattingTags && _.includes( ACCESSIBLE_TAGS, element.tagName ) ) {
         return `<${element.tagName}>${content}</${element.tagName}>`;
       }
       else {
-        return content;
+
+        // We are removing all formatting tags. For breaks, add a space as that was the most likely intent.
+        if ( element.tagName === 'br' ) {
+          return ` ${content}`;
+        }
+        else {
+          return content;
+        }
       }
     }
     else {
@@ -1813,13 +1820,13 @@ export default class RichText extends WidthSizable( Node ) {
    * Transforms a given string with HTML markup into a string suitable for screen readers.
    * Preserves basic styling tags while removing non-accessible markup.
    */
-  public static getAccessibleStringProperty( stringProperty: TReadOnlyProperty<string> ): TReadOnlyProperty<string> {
+  public static getAccessibleStringProperty( stringProperty: TReadOnlyProperty<string>, keepFormattingTags = true ): TReadOnlyProperty<string> {
     return new DerivedStringProperty( [ stringProperty ], string => {
       const rootElements: HimalayaNode[] = himalayaVar.parse( string );
 
       let accessibleString = '';
       rootElements.forEach( element => {
-        accessibleString += RichText.himalayaElementToAccessibleString( element );
+        accessibleString += RichText.himalayaElementToAccessibleString( element, keepFormattingTags );
       } );
 
       return accessibleString;