Skip to content
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.

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

feat(COMPONENT): allow multiple instances of AriaDescriber #23499

Closed
yann-armelin-1a opened this issue Aug 31, 2021 · 2 comments · Fixed by #23507
Closed

feat(COMPONENT): allow multiple instances of AriaDescriber #23499

yann-armelin-1a opened this issue Aug 31, 2021 · 2 comments · Fixed by #23507
Assignees
Labels
area: cdk/a11y feature This issue represents a new feature or feature request rather than a bug or bug fix P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@yann-armelin-1a
Copy link

yann-armelin-1a commented Aug 31, 2021

Feature Description

Allow to have several AriaDescriber containers on a same page.
Today the container of AriaDescriber is necessarily appended to body, with an hardcoded id, and any pre-existing container is removed.

I see At least 3 different options to achieve this:

  1. Do something similar to what's done in LiveAnnouncer: use an Injection token to inject the container.

  2. Make the following constant customizable: MESSAGES_CONTAINER_ID . So that each instance of AriaDescriber can have his own container.

  3. Do something similar to OverlayContainer so that the container can be moved somewhere else on the page, and stop relying on the ID the remove it

In all cases, the following const should be customizable: CDK_DESCRIBEDBY_ID_PREFIX, otherwise elements with duplicated ID will be created on the page.

Use Case

In the context of micro frontends, we may end up with 2 Angular Material instances on the same page.

Today, a second instance of AriaDescriber would remove the container of the first one, making it ineffective.

@yann-armelin-1a yann-armelin-1a added feature This issue represents a new feature or feature request rather than a bug or bug fix needs triage This issue needs to be triaged by the team labels Aug 31, 2021
@crisbeto
Copy link
Member

crisbeto commented Sep 1, 2021

Looking through it, I think that it should mostly work already. The messagesContainer is a global variable which means that even if you ended up with multiple instances of the AriaDescriber, they'll all still use the same container.

That being said, I think that this will break down if the an AriaDescriber is destroyed while another one is still live, because we remove the global container in ngOnDestroy. It'll also break down one AriaDescriber is initialized later than another one, because the descriptions of the former will be removed by the latter. I think that these are somewhat edge cases, but they can definitely happen.

I think the way to go is to do something similar to the OverlayContainer. I'll look into it later today.

@crisbeto crisbeto self-assigned this Sep 1, 2021
@crisbeto crisbeto added area: cdk/a11y P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent has pr and removed needs triage This issue needs to be triaged by the team labels Sep 1, 2021
crisbeto added a commit to crisbeto/material2 that referenced this issue Sep 1, 2021
…iners

Currently the `AriaDescriber` is set up to clear all description containers whenever it is instantiated, in order to avoid duplicates coming in from the server. The problem is that there are legitimate use cases where we could have multiple containers (e.g. multiple CDK instances in a micro frontend architecture).

These changes rework the internal setup of the `AriaDescriber` so that it only clears containers from server and it doesn't touch containers coming from other describer instances.

Fixes angular#23499.
crisbeto added a commit to crisbeto/material2 that referenced this issue Sep 1, 2021
…iners

Currently the `AriaDescriber` is set up to clear all description containers whenever it is instantiated, in order to avoid duplicates coming in from the server. The problem is that there are legitimate use cases where we could have multiple containers (e.g. multiple CDK instances in a micro frontend architecture).

These changes rework the internal setup of the `AriaDescriber` so that it only clears containers from server and it doesn't touch containers coming from other describer instances.

Fixes angular#23499.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 3, 2022
…iners

Currently the `AriaDescriber` is set up to clear all description containers whenever it is instantiated, in order to avoid duplicates coming in from the server. The problem is that there are legitimate use cases where we could have multiple containers (e.g. multiple CDK instances in a micro frontend architecture).

These changes rework the internal setup of the `AriaDescriber` so that it only clears containers from server and it doesn't touch containers coming from other describer instances.

Fixes angular#23499.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 31, 2022
…iners

Currently the `AriaDescriber` is set up to clear all description containers whenever it is instantiated, in order to avoid duplicates coming in from the server. The problem is that there are legitimate use cases where we could have multiple containers (e.g. multiple CDK instances in a micro frontend architecture).

These changes rework the internal setup of the `AriaDescriber` so that it only clears containers from server and it doesn't touch containers coming from other describer instances.

Fixes angular#23499.
andrewseguin pushed a commit that referenced this issue Jan 31, 2022
…iners (#23507)

Currently the `AriaDescriber` is set up to clear all description containers whenever it is instantiated, in order to avoid duplicates coming in from the server. The problem is that there are legitimate use cases where we could have multiple containers (e.g. multiple CDK instances in a micro frontend architecture).

These changes rework the internal setup of the `AriaDescriber` so that it only clears containers from server and it doesn't touch containers coming from other describer instances.

Fixes #23499.

(cherry picked from commit 781a45a)
andrewseguin pushed a commit that referenced this issue Jan 31, 2022
…iners (#23507)

Currently the `AriaDescriber` is set up to clear all description containers whenever it is instantiated, in order to avoid duplicates coming in from the server. The problem is that there are legitimate use cases where we could have multiple containers (e.g. multiple CDK instances in a micro frontend architecture).

These changes rework the internal setup of the `AriaDescriber` so that it only clears containers from server and it doesn't touch containers coming from other describer instances.

Fixes #23499.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 3, 2022
forsti0506 pushed a commit to forsti0506/components that referenced this issue Apr 3, 2022
…iners (angular#23507)

Currently the `AriaDescriber` is set up to clear all description containers whenever it is instantiated, in order to avoid duplicates coming in from the server. The problem is that there are legitimate use cases where we could have multiple containers (e.g. multiple CDK instances in a micro frontend architecture).

These changes rework the internal setup of the `AriaDescriber` so that it only clears containers from server and it doesn't touch containers coming from other describer instances.

Fixes angular#23499.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: cdk/a11y feature This issue represents a new feature or feature request rather than a bug or bug fix P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants