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(a11y): dynamic text size with custom header #6187

Draft

OtavioStasiak wants to merge 53 commits into develop from feat-dynamic-text-size-with-custom-header

Contributor

OtavioStasiak commented Feb 28, 2025 •

edited

Loading

Proposed changes

When the text size is increased in the device settings (Android and iOS), the layout of the Button, FormTextInput, and Header breaks, causing text to be cut off in inputs or button titles to be truncated. This issue occurred because these components had a fixed height.

This PR resolves the problem by replacing the fixed height with padding. Additionally:

The header does not break when scaling the font.
All instances of ROW_HEIGHT and ROW_HEIGHT_CONDENSED now use the appropriate hook, as pixelRatio.getFontScale was not updating correctly on Android.
Icons now scale properly with fontScale.
A bug on Android that prevented the roomItem height from updating has been fixed.

Issue(s)

closes #6146
https://rocketchat.atlassian.net/browse/MA-168

How to test or reproduce

Screenshots

iPad 1x (Portrait)

Input and Buttons

Before	After

RoomsListView

Before	After

RoomsListView Search

Before	After

RoomView

Before	After

ProfileView (Header with Drawer button)

Before	After

PreferencesView (Header with Go Back)

Before	After

ShareListView

Before	After

ShareListView Search

Before	After

ShareView

Before	After

AttachmentView

Before	After

iPad 2x (Portrait)

Input and Buttons

Before	After

RoomsListView

Before	After

RoomsListView Search

Before	After

RoomView

Before	After

ProfileView (Header with Drawer button)

Before	After

PreferencesView (Header with Go Back)

Before	After

ShareListView

Before	After

ShareListView Search

Before	After

ShareView

Before	After

AttachmentView

Before	After

iPad 1x (Landscape)

Input and Buttons

Before	After

RoomsListView

Before	After

RoomsListView Search

Before	After

RoomView

Before	After

ProfileView (Header with Drawer button)

Before	After

PreferencesView (Header with Go Back)

Before	After

ShareListView

Before	After

ShareListView Search

Before	After

ShareView

Before	After

AttachmentView

Before	After

iPad 2x (Landscape)

Input and Buttons

Before	After

RoomsListView

Before	After

RoomsListView Search

Before	After

RoomView

Before	After

ProfileView (Header with Drawer button)

Before	After

PreferencesView (Header with Go Back)

Before	After

ShareListView

Before	After

ShareListView Search

Before	After

ShareView

Before	After

AttachmentView

iPhone 1x (Portrait)

Input and Buttons

Before	After

RoomsListView

Before	After

RoomsListView Search

Before	After

RoomView

Before	After

ProfileView (Header with Drawer button)

Before	After

PreferencesView (Header with Go Back)

Before	After

ShareListView

Before	After

ShareListView Search

Before	After

ShareView

Before	After

AttachmentView

Before	After

iPhone 2x (Portrait)

Input and Buttons

Before	After

RoomsListView

Before	After

RoomsListView Search

Before	After

RoomView

Before	After

ProfileView (Header with Drawer button)

Before	After

PreferencesView (Header with Go Back)

Before	After

ShareListView

Before	After

ShareListView Search

Before	After

ShareView

Before	After

AttachmentView

Before	After

iPhone 1x (Landscape)

Input and Buttons

Before	After

RoomsListView

Before	After

RoomsListView Search

Before	After

RoomView

