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:
On first render, the helper is called.
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.
When field is not invalid, error message is not part of options.ariaLabel. options.ariaLabel is assigned only label and description.
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.
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?
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.ariaLabelsupported by pikaday's configuration options. The behavior is as described below:Does this issue need to be resolved in this ember add-on or should this be reported to underlying pickADay library?