Use h1 (19px) style for header instead of textXLarge (24px)

[aldo-expensify]

Details

Reduce size of headers to 19px following designs.

Fixed Issues

$ https://github.com/Expensify/Expensify/issues/181056

Tests / QA

1. Create a NewDot account, verify it, log in

2. Create a Workspace

3. From the workspace menu:
   

4. Enter in Issue corporate cards and check that the title Unlock free Expensify Cards has font size 19px
   

5. Check the same thing for the following titles:

   1. Reimburse receipts section titles:
      • Capture receipts
      • Unlock next-day reimbursements
   2. Pay bills section titles:
      • Manage your bills
      • Unlock online bill payment
   3. Send invoices section titles:
      • Invoice clients and customers
      • Unlock online invoice collection
   4. Book travel section titles:
      • Unlock Concierge travel booking
   5. Connect bank account section titles:
      • Streamline payments

6. Connect a VBA using the section (3) of this SO answer

7. Some new titles will appear in the following sections, check their font size to be 19px:

   1. Issue corporate cards section titles:
      • Cards are ready! (post VBA-connected)
   2. Reimburse receipts section titles:
      • Fast reimbursements = happy members! (post VBA-connected)
   3. Pay bills section titles:
      • Hassle-free bills! (post VBA-connected)
   4. Send invoices section titles:
      • Money back, in a flash! (post VBA-connected)
   5. Book travel section titles:
      • Pack your bags! (post VBA-connected)

8. During the process of adding a VBA, depending on the flow (try different options of the SO), we should encounter the titles:

   • Almost done!
   • Let’s finish in chat!
   • One more thing!
   • All set!

9. Check that these titles also have font size 19px

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Desktop

iOS

Android

[aldo-expensify]

With the proposed change, the following styles becomes unused:

App/src/styles/styles.js

Lines 144 to 149 in a77d468

	textXLarge: {
	color: themeColors.heading,
	fontFamily: fontFamily.GTA_BOLD,
	fontSize: variables.fontSizeXLarge,
	fontWeight: fontWeightBold,
	},

Should I remove it?

[shawnborton]

I think it makes sense to remove it. Thanks Aldo!

…

On Wed, Oct 13, 2021 at 5:51 PM Aldo Canepa Garay ***@***.***> wrote: With the proposed change, the following styles becomes unused: https://github.com/Expensify/App/blob/a77d4682f27939ae4a562cda421648d6a9649440/src/styles/styles.js#L144-L149 Should I remove it? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#5835 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARWH5TEO6VPAQERIA4SLKLUGYSP7ANCNFSM5F6OBNHQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[jasperhuangg]

Clean, nice job!

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[OSBotify]

🚀 Deployed to staging by @jasperhuangg in version: 1.1.7-25 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[ogumen]

All of the mentioned visual headings are implemented as plain text using <div> tag. In order to make the overlay structure available to assistive technology users, the visual headings should be implemented using sequential headings semantics (starting with <h2> tag for main dialog heading, followed by <h3> - for sub-headings and so on). It is a failure of WCAG SC 1.3.1

[aldo-expensify]

All of the mentioned visual headings are implemented as plain text using

tag. In order to make the overlay structure available to assistive technology users, the visual headings should be implemented using sequential headings semantics (starting with

tag for main dialog heading, followed by

- for sub-headings and so on). It is a failure of WCAG SC 1.3.1

Sounds good, we should create a new GH issue for this.

[ogumen]

@aldo-expensify, sure I can do it. @stitesExpensify informed me I should just comment the PR without creating a new issue.

[aldo-expensify]

@aldo-expensify, sure I can do it. @stitesExpensify informed me I should just comment the PR without creating a new issue.

That may be right, sorry I wasn't saying that you should create it :), I was just stating that we should do that in a separate GH issue. I'll create the GH issue when I have some time.

[OSBotify]

🚀 Deployed to production by @roryabraham in version: 1.1.8-9 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