[Visual Requirements - Bot Framework Web Chat - Markdown]: 'Written' text is getting truncated after applying the text spacing.

[KattaBhargav]

User Experience:

If content of the page gets truncated after applying text spacing on the page than low vision person not able to see all controls define on the page and the person not be able to access them.

Note:

User credentials should NOT be included in the bug.

Pre - Requisite:

1. Open https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en
2. Click on ‘Add to Chrome’ button.
3. After adding, you should find Stylus icon on the tool bar, click it to open drop down menu.
4. Select ‘Manage Styles’ from the menu.
5. On the manage styles screen, click on ‘Create new Style’.
6. The New style screen would open, here give a suitable name for your new style, e.g. ‘text spacing’.
7. Add following CSS under ‘Code’ field –

{ line-height: 1.5! important; letter-spacing: 0.12em! important; word-spacing: 0.16em! important; } p { margin-bottom: 2em !important; } Click on ‘Save’.

Repro Steps:

1. Open URL: Web Chat: Full-featured bundle (microsoft.github.io)
2. Web chat bundle will open.
3. Navigate on the web chat bot and enter "markdown" keyword in Type your message box, then select send button.
4. Cards related to the keyword will appear, navigate on the cards.
5. Verify the Issue

Actual Result:

'Written' text under 'Basic formatting' pane is getting truncated after applying the text spacing.

Expected Result:

'Written' text under 'Basic formatting' pane should not get truncated after applying the text spacing. The controls should maintain a proper distance on applying text spacing also so that visually impaired users can navigate the page properly.

MAS Reference:

MAS 1.4.12 – Text Spacing

Reference Links:

• Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier.

• External Bug Process: If this bug belongs to external team, mark it as resolved/done and assign it back to the tester with notes on where to file/route the bug. For more information please use this Link. “HCL Staff should not log any third party external bugs. Should be routed to edad team”.

• Please reach out to C&AI Teams channel for any process related queries.

Test Environment:

• OS: Windows 11 Version 21H2 (OS build: 22621.160)
• Browser: Chrome version 103.0.5060.114 (Official Build) (64-bit)
• URL: https://microsoft.github.io/BotFramework-WebChat/01.getting-started/a.full-bundle/
• Tool used: Text spacing

[KattaBhargav]

#A11yMAS;#A11ySev3;#HCL;#WCAG1.4.12;#Accessibility;#Win11-Chrome;#BotFrameworkWebChat-Jul22;

[compulim]

I tried the CSS and doesn't see any truncated texts.

Original is below.

Will be great if you can attach a screenshot showing how texts are truncated.

[Kirank915]

@compulim as verified on https://microsoft.github.io/BotFramework-WebChat/01.getting-started/a.full-bundle/ issue is still repro. Text under Paragraph modifiers is truncated after applying text spacing.