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.

Sign up for GitHub

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

Jump to bottom

Typeahead: Invisible "ngb-live" element is not translatable and may be visible #4560

Open

nextgovitAS opened this issue Aug 31, 2023 · 0 comments · May be fixed by #4605

Open

Typeahead: Invisible "ngb-live" element is not translatable and may be visible #4560

nextgovitAS opened this issue Aug 31, 2023 · 0 comments · May be fixed by #4605

Labels

component: typeahead type: accessibility type: feature

nextgovitAS commented Aug 31, 2023

Description:

When using the typeahead component, a new element appears in the DOM indicating the number of results:

<div id="ngb-live" aria-live="polite" aria-atomic="true" class="visually-hidden">1 result available</div>

I have two problems with this:

The printed message is in English, I need a way to translate it.
My application is encapsulated in a shadow DOM but this new element is injected into the outside body. I have no control over the CSS outside the shadow DOM and therefore the element could be visible to the user. I need to be able to specify a container (within the shadow DOM) for this element.

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/angular-te4ccq?file=src%2Findex.html

Versions

Angular: v16.1
ng-bootstrap: v15.1
Bootstrap: v5.2.3

maxokorokov added type: accessibility component: typeahead type: feature labels

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          fix(typeahead): use inline style for live element and localize message

ed618d4

Use inline style instead of the bootstrap class for the live element
to support the usage of the component in the shadow DOM and localize the message itself.
Fixes ng-bootstrap#4560

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          fix(typeahead): use inline style for live element and localize message

1e7e572

Use inline style instead of the bootstrap class for the live element
to support the usage of the component in the shadow DOM and localize the message itself.
Fixes ng-bootstrap#4560

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          fix(typeahead): use inline style for live element and localize message

a1c271b

Use inline style instead of the bootstrap class for the live element
to support the usage of the component in the shadow DOM and localize the message itself.
Fixes ng-bootstrap#4560

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          fix(typeahead): use inline style for live element and localize message

61301a9

Use inline style instead of the bootstrap class for the live element
to support the usage of the component in the shadow DOM and localize the message itself.
Fixes ng-bootstrap#4560

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          fix(typeahead): use inline style for live element and localize message

cdfb420

Use inline style instead of the bootstrap class for the live element
to support the usage of the component in the shadow DOM and localize the message itself.
Fixes ng-bootstrap#4560

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          fix(typeahead): use inline style for live element and localize message

ad3e754

Use inline style instead of the bootstrap class for the live element
to support the usage of the component in the shadow DOM and localize the message itself.
Fixes ng-bootstrap#4560

jeremychoisy linked a pull request

that will close this issue

fix(typeahead): use inline style for live element and localize message #4605

Open

5 tasks

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          fix(typeahead): use inline style for live element

870bb1d

Use inline style instead of the bootstrap class for the live element
to support the usage of the component in the shadow DOM.
Fixes ng-bootstrap#4560

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          fix(typeahead): localize message for the live element

02c8b2f

Enable localization for the live element.
Fixes ng-bootstrap#4560

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          feat(typeahead): localize message for the live element

42c8721

Enable localization for the live element.
Fixes ng-bootstrap#4560

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          fix(typeahead): use inline style for live element

970a78b

Use inline style instead of the bootstrap class for the live element
to support the usage of the component in the shadow DOM.
Fixes ng-bootstrap#4560

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          feat(typeahead): localize message for the live element

de4902c

Enable localization for the live element.
Fixes ng-bootstrap#4560

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          fix(typeahead): use inline style for live element

af50bd3

Use inline style instead of the bootstrap class for the live element
to support the usage of the component in the shadow DOM.
Fixes ng-bootstrap#4560

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          feat(typeahead): localize message for the live element

5284feb

Enable localization for the live element.
Fixes ng-bootstrap#4560

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          feat(typeahead): localize message for the live element

9a6d122

Enable localization for the live element.
Fixes ng-bootstrap#4560

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          feat(typeahead): localize message for the live element

4f9dcc5

Enable localization for the live element.
Fixes ng-bootstrap#4560

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          fix(typeahead): enable override of the container for the live element

b55cdb5

Use inline style instead of the bootstrap class for the live element
to support the usage of the component in the shadow DOM.
Fixes ng-bootstrap#4560

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          feat(typeahead): localize message for the live element

6429acf

Enable localization for the live element.
Fixes ng-bootstrap#4560

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          feat(typeahead): enable override of the container for the live element

b5203bd

Enable the override of the container for the live element, through a DI token,
meaning that the Live service is not provided in root anymore and needs to be
provided when used in a component.
Fixes ng-bootstrap#4560

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          feat(typeahead): localize message for the live element

b5421f3

Enable localization for the live element.
Fixes ng-bootstrap#4560

jeremychoisy pushed a commit to jeremychoisy/ng-bootstrap that referenced this issue


          feat(typeahead): localize message for the live element

9d94ae0

Enable localization for the live element.
Fixes ng-bootstrap#4560

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment