Visual helper for text spacing fails to change the spacing for text in input fields and buttons

[Sciurus7]

trafficstars

Visual helper for text spacing fails to change the spacing for text in input fields and buttons

To Reproduce Steps to reproduce the behavior:

1. Open a page with at least a native input field and a button, enter some text in the input field.
2. Start an Accessibility Insights for Web assessment.
3. Navigate to step 17.6, Adaptable content > Text spacing.
4. Toggle the Visual helper toggle to the "On"state.
5. The spacing of the text in the input field and on the button does not change.

Expected behavior

The spacing of the text in the input field and on the button does change.

Screenshots

Before:

After:

Context (please complete the following information)

• Browser Version: Google Chrome Version 94.0.4606.81 (Official Build) (32-bit)
• Target Page: https://www.wikipedia.com will suffice as target for the assessment

Are you willing to submit a PR?

Did you search for similar existing issues?

Yes

Additional context

This bug is caused because the tool attempts to use inheritance to change text spacing. This however is very weak and easily overridden. A colleague of mine created an html code snippet which pins down the underlying problem:

<style>
    *:not(.not-universal, input) {
        color: blue;
    }
    .container {
        color: fuchsia !important;
    }
    .test {
        color: green;
    }
</style>
<div class="container">
    This is the exact element, i.e. no inheritance, so fuchsia
    <p>
        This is blue because the universal selector is stronger than inheritance
    </p>
    <p class="test">
        This is green because the class selector is stronger than inheritance.
        <span class="not-universal">
            Still green, because the "test" class is closer. (And the universal selector is explicitly not applied here)
        </span>
    </p>
    <input value="black due to user agent">
</div>

[ghost]

This issue has been marked as ready for team triage; we will triage it in our weekly review and update the issue. Thank you for contributing to Accessibility Insights!

[jalkire]

I was able to reproduce this.

[ferBonnin]

triaged with Peter, needs investigation to understand how to fix this issue

[ghost]

This issue requires additional investigation by the Accessibility Insights team. When the issue is ready to be triaged again, we will update the issue with the investigation result and add "status: ready for triage". Thank you for contributing to Accessibility Insights!

[ghost]

This issue requires additional investigation by the Accessibility Insights team. When the issue is ready to be triaged again, we will update the issue with the investigation result and add "status: ready for triage". Thank you for contributing to Accessibility Insights!

[peterlukerow]

You could you the same method as the JS bookmarklet that was reference in #6553 which does work that was closed as a duplicate of this.

[peteretelej]

The injected styles are overridden by browser default styling (for example for input)

overridden by

More specific selector for example will correctly show change in spacing as it won't be overridden (wildcard here just for an example)

[seanelliott86]

I've also seen this have trouble changing headings when testing against libraries using css-in-js or elements that have classes attached that define the line-height, letter-spacing, and word-spacing properties.

It would be possible to change everything by leveraging the current injected class and targeting all elements:

.insights-formatted-text-spacing-container *{
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}