fix: allow text in read-only components to be selected

[TrevorBurnham]

Fixes #4411

This PR modifies the styles on DateRangePicker, FileTokenGroup, Select and Multiselect to make text selectable.

Testing

I've added a read-only toggle to the demo pages and was able to manually test each of these.

• Changes are covered with new/existing unit tests? No
• Changes are covered with new/existing integration tests? No

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.41%. Comparing base (2d19b0f) to head (42c67fd).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4417   +/-   ##
=======================================
  Coverage   97.41%   97.41%           
=======================================
  Files         933      933           
  Lines       29577    29577           
  Branches    10753    10752    -1     
=======================================
  Hits        28813    28813           
- Misses        716      757   +41     
+ Partials       48        7   -41     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[jperals]

Would it be possible to add coverage, maybe with the Selection API? https://developer.mozilla.org/en-US/docs/Web/API/Selection

[jperals]

Note: probably a minor use case, but the :not(&.in-filtering-token) excludes from this fix read-only operator selectors in property filter:

At the same time, we would prefer placeholder text to not be selectable, because that comes with collateral a11y issues (if it is interactive, it will have other requirements such as contrast):

[TrevorBurnham]

I've moved the user-select: text to a separate &.readonly:not(&.disabled) rule that also covers filtering tokens. I've also added user-select: none to .placeholder.

[TrevorBurnham]

I've rebased the branch, added test coverage (see the new "Read-only mode" describe block), and addressed your comments

[jperals]

The test should assert that the text is selectable via user interaction, not via the Selection API. The Selection API can be used for verification.

One way you can select text in tests is by double-clicking, with the caveat that the will only select part of the text (in this case, "2018") when it contains separators such as dashes.

Proposed:

    test(
      'trigger text is selectable',
      setupReadOnlyTest(async (page, browser) => {
        const triggerSelector = page.dateRangePickerTrigger;
        const triggerText = await page.getTriggerText();
        expect(triggerText).toContain('2018-01-09');

        const element = browser.$(triggerSelector);
        await element.doubleClick();

        const selectedText = await browser.execute(() => window.getSelection()?.toString());
        expect(selectedText).not.toBeFalsy();
        expect(triggerText).toContain(selectedText);
      })