Resolve A11Y Bug around not focusing on format options toolbar when showing format options. by palatter · Pull Request #5337 · Azure/communication-ui-library

palatter · 2024-10-18T05:07:17Z

What

Resolved issue where the rich text editor tool bar would not be focus when it is shown.

Before:

After:

As part of this fix, I also fixed an issue where the editor component would remount every time you show or hide the toolbar. This is due to a bug in the Fluent Stack component where the 'wrap' attribute was causing the children to remount. I replaced it with comparable CSS.

Why

How Tested

Process & policy checklist

I have updated the project documentation to reflect my changes if necessary.
I have read the CONTRIBUTING documentation.

Is this a breaking change?

This change causes current functionality to break.

This reverts commit 4081f5c.

github-actions · 2024-10-18T05:11:21Z

Failed to pass the UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "update_snapshots" label to the PR for updating the snapshot.

…Azure/communication-ui-library into palatter/a11y-format-button-rte

github-actions · 2024-10-18T05:20:02Z

Storybook 8 URL https://60c7ae6891f0e90039d7cd54-ecjebjgrwl.chromatic.com/

github-actions · 2024-10-18T17:02:37Z

Failed to pass the UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "update_snapshots" label to the PR for updating the snapshot.

github-actions · 2024-10-18T17:05:20Z

Storybook 8 URL https://60c7ae6891f0e90039d7cd54-wwvgomclld.chromatic.com/

…d for richtexteditor

github-actions · 2024-10-23T21:33:32Z

Failed to pass the UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "update_snapshots" label to the PR for updating the snapshot.

…Azure/communication-ui-library into palatter/a11y-format-button-rte

github-actions · 2024-10-23T21:49:45Z

Chat bundle size is increased❗.

Current size: 1757636
Base size: 1757580
Diff size: 56

github-actions · 2024-10-23T21:49:45Z

Calling bundle size is not changed.

Current size: 8139366
Base size: 8139366
Diff size: 0

github-actions · 2024-10-23T21:49:47Z

CallWithChat bundle size is not changed.

Current size: 8139379
Base size: 8139379
Diff size: 0

github-actions · 2024-10-23T21:51:32Z

Storybook 8 URL https://60c7ae6891f0e90039d7cd54-eajoqzgmwl.chromatic.com/

github-actions · 2024-10-23T22:43:21Z

Storybook 8 URL https://60c7ae6891f0e90039d7cd54-mzantinqmr.chromatic.com/

…Azure/communication-ui-library into palatter/a11y-format-button-rte

github-actions · 2024-10-23T23:22:29Z

Storybook 8 URL https://60c7ae6891f0e90039d7cd54-ysjbwhsadg.chromatic.com/

github-actions · 2024-10-23T23:44:07Z

Storybook 8 URL https://60c7ae6891f0e90039d7cd54-plqorjfpdm.chromatic.com/

github-actions · 2024-10-23T23:52:33Z

Storybook 8 URL https://60c7ae6891f0e90039d7cd54-izmrmxbjka.chromatic.com/

Leah-Xia-Microsoft

Nice fix

github-actions · 2024-10-23T23:55:34Z

@azure/communication-react jest test coverage for stable.

	Lines	Statements	Functions	Branches
Base	26911 / 43236 62.24%	26911 / 43236 62.24%	733 / 1342 54.61%	2158 / 3441 62.71%
Current	26867 / 43249 62.12%	26867 / 43249 62.12%	733 / 1342 54.61%	2152 / 3434 62.66%
Diff	-44 / 13 -0.12%	-44 / 13 -0.12%	0 / 0 0%	-6 / -7 -0.05%

github-actions · 2024-10-23T23:55:51Z

@azure/communication-react jest test coverage for beta.

	Lines	Statements	Functions	Branches
Base	53843 / 88045 61.15%	53843 / 88045 61.15%	1100 / 2488 44.21%	3230 / 5338 60.5%
Current	53841 / 88056 61.14%	53841 / 88056 61.14%	1100 / 2488 44.21%	3219 / 5331 60.38%
Diff	-2 / 11 -0.01%	-2 / 11 -0.01%	0 / 0 0%	-11 / -7 -0.12%

github-actions · 2024-10-24T13:11:43Z

Storybook 8 URL https://60c7ae6891f0e90039d7cd54-dxcwgrzjht.chromatic.com/

github-actions · 2024-10-25T17:48:58Z

Storybook 8 URL https://60c7ae6891f0e90039d7cd54-gureryalok.chromatic.com/

palatter and others added 7 commits October 13, 2024 10:38

Announce format options and set focus

7bdc3b1

Pass ref from CommandBar

4081f5c

forward ref

66e33c9

Revert "Pass ref from CommandBar"

74574bb

This reverts commit 4081f5c.

Logic for choosing when to focus

60008cd

Add string for toolbar aria label

5ee9422

