mdb-side-nav Logo accessibility

web
mobile

Topic: mdb-side-nav Logo accessibility

Devinec pro premium asked 4 months ago

as I get used to using MDBV I am getting a feeling that accessibility of any sort doesn't seem to be a thought.
in this example a basic Alt tag for an image wasnt thought of for the logo of the mdb-side-nav. a logoClass was added but nothing for an Alt text

Is this something that can be added in. as well as more accessibility as a whole.

Expected behavior

<mdb-side-nav slim :isCollapsed="collapsed" :OpenedFromOutside.sync="toggle" mask="strong" logo="/assets/images/logo.png" logoSn logoAlt="Image Alt text"  logoClass="example-class" :sideNavClass="adminSideNav" ref="sideNav" fixed waves darkWaves>

This would render as

<a data-v-4f39a386="" href="#" class="pl-0"><img data-v-4f39a386="" src="/assets/images/logo.png" alt="Image Alt text" class="example-class"><!----></a>

Actual behavior

<mdb-side-nav slim :isCollapsed="collapsed" :OpenedFromOutside.sync="toggle" mask="strong" logo="/assets/images/logo.png" logoSn logoClass="example-class" :sideNavClass="adminSideNav" ref="sideNav" fixed waves darkWaves>

this renders as

<a data-v-4f39a386="" href="#" class="pl-0"><img data-v-4f39a386="" src="/assets/images/logo.png" class="example-class"><!----></a>

Resources (screenshots, code snippets etc.)


Devinec pro premium commented 4 months ago

What would be nice as well is some way to toggle the logo if slim is used. so a smaller version of the image can be used


Mikołaj Smoleński staff answered 4 months ago

Thanks for letting us know about the issue.

We'll fix it soon.

Best regards


Devinec pro premium answered 3 months ago

Has this been addressed yet?


Mikołaj Smoleński staff answered 3 months ago

Yes, the issue was fixed: https://vue.mdbootstrap.com/#/navigation/navbar

Best regards.


Devinec pro premium answered 2 months ago

I fail to see where this is fixed? The issue was in

<mdb-side-nav slim :isCollapsed="collapsed" :OpenedFromOutside.sync="toggle" mask="strong" logo="/assets/images/logo.png" logoSn logoClass="example-class" :sideNavClass="adminSideNav" ref="sideNav" fixed waves darkWaves>

Where it lacks a logoAlt.

your link directs me to the Navbar not the SideNav. Looking at the API for the sideNav I dont see anything to do with a logo Alt


Mikołaj Smoleński staff answered 2 months ago

Still on this page You can check that keyboard accessibility for regular sidenav works also with logo: https://vue.mdbootstrap.com/#/navigation/pro/sidenav. The issue exisits in slim sidenav which will be updated soon.

Best regards


Devinec pro premium answered 2 months ago

I was referring to the lack of an ALT tag on the LOGO prop for "mdb-side-nav". I never mentioned Keyboard accessibility in this

My suggestion was just adding another prop to it to accept say LogoAlt=""


Mikołaj Smoleński staff answered 2 months ago

Sorry for the inconvenience. I'm adding it to our list of requests.

Best regards


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Vue
  • MDB Version: 6.1.0
  • Device: desktop
  • Browser: All
  • OS: Any
  • Provided sample code: No
  • Provided link: No