FLUID-6583: Syllabification doesn't appear to detect content that's in the DOM but initially hidden

Description

While integrating UIO for the community-led co-design kit, I noticed that the Syllabification adjuster doesn't apply to content which is present in the DOM on page load but initially hidden. This can be observed on the We Count site:

https://wecount.inclusivedesign.ca/views/

When the "Search Filters" section is toggled via the downwards chevron button on the right, none of the available filters are broken up into syllables.

Based on my reading of https://issues.fluidproject.org/browse/FLUID-6554 it sounds like the syllabifier looks for new nodes added via a mutation observer. It doesn't seem to find and syllabify existing nodes which are hidden (via CSS display: none or the HTML hidden attribute).

Comments

• Justin Obara commented 2020-12-10T08:15:18.550-0500

  The syllabification explicitly does not attempt to syllabify hidden text. However it would definitely make sense to syllabify the text once it becomes visible, and it seems like the mutation observer is not picking this up. Unfortunately there are many different ways that an element may be hidden, and not all of those could be observed. An inline style or aria-hidden for example could probably be observed via attribute changes. However, if it's done purely by a change of a CSS class that may be on any ancestor, that would difficult.

  If you want to experiment with syllabifying hidden text you should start by overriding the hasTextToRead invoker. (See: fluid.textNodeParser.hasTextToRead for current implementation). In that case you might be able to just change the use of innerText to textContent. If that's the case we could probably just parameterize the method for retrieving text from the node in that function.

• Justin Obara commented 2020-12-14T11:09:45.548-0500

  Started investigating this in my FLUID-6583 branch. There are a bunch of failing tests at the moment. It's likely that some cases aren't adequately being captured.