Before	After
	![Simulator Screenshot - iPhone 15 - 2025-03-05 at 23 22 04]((https://github.com/user-attachments/assets/7363a7dd-1834-4809-8e38-704e123f3bf0)

ProfileView (Header with Drawer button)

Before	After

PreferencesView (Header with Go Back)

Before	After

ShareListView

Before	After

ShareListView Search

Before	After

ShareView

Before	After

AttachmentView

Before	After

iPhone 2x (Landscape)

Input and Buttons

Before	After

RoomsListView

Before	After

RoomsListView Search

Before	After

RoomView

Before	After

ProfileView (Header with Drawer button)

Before	After

PreferencesView (Header with Go Back)

Before	After

ShareListView

Before	After

ShareListView Search

Before	After

ShareView

Before	After

AttachmentView

Before	After

Android 1x (Portrait)

Input and Buttons

Before	After

RoomsListView

Before	After

RoomsListView Search

Before	After

RoomView

Before	After

ProfileView (Header with Drawer button)

Before	After

PreferencesView (Header with Go Back)

Before	After

ShareListView

Before	After

ShareListView Search

Before	After

ShareView

Before	After

AttachmentView

Before	After

Android 2x (Portrait)

Input and Buttons

Before	After

RoomsListView

Before	After

RoomsListView Search

Before	After

RoomView

Before	After

ProfileView (Header with Drawer button)

Before	After

PreferencesView (Header with Go Back)

Before	After

ShareListView

Before	After

ShareListView Search

Before	After

ShareView

Before	After

AttachmentView

Before	After

Android 1x (Landscape)

Input and Buttons

Before	After

RoomsListView

Before	After

RoomsListView Search

Before	After

RoomView

Before	After

ProfileView (Header with Drawer button)

Before	After

PreferencesView (Header with Go Back)

Before	After

ShareListView

Before	After

ShareListView Search

Before	After

ShareView

Before	After

AttachmentView

Before	After

Android 2x (Landscape)

Input and Buttons

RoomsListView

RoomsListView Search

RoomView

ProfileView (Header with Drawer button)

PreferencesView (Header with Go Back)

ShareListView

ShareListView Search

ShareView

AttachmentView

Types of changes

Bugfix (non-breaking change which fixes an issue)
Improvement (non-breaking change which improves a current function)
New feature (non-breaking change which adds functionality)
Documentation update (if none of the other choices apply)

Checklist

I have read the CONTRIBUTING doc
I have signed the CLA
Lint and unit tests pass locally with my changes
I have added tests that prove my fix is effective or that my feature works (if applicable)
I have added necessary documentation (if applicable)
Any dependent changes have been merged and published in downstream modules

Further comments

OtavioStasiak and others added 30 commits

January 24, 2025 19:47


          fix: removed fixed height on Button and FormTextInput

c884b41


          fix: worspace bottom sheet and header

ca660be


          fix: loading increase height of button

1e3ed30


          fix: padding of NewServerView server history

ae0d1eb


          fix: Search header of RoomListview is not working

d95944b


          fix: space of header on android and header of roomview

bf3ea86


          Merge branch 'develop' into fix-resized-text-fails-input-and-button

186cfdf


          fix: adjusting style of headers

a97694b


          fix: prevent large workspace name breaks the header

378a597


          fix: updated gap value of headerContainer


          fix: removed margin horizontal of android header back button

4e36fd6


          fix: created Back Button component

6ffae88


          fix: updated style of headerBackButton on ChangeAvatarView

ca5511e


          fix: hide back button on isMasterDetail empty room

66185b6


          chore: created customHeader component

7df5c86


          chore: remove left button of drawer

13930a0


          fix: updated padding value if isMasterDetail

36d214f


          chore: rename prop

b319991


          chore: added customHeader on defaultHeader

18edac3


          fix: prevent roomListHeader from breaking the layout if the name of w…

02acdcc

…orkspace is too long


          chore: rollback RoomView unused changes

a7c44c4


          fix: lint

177d8e5


          fix: updated changeAvatarView back button style

53827fd


          fix: header layout on masterDetail

786ffb6


          fix: adjusted header layout on shareView

d8e8311


          fix: patch package of react navigation elements

661025f


          fix: patch package

c775281


          fix: header breaking on outside stack

3949e46


          chore: code improvements

fa0ed1a


          fix: resize icon

7b0d132

OtavioStasiak and others added 9 commits

February 24, 2025 19:05


          fix: dynamic Row height value

e2517bf


          fix: message composer test snap

7a70cff


          fix: status style

1660e73


          Merge branch 'develop' into fix-resized-text-fails-input-and-button

69192ea


          Merge branch 'develop' into feat-dynamic-text-size-with-custom-header

2c13cec


          fix: customHeader diff on iOS

8be6b74


          fix: login services and directory

f25f733


          fix: layout header size respecting the pattern

d93f986


          fix: header alignment on ipad

ea8690c

diegolmello mentioned this pull request

fix: attachment preview spacing #6174

Merged

10 tasks


          fix: seach header

5a88104

OtavioStasiak changed the title ~~test(a11y): dynamic text size with custom header~~ feat(a11y): dynamic text size with custom header

OtavioStasiak added 2 commits

March 6, 2025 12:47


          fix: spacement on header

876e3f1


          fix: snapshot test

76b14ff

diegolmello requested changes

View reviewed changes

app/containers/CustomHeader/components/HeaderContainer/index.tsx Outdated Show resolved Hide resolved

app/containers/CustomHeader/index.tsx Outdated Show resolved Hide resolved

app/containers/CustomHeader/index.tsx Outdated Show resolved Hide resolved

app/containers/CustomHeader/index.tsx Outdated Show resolved Hide resolved

app/containers/CustomHeader/index.tsx Outdated Show resolved Hide resolved

app/containers/CustomHeader/components/HeaderContainer/index.tsx Show resolved Hide resolved

app/containers/CustomHeader/index.tsx Outdated Show resolved Hide resolved

app/containers/CustomHeader/index.tsx Outdated Show resolved Hide resolved

app/containers/LoginServices/ButtonService.tsx Outdated Show resolved Hide resolved

app/containers/CustomHeader/components/HeaderContainer/index.tsx Outdated Show resolved Hide resolved

OtavioStasiak and others added 11 commits

March 6, 2025 16:42


          fix: android left buttons spacement

d283f72


          fix: remove unused props

9aa4124


          fix: organize styles of customHeader

225ca2f


          fix: reorganized code and rename variables

5d5daae


          fix: rowHeight hook path and name of variables

eff863e


          fix: magic number and use useWindowDimensions hook instead of PixelRa…

80adeb0

…tio.getFontScale


          fix: back button patch package

cbc8445


          Merge branch 'develop' into feat-dynamic-text-size-with-custom-header

c039333


          fix: e2e tests

39ad95a


          fix: header alignment on iOS and roomsListViewwith duplicate separator

0f1640b


          fix: e2e tests

a3dd35a

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

Labels

None yet