Topic: React MDBSelect does not honour aria-label property

Ashna Arora free asked 10 months ago


MDBSelect does not assign aria-label to its input, instead it applies to the wrapper and thus the label is not read by screen reader. I tried adding it inside label as shown below and it does work with it but another problem that comes up is on changing selection, the component does not close itself. If I try to close it manually in getValue event, then also it does not work until unless I give it a timeout. Is there any way to do so without manually closing or using timeout as this doesn't seem right.

<label> Title
   <MDBSelect ......>
   </MDBSelect>
</label>

Krzysztof Wilk staff answered 10 months ago


Hi!

I'm afraid there's no way to achieve that right now. That's a bug we will fix in one of the next releases. For now, you can try using pure JS and, i.e., React Hooks. I think the code below should allow to fix that temporarily:

useEffect(() => {
   const inputElement = document.getElementById('id-of-your-input'); // you have to set it before
   inputElement.setAttribute('aria-label', 'your-label');
}, [])

Keep coding!


Ashna Arora free answered 10 months ago


Thank you, this works perfectly!


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB4 4.26.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No