tonysamperi / ngx-popperjs

An Angular 8+ wrapper for @popperjs/core
https://tonysamperi.github.io/ngx-popperjs/
MIT License
65 stars 12 forks source link

BUG: Aria-describedby is missing #21

Closed iceteabottle closed 2 years ago

iceteabottle commented 2 years ago

Imho this is a bug since is a big accessibility issue. I hope I'm not alone with this opinion :)

Describe the bug The trigger of the popper has no aria-describedby attribute although the popper container has a unique ID wich would allow a link via aria-describedby.

To Reproduce Steps to reproduce the behavior:

  1. Add a text via the popper directive to a button
  2. Check the accessibility information of the button in the DevTools
  3. The aria-description is missing.

Expected behavior An element with a tooltip really need the aria-describedby attribute for accessibility reasons.

Additional context I extend your directive but sadly all important properties I would need to add the aria-describedby attribute myself are private...

I hope you understand this accessibility issue as bug. We should not exclude anybody from a good user experience. Imho it should easy to fix :)

tonysamperi commented 2 years ago

I don't understand what you mean... There is the aria-describedby attribute, you simply need to choose a value, from the popper itself or from the default options...

image

By the way the "button" of your flow could be out of the scope of the popper, because you could choose to open the popper programmatically. So if you mean that the popper directive should add a "aria-describedby" attribute on the trigger, I think it makes no sense at all.

iceteabottle commented 2 years ago

Thanks for you fast response.

That's not the way aria-describedby should work. The element (in my case the button) that has a descriptive information like a tooltip needs the aria-describedby attribute.

<button
  [popper]="tooltipText"
  aria-describedby="the_id_of_the_popper_container"
>Click me</button>

Bildschirmfoto 2022-03-01 um 06 35 23

tonysamperi commented 2 years ago

Since the popper-container is not an actual element, I guess you mean the_id_of_the_popper_content... I guess we could expose that id from the directive... Need to do some checks but I think it's not a big issue...