New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: support `Image` with `alt` prop as label #1665

Merged

mdjastrzebski merged 11 commits into main from feat/image-alt-label

Sep 12, 2024

Member

mdjastrzebski commented Sep 11, 2024 •

edited

Loading

Summary

Modifies existing a11y queries and matchers to support Image element with alt prop as a source for a11y label/accessible name.

Code that changes for Image + alt prop:

computeAriaLabel
*ByLabelText queries
*ByRole queries
toHaveAccessibleName matcher

Additionally:

host Image element is not considered to have image role, as experimentally only Android screen reader announces it, while on iOS "image" trait is not given by default and requires explicit role/accessibilityRole to be set.
added code to support mapping from image (AccessibilityRoletoimg(ARIARole`), so that users can use both names to match image elements.

Complements/Replaces #1663 as now getByRole('image', { name: 'alt text' }) or getByLabelText can be used to query images with alt prop.

References

Test plan

Added relevant automated tests.

mdjastrzebski added 4 commits

September 11, 2024 14:57


          refactor: detect Image host component name

e61a42a


          feat: support Image alt prop in *ByLabelText

70dd329


          feat: support *ByRole queries

125c233


          feat: support toHaveAccessibleName matcher

235709f

mdjastrzebski requested review from MattAgn and pierrezimmermannbam

September 11, 2024 13:32


          chore: fix typecheck

b6f0e67

mdjastrzebski changed the title ~~feat: image alt label~~ feat: support Image with alt prop as label

mdjastrzebski added 6 commits

September 11, 2024 15:55


          refactor: self code review

5323d81


          refactor: adjust finding to experiment results

0caf27f


          chore: add missing tests


          refactor: self code review

829043c


          refactor: self code review

28edb67


          refactor: self-code review

0a9623d

mdjastrzebski merged commit 04c7ee4 into main

7 checks passed

mdjastrzebski deleted the feat/image-alt-label branch

September 12, 2024 07:08

github-merge-queue bot referenced this pull request in valora-inc/wallet


          chore(deps): update dependency @testing-library/react-native to ^12.7…

749e27a

….2 (#6076)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
|
[@testing-library/react-native](https://callstack.github.io/react-native-testing-library)
([source](https://redirect.github.com/callstack/react-native-testing-library))
| [`^12.4.5` ->
`^12.7.2`](https://renovatebot.com/diffs/npm/@testing-library%2freact-native/12.4.5/12.7.2)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@testing-library%2freact-native/12.7.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@testing-library%2freact-native/12.7.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@testing-library%2freact-native/12.4.5/12.7.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@testing-library%2freact-native/12.4.5/12.7.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>callstack/react-native-testing-library
(@&#8203;testing-library/react-native)</summary>

###
[`v12.7.2`](https://redirect.github.com/callstack/react-native-testing-library/releases/tag/v12.7.2):
(2024-09-12)

[Compare
Source](https://redirect.github.com/callstack/react-native-testing-library/compare/v12.7.1...v12.7.2)

#### What's Changed

##### Features

- feat: simulated native TextInput state by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1653](https://redirect.github.com/callstack/react-native-testing-library/pull/1653)
- feat: support Switch checked state by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1657](https://redirect.github.com/callstack/react-native-testing-library/pull/1657)
- feat: support `Image` with `alt` prop as label by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1665](https://redirect.github.com/callstack/react-native-testing-library/pull/1665)

##### Bug Fixes

- fix: use native state across the queries and matchers by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1667](https://redirect.github.com/callstack/react-native-testing-library/pull/1667)

##### Other

- refactor: accessibility handling by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1658](https://redirect.github.com/callstack/react-native-testing-library/pull/1658)
- refactor: scroll view native state by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1661](https://redirect.github.com/callstack/react-native-testing-library/pull/1661)
- refactor: simplify native state management by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1662](https://redirect.github.com/callstack/react-native-testing-library/pull/1662)
- chore(deps-dev): bump
[@&#8203;callstack/eslint-config](https://redirect.github.com/callstack/eslint-config)
from 14.2.0 to 15.0.0 by
[@&#8203;dependabot](https://redirect.github.com/dependabot) in
[https://github.com/callstack/react-native-testing-library/pull/1650](https://redirect.github.com/callstack/react-native-testing-library/pull/1650)

#### New Contributors

- [@&#8203;amandeepmittal](https://redirect.github.com/amandeepmittal)
made their first contribution in
[https://github.com/callstack/react-native-testing-library/pull/1660](https://redirect.github.com/callstack/react-native-testing-library/pull/1660)

**Full Changelog**:
callstack/react-native-testing-library@v12.6.1...v12.7.1

###
[`v12.7.1`](https://redirect.github.com/callstack/react-native-testing-library/releases/tag/v12.7.1):
(2024-09-12)

[Compare
Source](https://redirect.github.com/callstack/react-native-testing-library/compare/v12.7.0...v12.7.1)

#### What's Changed

##### Features

- feat: simulated native TextInput state by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1653](https://redirect.github.com/callstack/react-native-testing-library/pull/1653)
- feat: support Switch checked state by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1657](https://redirect.github.com/callstack/react-native-testing-library/pull/1657)
- feat: support `Image` with `alt` prop as label by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1665](https://redirect.github.com/callstack/react-native-testing-library/pull/1665)

##### Other

- refactor: accessibility handling by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1658](https://redirect.github.com/callstack/react-native-testing-library/pull/1658)
- refactor: scroll view native state by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1661](https://redirect.github.com/callstack/react-native-testing-library/pull/1661)
- refactor: simplify native state management by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1662](https://redirect.github.com/callstack/react-native-testing-library/pull/1662)
- chore(deps-dev): bump
[@&#8203;callstack/eslint-config](https://redirect.github.com/callstack/eslint-config)
from 14.2.0 to 15.0.0 by
[@&#8203;dependabot](https://redirect.github.com/dependabot) in
[https://github.com/callstack/react-native-testing-library/pull/1650](https://redirect.github.com/callstack/react-native-testing-library/pull/1650)

#### New Contributors

- [@&#8203;amandeepmittal](https://redirect.github.com/amandeepmittal)
made their first contribution in
[https://github.com/callstack/react-native-testing-library/pull/1660](https://redirect.github.com/callstack/react-native-testing-library/pull/1660)

**Full Changelog**:
callstack/react-native-testing-library@v12.6.1...v12.7.1

###
[`v12.7.0`](https://redirect.github.com/callstack/react-native-testing-library/releases/tag/v12.7.0):
(2024-09-12)

[Compare
Source](https://redirect.github.com/callstack/react-native-testing-library/compare/v12.6.1...v12.7.0)

#### What's Changed

##### Features

- feat: simulated native TextInput state by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1653](https://redirect.github.com/callstack/react-native-testing-library/pull/1653)
- feat: support Switch checked state by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1657](https://redirect.github.com/callstack/react-native-testing-library/pull/1657)
- feat: support `Image` with `alt` prop as label by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1665](https://redirect.github.com/callstack/react-native-testing-library/pull/1665)

##### Other

- refactor: accessibility handling by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1658](https://redirect.github.com/callstack/react-native-testing-library/pull/1658)
- refactor: scroll view native state by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1661](https://redirect.github.com/callstack/react-native-testing-library/pull/1661)
- refactor: simplify native state management by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1662](https://redirect.github.com/callstack/react-native-testing-library/pull/1662)
- chore(deps-dev): bump
[@&#8203;callstack/eslint-config](https://redirect.github.com/callstack/eslint-config)
from 14.2.0 to 15.0.0 by
[@&#8203;dependabot](https://redirect.github.com/dependabot) in
[https://github.com/callstack/react-native-testing-library/pull/1650](https://redirect.github.com/callstack/react-native-testing-library/pull/1650)

#### New Contributors

- [@&#8203;amandeepmittal](https://redirect.github.com/amandeepmittal)
made their first contribution in
[https://github.com/callstack/react-native-testing-library/pull/1660](https://redirect.github.com/callstack/react-native-testing-library/pull/1660)

**Full Changelog**:
callstack/react-native-testing-library@v12.6.1...v12.7.0

###
[`v12.6.1`](https://redirect.github.com/callstack/react-native-testing-library/releases/tag/v12.6.1):
(2024-08-28)

[Compare
Source](https://redirect.github.com/callstack/react-native-testing-library/compare/v12.6.0...v12.6.1)

#### What's Changed

- refactor: remove real timers warning in User Event by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1654](https://redirect.github.com/callstack/react-native-testing-library/pull/1654)

**Full Changelog**:
callstack/react-native-testing-library@v12.6.0...v12.6.1

###
[`v12.6.0`](https://redirect.github.com/callstack/react-native-testing-library/releases/tag/v12.6.0):
(2024-08-16)

[Compare
Source](https://redirect.github.com/callstack/react-native-testing-library/compare/v12.5.3...v12.6.0)

##### What's changed

##### Features

- update `type()` events to match RN 0.75 (remove 'textInput' event)
([#&#8203;1645](https://redirect.github.com/callstack/react-native-testing-library/issues/1645))
([f0df299](https://redirect.github.com/callstack/react-native-testing-library/commit/f0df2994df90357060ac0cfa8e8ef049b4dd9a9c))
- User Event `paste()` interaction
([#&#8203;1646](https://redirect.github.com/callstack/react-native-testing-library/issues/1646))
([38bceed](https://redirect.github.com/callstack/react-native-testing-library/commit/38bceed25b8f84ccaa6c0938f7ab21b112c209e2))

###
[`v12.5.3`](https://redirect.github.com/callstack/react-native-testing-library/releases/tag/v12.5.3):
(2024-08-09)

[Compare
Source](https://redirect.github.com/callstack/react-native-testing-library/compare/v12.5.2...v12.5.3)

#### What's Changed

- fix: Respect maxLength prop in type() function by
[@&#8203;joshuayoes](https://redirect.github.com/joshuayoes) in
[https://github.com/callstack/react-native-testing-library/pull/1641](https://redirect.github.com/callstack/react-native-testing-library/pull/1641)
- chore: remove broken `experiments-rtl` app by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1642](https://redirect.github.com/callstack/react-native-testing-library/pull/1642)

#### New Contributors

- [@&#8203;joshuayoes](https://redirect.github.com/joshuayoes) made
their first contribution in
[https://github.com/callstack/react-native-testing-library/pull/1641](https://redirect.github.com/callstack/react-native-testing-library/pull/1641)

**Full Changelog**:
callstack/react-native-testing-library@v12.5.2...v12.5.3

###
[`v12.5.2`](https://redirect.github.com/callstack/react-native-testing-library/releases/tag/v12.5.2)

[Compare
Source](https://redirect.github.com/callstack/react-native-testing-library/compare/v12.5.1...v12.5.2)

##### Bug Fixes

- toBeVisible edge case for style values
([#&#8203;1640](https://redirect.github.com/callstack/react-native-testing-library/issues/1640))
([be31579](https://redirect.github.com/callstack/react-native-testing-library/commit/be3157999108f08babc39db25b0721c64c4fbb24))

###
[`v12.5.1`](https://redirect.github.com/callstack/react-native-testing-library/releases/tag/v12.5.1)

[Compare
Source](https://redirect.github.com/callstack/react-native-testing-library/compare/v12.5.0...v12.5.1)

##### Bug Fixes

- immediate setState in useEffect for
unstable_validateStringsRenderedWithinText
([#&#8203;1612](https://redirect.github.com/callstack/react-native-testing-library/issues/1612))
([76de7d2](https://redirect.github.com/callstack/react-native-testing-library/commit/76de7d2b2e814ab2c9d6b30331cc138f2659bc7e))

###
[`v12.5.0`](https://redirect.github.com/callstack/react-native-testing-library/releases/tag/v12.5.0)

[Compare
Source](https://redirect.github.com/callstack/react-native-testing-library/compare/v12.4.5...v12.5.0)

##### Features

- `*ByRole` TypeScript hints by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1596](https://redirect.github.com/callstack/react-native-testing-library/pull/1596)

##### Bug Fixes

- User Event: expose common base synthetic event methods by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1589](https://redirect.github.com/callstack/react-native-testing-library/pull/1589)
- proper `act` usage by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1592](https://redirect.github.com/callstack/react-native-testing-library/pull/1592)
- pass through Test Renderer options by
[@&#8203;mdjastrzebski](https://redirect.github.com/mdjastrzebski) in
[https://github.com/callstack/react-native-testing-library/pull/1594](https://redirect.github.com/callstack/react-native-testing-library/pull/1594)

#### New Contributors

- [@&#8203;iaurg](https://redirect.github.com/iaurg) made their first
contribution in
[https://github.com/callstack/react-native-testing-library/pull/1591](https://redirect.github.com/callstack/react-native-testing-library/pull/1591)

</details>

---

### Configuration

📅 **Schedule**: Branch creation - "before 4am on Monday" in timezone
America/Los_Angeles, Automerge - "after 5pm,every weekend" in timezone
America/Los_Angeles.

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR is behind base branch, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR was generated by [Mend Renovate](https://mend.io/renovate/).
View the [repository job
log](https://developer.mend.io/github/valora-inc/wallet).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzOC44MC4wIiwidXBkYXRlZEluVmVyIjoiMzguODAuMCIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOlsibnBtIiwicmVub3ZhdGUiXX0=-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet