Repository navigation
Commit 7879ec5
fix(select): derive option text from all child nodes (#31382)
Issue number: resolves #31381
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
`ion-select` derives the text it displays for the selected option, and
that option's
contribution to the button's `aria-label`, from the option's child
nodes. In v9 that
derivation is wrong whenever an option has more than one child node, or
has its text
wrapped in an element.
| `ion-select-option` content | browser renders | v8 | v9 |
| --- | --- | --- | --- |
| `Star` | `Star` | `Star` | `Star` |
| two sibling text nodes, `{'★'}{'Star'}` | `★Star` | `★Star` | `★ Star`
|
| `A <b>Star</b>` | `A Star` | `A Star` | `A` |
| `<b>Star</b>` | `Star` | `Star` | *(empty)* |
Two distinct defects:
1. **A space is inserted between adjacent text nodes.** Every framework
renders
`{icon}{label}` as two sibling text nodes with no whitespace between
them, so any
option with an emoji, flag, or icon prefix gains a space that is not in
the DOM.
2. **Text wrapped in an element is dropped entirely.** An option whose
content is
`<b>Star</b>`, `<span>Star</span>`, or an i18n component's wrapper
element renders as
an **empty select** with an empty accessible name, silently. This is the
more damaging
of the two.
Both affect the visible selected text and the `aria-label`, and both
propagate to every
overlay interface — `createAlertInputs`, `createActionSheetButtons`, and
`createOverlaySelectOptions` read the option through the same helper. In
the linked
reproduction, opening the first select shows an alert radio labelled `★
Star`.
There is no error or warning; the text is just wrong.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
The selected text and `aria-label` should match what the browser renders
for the option's
content, which is what v8 produced via `textContent`: `★Star` for two
adjacent text nodes,
and `A Star` for `A <b>Star</b>`.
-
-
-
## Does this introduce a breaking change?
- [ ] Yes
- [X] No
(It fixes an unreported breaking change made in
#31241)
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: Shane <shane@shanessite.net>1 parent 51a2694 commit 7879ec5
3 files changed
Lines changed: 318 additions & 42 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
15 | 15 | | |
16 | 16 | | |
17 | 17 | | |
18 | | - | |
| 18 | + | |
19 | 19 | | |
20 | 20 | | |
21 | 21 | | |
| |||
1481 | 1481 | | |
1482 | 1482 | | |
1483 | 1483 | | |
1484 | | - | |
1485 | | - | |
1486 | | - | |
| 1484 | + | |
| 1485 | + | |
| 1486 | + | |
| 1487 | + | |
| 1488 | + | |
| 1489 | + | |
1487 | 1490 | | |
1488 | | - | |
1489 | | - | |
1490 | | - | |
1491 | | - | |
1492 | | - | |
1493 | | - | |
1494 | | - | |
1495 | | - | |
1496 | | - | |
1497 | | - | |
1498 | | - | |
1499 | | - | |
1500 | | - | |
1501 | | - | |
1502 | | - | |
1503 | | - | |
1504 | | - | |
1505 | | - | |
1506 | | - | |
1507 | | - | |
1508 | | - | |
1509 | | - | |
1510 | | - | |
| 1491 | + | |
1511 | 1492 | | |
1512 | 1493 | | |
1513 | 1494 | | |
| |||
1570 | 1551 | | |
1571 | 1552 | | |
1572 | 1553 | | |
1573 | | - | |
| 1554 | + | |
| 1555 | + | |
| 1556 | + | |
| 1557 | + | |
| 1558 | + | |
1574 | 1559 | | |
1575 | | - | |
| 1560 | + | |
1576 | 1561 | | |
1577 | 1562 | | |
1578 | 1563 | | |
| |||
1636 | 1621 | | |
1637 | 1622 | | |
1638 | 1623 | | |
| 1624 | + | |
| 1625 | + | |
| 1626 | + | |
| 1627 | + | |
| 1628 | + | |
| 1629 | + | |
| 1630 | + | |
| 1631 | + | |
| 1632 | + | |
| 1633 | + | |
| 1634 | + | |
| 1635 | + | |
| 1636 | + | |
| 1637 | + | |
| 1638 | + | |
| 1639 | + | |
| 1640 | + | |
| 1641 | + | |
| 1642 | + | |
| 1643 | + | |
| 1644 | + | |
| 1645 | + | |
| 1646 | + | |
| 1647 | + | |
| 1648 | + | |
| 1649 | + | |
| 1650 | + | |
| 1651 | + | |
1639 | 1652 | | |
1640 | 1653 | | |
1641 | | - | |
| 1654 | + | |
| 1655 | + | |
| 1656 | + | |
| 1657 | + | |
| 1658 | + | |
| 1659 | + | |
| 1660 | + | |
1642 | 1661 | | |
1643 | 1662 | | |
1644 | | - | |
1645 | | - | |
1646 | | - | |
1647 | | - | |
1648 | | - | |
1649 | | - | |
1650 | | - | |
1651 | | - | |
1652 | | - | |
1653 | | - | |
1654 | | - | |
| 1663 | + | |
| 1664 | + | |
1655 | 1665 | | |
1656 | 1666 | | |
1657 | 1667 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
430 | 430 | | |
431 | 431 | | |
432 | 432 | | |
433 | | - | |
| 433 | + | |
434 | 434 | | |
435 | 435 | | |
436 | 436 | | |
| |||
466 | 466 | | |
467 | 467 | | |
468 | 468 | | |
| 469 | + | |
| 470 | + | |
| 471 | + | |
| 472 | + | |
| 473 | + | |
| 474 | + | |
469 | 475 | | |
470 | 476 | | |
471 | 477 | | |
| |||
479 | 485 | | |
480 | 486 | | |
481 | 487 | | |
| 488 | + | |
| 489 | + | |
| 490 | + | |
| 491 | + | |
| 492 | + | |
| 493 | + | |
482 | 494 | | |
483 | 495 | | |
484 | 496 | | |
0 commit comments