Topic: How to add ARIA attributes to a component
                  
                  Mike Barlow
                  free
                  asked 6 years ago
                
I'm trying to add some aria attributes and alt attributes to the header section of the mdb-side-nav component (See below). Is there an easy way to do this or do I need to override the component with one of my own (and if so how would I go about that):
<div data-v-5b9dec4c="" class="white-skin deep-purple-skin">
    <div data-v-4a2dcd94="" data-v-5b9dec4c="">
        <div data-v-4a2dcd94="" class="side-nav wide fixed sn-bg-4">
            <div data-v-4a2dcd94="" class="ps" style="width: 100%; height: 100%;">
                <ul data-v-4a2dcd94="" class="custom-scrollbar list-unstyled">
                    <li data-v-4a2dcd94="" class="logo-sn ripple-parent">
                        <div data-v-4a2dcd94="" class="text-center">
                            <a data-v-4a2dcd94="" href="MySite.com" class="pl-0"
I want to add an aria-label to this anchor tag
                                >
                                <img data-v-4a2dcd94="" src="My.svg.png" class=""
I want to add a alt attribute to this img tag
                                >
                                    <!---->
                            </a>
                        </div>
                    </li>
                </ul>
TIA MikeB
                      
                      Magdalena Dembna
                      staff
                        answered 6 years ago
                    
You can use aria attributes to our components but it will always apply to the wrapper - so getting into the inner structure won't be possible in this case. We cannot encourage destructuring our components - it will cause difficulties with maintenance. You can try to select this element and set an attribute with javascript like in the example shown below:
 [SELECTED ELEMENT].setAttribute('aria-disabled', true); . Kind regards, Magdalena
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
 - Premium support: No
 - Technology: MDB Vue
 - MDB Version: 5.7.0
 - Device: Any
 - Browser: Any
 - OS: Any
 - Provided sample code: No
 - Provided link: No