Text/RichText accessibleName

[pixelzoom]

Noted in phetsims/models-of-the-hydrogen-atom#67 ...

I experimented with giving QuantumNumbersInfoDialog a treatment similar to joist's AboutDialog. The dialog can be opened by choosing "Schrodinger" model, and pressing the Info button. It looks like this:

Each paragraph in QuantumNumbersInfoDialog is an instance of RichText, and the strings contain a lot of HTML markup. Consequently, this is what it looks like in A11y View:

So a couple of things that seem to be needed for Text/RichText:

(1) A default for accessibleName. It’s odd that Text/RichText is instantiated with a string or stringProperty, but it's not used as the default for accessibleName. So I needed this duplication for each paragraph:

const nStringProperty = ...;
const nText = new RichText( nStringProperty, {
  tagName: 'p',
  accessibleName: nStringProperty,
  ...
} );

(2) Something to convert a UI string with markup into a format that is appropriate for description. Ideally this should be handled by Text/RichText, and I should be able to give it any string/stringProperty.

[pixelzoom]

(2) Something to convert a UI string with markup into a format that is appropriate for description. ...

@jessegreenberg noted that RichText has himalayaElementToAccessibleString.

[jessegreenberg]

It’s odd that Text/RichText is instantiated with a string or stringProperty, it's not used as the default for accessibleName. So I needed this duplication for each paragraph:

It is tricky because most instances of Text/RichText sould not have an accessible name or tag name. That content is usually forwarded to another UI component, like the actual button or checkbox.

There are other ways we could make it easier though, like having a subclass of Text/RichText where it is accessible by default (AccessibleText/AccessibleRichText). Or maybe just an option accessible: true and then the content is set as the accessibleName internally.

What do you think of those alternatives?

[pixelzoom]

It is tricky because most instances of Text/RichText sould not have an accessible name or tag name.

Ah right... Then I think using the duplication is preferrable to having a subclass or additional options (like accessibleName: boolean.)

But it would nice if we could make Text/RichText responsible for stripping out markup, so call sites don't have to deal with both duplication and conversion, like:

 const nStringProperty = ...;
const nText = new RichText( nStringProperty, {
  tagName: 'p',
  accessibleName: new DerivedStringProperty( [ nStringProperty ], n => RichText.himalayaElementToAccessibleString( n, ... ) )
  ...
} );

I'm also not sure where we're going to get the isLTR argument to himalayaElementToAccessibleString:

public static himalayaElementToAccessibleString( element: HimalayaNode, isLTR: boolean ): string {

[jessegreenberg]

OK sounds good.

You are right, I misread himalayaElementToAccessibleString. It appears to be intended for internal use. We can work on adding a new function for this that uses himalayaElementToAccessibleString, and I might reach out to @jonathanolson for support with this.

[jessegreenberg]

I implemented a first pass at this in de4f17b. In 5aed49f I changed it to return a string Property so usages can look like:

    const nlmStringProperty = new PatternStringProperty( ModelsOfTheHydrogenAtomStrings.nlmInfoStringProperty, {
      n: MOTHASymbols.nStringProperty,
      l: MOTHASymbols.lStringProperty,
      m: MOTHASymbols.mStringProperty
    } );
    const nlmText = new RichText( nlmStringProperty, combineOptions<RichTextOptions>( {
      tagName: 'p',
      accessibleName: RichText.getAccessibleStringProperty( nlmStringProperty )
    }, CONTENT_TEXT_OPTIONS ) )

I am not familiar with himalaya or RichText so I am not very confident in this. @jonathanolson can you please review, will this work generally?