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

Options.ariaLabel does not support dynamic labels #548

Open
sidnc86 opened this issue Mar 18, 2023 · 0 comments
Open

Options.ariaLabel does not support dynamic labels #548

sidnc86 opened this issue Mar 18, 2023 · 0 comments

Comments

@sidnc86
Copy link

sidnc86 commented Mar 18, 2023

I am using pikaday-input component.

First and foremost, from accessibility standpoint, the only possible item that we can set on this component is aria-label attribute. This is available via the configurations options of the underlying JavaScript component.

As there is no aria-describedby support, even the descriptions need to be adjusted in aria-label attribute. In my case though, I have not just a label and description but also error messages that need to be associated with the input. The error has to be included in the calculated aria-label only when error occurs.

I have put my own logic to have this aria-label be dynamic. Assign label+description when there are no errors, whereas assign label+description+error when errors are shown.

Somehow the latter won't get assigned at all. I am using a custom helper to achieve the desired result. I am modifying options.ariaLabel supported by pikaday's configuration options. The behavior is as described below:

  1. On first render, the helper is called.
  2. The helper receives all necessary raw material to figure out label, required, description, invalidity of input and error message assigned to model. Based on this raw material, the helper returns new options which either exclude the error message or include error message based on all those parameters.
  3. When field is not invalid, error message is not part of options.ariaLabel. options.ariaLabel is assigned only label and description.
  4. When field is invalid, label, description and error message all are included as part of options.ariaLabel. All this when consoled out works as expected.
  5. But the input is holding on to the options.ariaLabel as described in point 3 above. It is not respecting the options.ariaLabel mentioned in point 4 above.

Does this issue need to be resolved in this ember add-on or should this be reported to underlying pickADay library?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant