Skip to content

Conversation

@SaintPatrck
Copy link
Contributor

🎟️ Tracking

PM-20026
Relates to #4753

📔 Objective

Fixes text direction and alignment issues for passwords and TOTP verification codes in RTL (right-to-left) locales such as Persian and Hebrew.

When the system locale is set to an RTL language, passwords and TOTP codes were displaying incorrectly—reading right-to-left instead of left-to-right, and aligning to the wrong side of the field.

This PR introduces a reusable TextStyle.withForcedLtr() extension that forces left-to-right text direction while maintaining locale-aware alignment, ensuring alphanumeric credentials display correctly across all locales.

Based on work started by @codokie in #5012

📸 Screenshots

Coming soon!

⏰ Reminders before review

  • Contributor guidelines followed
  • All formatters and local linters executed and passed
  • Written new unit and / or integration tests where applicable
  • Protected functional changes with optionality (feature flags)
  • Used internationalization (i18n) for all UI strings
  • CI builds passed
  • Communicated to DevOps any deployment requirements
  • Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

  • 👍 (:+1:) or similar for great changes
  • 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
  • ❓ (:question:) for questions
  • 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
  • 🎨 (:art:) for suggestions / improvements
  • ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
  • 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
  • ⛏ (:pick:) for minor or nitpick changes

Adds TextStyle extension to force left-to-right text direction with
locale-aware alignment for sensitive alphanumeric content. This ensures
passwords and TOTP codes read correctly in RTL locales while maintaining
proper alignment.

- Add TextStyle.withForcedLtr() extension in TypographyExtensions.kt
- Refactor BitwardenPasswordField to use extension
- Refactor VerificationCodeItem (app) to use extension
- Refactor VaultVerificationCodeItem (authenticator) to use extension
@github-actions
Copy link
Contributor

github-actions bot commented Dec 30, 2025

Logo
Checkmarx One – Scan Summary & Details8ba27f29-fb2c-47d8-aa59-9ae27899ed1d

Great job! No new security vulnerabilities introduced in this pull request

@codecov
Copy link

codecov bot commented Dec 30, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.50%. Comparing base (2d228b8) to head (a0463b5).
⚠️ Report is 9 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #6309   +/-   ##
=======================================
  Coverage   85.50%   85.50%           
=======================================
  Files         763      763           
  Lines       54601    54623   +22     
  Branches     7855     7855           
=======================================
+ Hits        46684    46706   +22     
  Misses       5189     5189           
  Partials     2728     2728           

☔ 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.

@OmitFromCoverage
@Composable
fun TextStyle.withForcedLtr(): TextStyle {
val layoutDirection = LocalLayoutDirection.current
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we pass this in?

fun TextStyle.withForcedLtr(
    layoutDirection: LayoutDirection = LocalLayoutDirection.current,
): TextStyle {

textDirection = TextDirection.Ltr,
textAlign = when (layoutDirection) {
LayoutDirection.Rtl -> TextAlign.End
LayoutDirection.Ltr -> TextAlign.Start
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it make more sense to explicitly call out Left and Right instead End and Start?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea, that's a little more concise. I'm for it.

* - Password fields that should read "Pass123!" not "!321ssaP" in RTL locales
* - TOTP verification codes that should read "123 456" not "654 321"
* - Any alphanumeric content requiring LTR reading with locale-aware positioning
*
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great docs!

*/
@OmitFromCoverage
@Composable
fun TextStyle.withForcedLtr(): TextStyle {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about adding the word Direction in here? Like withForcedLtrDirection()?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good

- Rename extension to be more descriptive.
- Use `Left` and `Right` text alignments instead of `Start` and `End`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants