ui-select caret <i> is missing aria-label or labelledby

[eweiter]

IBM has a tool, DAP, Dynamic Assessment Plugin. It tries to identify areas of a webpage that are missing required ARIA markup.

The caret that is present on the ui-select component, which has the class "caret pull-right" is missing an aria-label or the aria-labelledby attribute.

[rogercoder]

I am also looking at ARIA/WCAG issues with this caret.

My first thought was to look into adding role='button' as well as keyboard focus (tabindex) , aria-label, etc. to satisfy the various WCAG compliance checkers.

But it occurs to me a simpler approach would be to simply add aria-hidden='true', since the functionality of choosing can be accessed via the enter key. In other words, the caret is there as a pretty visual indication there is a choice to be made as a pseudo drop-down, but as long as you're using the input-id attribute on the ui-select tag, and have a matching <label for="..." then I would think screen readers might be able to make sense of it all. Unfortunately, using only these WCAG tools we're flying a little bit blind.

Any thoughts?

[eweiter]

I agree with you, that simply adding aria-hidden=true would solve this as well. This element like you mentioned is just visual and does not provide any additional functionality to the component that should not limit keyboard users.