[$40]Letter, Word and paragraph spacing for paragraphs on all banner and contentBlock themes

[kkartunov]

Steps to Reproduce

1. Go to https://www.topcoder.com/community/accessibility-testing
2. Check the paragraph for Letter, Word and paragraph spacing
3. Use letter-spacing: 0.12px; for the paragraphs and see the spacing is increasing

Expected Result

• Line height (line spacing) to at least 1.5 times the font size;
• Spacing following paragraphs to at least 2 times the font size;
• Letter spacing (tracking) to at least 0.12 times the font size;
• Word spacing to at least 0.16 times the font size.

Actual Result
The letter, Word and paragraph spacing issue

Device: Desktop/Labtop
Browser: Chrome

WCAG Category: 1. Perceivable
WCAG Level: AA
WCAG Success Criterion: 1.4.12 Text Spacing
Screen Reader Used: N/A
Accessibility Audit Tool used: N/A

Attachment
https://topcodermsft-my.sharepoint.com/personal/msft-copilots_topcodermsft_onmicrosoft_com/Documents/Forms/All.aspx?cid=0bf9d0fe%2Dbdaa%2D4af3%2Dad48%2Dd3fa9f0e20e1&FolderCTID=0x0120005C598A51049FC14CBA882E1AEE168F51&sortField=Modified&isAscending=false&id=%2Fpersonal%2Fmsft%2Dcopilots%5Ftopcodermsft%5Fonmicrosoft%5Fcom%2FDocuments%2F%5BFAST%5D%20Test%20for%20Accessibility%20Series%2Fcodejam%2F7

[kkartunov]

This fix will need to cover all themes for banner and contentBlock components.

[cwdcwd]

Contest https://www.topcoder.com/challenges/30097687 has been created for this ticket.

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

Contest https://www.topcoder.com/challenges/30097687 has been updated - the new changes has been updated for this ticket.

This is an automated message for lazybaer via Topcoder X

[Dara-K]

Our regular font size text is 15px so the following should happen:

1. Line height should be minimum 22px ( we now have it at 25px) so I'd say we're good.
2. Space following paragraphs should be 30px.
3. Letter spacing (tracking) for regular text should be 2
4. Word spacing: 2.5

[kkartunov]

@topcoder-platform/topcodercompetitors this open for pickup. Please, PR against qa-accessibility. Follow ticket spec and Dara-K notes. Thanks

[r0hit-gupta]

@kkartunov the attachment link says access denied.

[r0hit-gupta]

@veshu does it require new credentials?

[Dara-K]

You can use these ones:
username: [email protected]
PW:MSFTcopilots!@#$ (

[crazyk07]

Contest https://www.topcoder.com/challenges/30097687 has been updated - it has been assigned to rohitgupta_.

This is an automated message for crazyk via Topcoder X

[r0hit-gupta]

Our regular font size text is 15px so the following should happen:

1. Line height should be minimum 22px ( we now have it at 25px) so I'd say we're good.
2. Space following paragraphs should be 30px.
3. Letter spacing (tracking) for regular text should be 2
4. Word spacing: 2.5

@Dara-K for points 3 & 4, what is the unit of the value? It is px right?

[Dara-K]

@r0hit-gupta That's right. Those are pixels too based.

[kkartunov]

@r0hit-gupta missing updates for:

• https://github.com/topcoder-platform/community-app/blob/qa-accessibility/src/shared/components/Contentful/ContentBlock/themes/card.scss
• https://github.com/topcoder-platform/community-app/blob/qa-accessibility/src/shared/components/Contentful/ContentBlock/themes/row_item.scss

Please, fix them too. Thanks!

[kkartunov]

@r0hit-gupta please let's constraint updates only to General theme.

[lakshmiathreya]

@Dara-K waiting for your review of the final fix ...

[Dara-K]

@lakshmiathreya @r0hit-gupta The unit is good - should be pixels, and it's normal to look like that- weird.
We are talking to @Oanh-and-only-Oanh about this.

[tosha5252]

@Dara-K is everything ok to move this forward?

[tosha5252]

based on the font-size of 15px

line-height is ok at 25px
margin-bottom(spacing between paragraphs) is ok at 30px
letter spacing is ok at 2px
word spacing is ok at 2.5

Windows 10 env
Browser: Chrome

[tosha5252]

The changes have not been applied to production...there are no values entered for Margin-bottom, letter or word spacing.

Take note of the prod(1st) and dev images.

[crazyk07]

@sushilshinde Another one to check

[sushilshinde]

Yes, code is missing on prod

[tosha5252]

Verified changed in prod

Win10/Chrome

[crazyk07]

Payment task has been updated: https://software.topcoder.com/review/actions/ViewProjectDetails?pid=30097687

This is an automated message for crazyk via Topcoder X