Skip to content

1519: hyphenate long vocabulary words - #1524

Open
LeandraH wants to merge 2 commits into
mainfrom
1519-hyphenate-long-words
Open

1519: hyphenate long vocabulary words#1524
LeandraH wants to merge 2 commits into
mainfrom
1519-hyphenate-long-words

Conversation

@LeandraH

@LeandraH LeandraH commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

Short Description

This PR adds proper word breaking to our vocabulary words

Proposed Changes

  • Add the hyphen package since React-Native doesn't have built-in hyphenation 😢
  • Use it for the displayed words but not for the ones read out by a screen reader since the soft hyphens are confusing there

Side Effects

  • A new package has been installed

Testing

Go into the Suche and see that e.g. the A/B Stereoaufnahme is properly split into two lines now.

Resolved Issues

Fixes: #1519


@deliverino

deliverino Bot commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

LLM Review (verdigado-think)

React/TypeScript Correctness

  • The use of Pick<TextProps, ...> in src/services/hyphenation.ts is a type-safe way to ensure that the hyphenated helper only provides valid Text props for spreading.
  • No use of any or unsafe type assertions was found.

Platform Parity

  • The author correctly identifies that Android requires android_hyphenationFrequency: 'normal' for soft hyphens to be respected. This is properly implemented in src/services/hyphenation.ts and applied across all components.

Testing

  • Excellent test coverage for the new logic.
  • src/services/__tests__/hyphenation.spec.ts covers edge cases such as words below the length threshold and mixed strings.
  • Component tests in ListItem.spec.tsx and WordItem.spec.tsx specifically verify that both the visual hyphenated text and the clean accessibility label are present.

Clean Code & Maintainability

  • The introduction of the hyphenated helper function prevents duplication of accessibility and Android-specific props across multiple screens (Dictionary, Training, etc.).
  • The refactoring in src/components/WordItem.tsx (lines 74-76) to extract displayedWord improves readability by separating the logic from the JSX.

Accessibility

  • High marks here: the hyphenated helper explicitly sets accessibilityLabel: text. This ensures that screen readers read the word as a single unit rather than potentially encountering the soft-hyphen characters or fragmented text.

Commit Messages & PR Style

  • Commit messages follow the convention <Issue key>: message (e.g., 1519: hyphenate long words).
  • While the second commit "1519: refactoring" is slightly vague, it is acceptable given the context of the first commit.

Release Notes & Labels

  • The change is user-facing (UI improvement for long German words). In accordance with the project rules, user-facing changes do not require a label to be included in the "Features, fixes, enhancements" section of the release notes. No label suggestion is necessary.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Hyphenating long words in wordlist

1 participant