How to add ARIA attributes to a component


Topic: How to add ARIA attributes to a component

Mike Barlow asked 3 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 premium answered 3 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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: 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