Cleanup

a9c3024

palatter changed the title ~~Resolve A11Y Bug around not focusing on format options toolbar when showing format options.~~ [DRAFT] Resolve A11Y Bug around not focusing on format options toolbar when showing format options. Oct 18, 2024

palatter and others added 2 commits October 17, 2024 22:07

Merge branch 'main' into palatter/a11y-format-button-rte

4b41dcf

Add comments

a99fc1a

Merge branch 'palatter/a11y-format-button-rte' of https://github.com/…

9c9a48b

…Azure/communication-ui-library into palatter/a11y-format-button-rte

Handle editbox

f971dec

Resolve issue where editor would remount when horizontalLayout change…

d0a24d8

…d for richtexteditor

Merge branch 'main' into palatter/a11y-format-button-rte

193479f

palatter added the update_snapshots Set this label to request automated update of UI snapshots label Oct 23, 2024

github-actions Bot removed the update_snapshots Set this label to request automated update of UI snapshots label Oct 23, 2024

github-actions Bot and others added 3 commits October 23, 2024 21:39

Update packages/react-components browser test snapshots

89acead

Cleanup

5ad09fb

Merge branch 'palatter/a11y-format-button-rte' of https://github.com/…

4017741

…Azure/communication-ui-library into palatter/a11y-format-button-rte

Change files

5c0ea54

palatter marked this pull request as ready for review October 23, 2024 22:36

palatter changed the title ~~[DRAFT] Resolve A11Y Bug around not focusing on format options toolbar when showing format options.~~ Resolve A11Y Bug around not focusing on format options toolbar when showing format options. Oct 23, 2024

palatter marked this pull request as draft October 23, 2024 22:52

palatter added 2 commits October 23, 2024 16:11

Autofocus

958b70b

Merge branch 'palatter/a11y-format-button-rte' of https://github.com/…

43637ec

…Azure/communication-ui-library into palatter/a11y-format-button-rte

palatter added the update_snapshots Set this label to request automated update of UI snapshots label Oct 23, 2024

github-actions Bot removed the update_snapshots Set this label to request automated update of UI snapshots label Oct 23, 2024

Update packages/react-components browser test snapshots

d4e0fe4

palatter added the update_snapshots Set this label to request automated update of UI snapshots label Oct 23, 2024

github-actions Bot removed the update_snapshots Set this label to request automated update of UI snapshots label Oct 23, 2024

palatter added 3 commits October 23, 2024 16:30

API for new label

f7befa4

Null check

1bf644f

Remove tabindex-1

4eba3d9

Lint

ef07c88

palatter marked this pull request as ready for review October 23, 2024 23:49

Leah-Xia-Microsoft approved these changes Oct 23, 2024

View reviewed changes

JoshuaLai approved these changes Oct 24, 2024

View reviewed changes

Merge branch 'main' into palatter/a11y-format-button-rte

907f6a9

palatter added the breaking-change label Oct 24, 2024

Merge branch 'main' into palatter/a11y-format-button-rte

9e41b7b

palatter enabled auto-merge (squash) October 25, 2024 17:42

palatter merged commit 06854ad into main Oct 25, 2024

palatter deleted the palatter/a11y-format-button-rte branch October 25, 2024 17:54

Conversation

palatter commented Oct 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Why

How Tested

Process & policy checklist

Uh oh!

github-actions Bot commented Oct 18, 2024

Uh oh!

github-actions Bot commented Oct 18, 2024

Uh oh!

github-actions Bot commented Oct 18, 2024

Uh oh!

github-actions Bot commented Oct 18, 2024

Uh oh!

github-actions Bot commented Oct 23, 2024

Uh oh!

github-actions Bot commented Oct 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Chat bundle size is increased❗.

Uh oh!

github-actions Bot commented Oct 23, 2024

Calling bundle size is not changed.

Uh oh!

github-actions Bot commented Oct 23, 2024

CallWithChat bundle size is not changed.

Uh oh!

github-actions Bot commented Oct 23, 2024

Uh oh!

github-actions Bot commented Oct 23, 2024

Uh oh!

github-actions Bot commented Oct 23, 2024

Uh oh!

github-actions Bot commented Oct 23, 2024

Uh oh!

github-actions Bot commented Oct 23, 2024

Uh oh!

Leah-Xia-Microsoft left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Oct 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

@azure/communication-react jest test coverage for stable.

Uh oh!

github-actions Bot commented Oct 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

@azure/communication-react jest test coverage for beta.

Uh oh!

github-actions Bot commented Oct 24, 2024

Uh oh!

github-actions Bot commented Oct 25, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

palatter commented Oct 18, 2024 •

edited

Loading

github-actions Bot commented Oct 23, 2024 •

edited

Loading

github-actions Bot commented Oct 23, 2024 •

edited

Loading

github-actions Bot commented Oct 23, 2024 •

edited

Loading