Topic: Missing accessibility attrs on MDBTabs

forgePodLeaders free asked 1 year ago

*Expected behavior*Component should be rendered with accessibility attrs for all the elements involved in the component (aria attrs, roles, etc), not having to manually set logic to implement accessibility.

*Actual behavior*The component renders properly but there is no accessibility attrs implemented, having to implement them manually.

*Resources (screenshots, code snippets etc.)*For example this is how I would expect the nav-item to be rendered

<li className="nav-item" role="presentation">
  <a className="nav-link" id="ex2-tab-2" data-mdb-toggle="tab" href="#ex2-tabs-2" role="tab" aria-controls="ex2-tabs-2"
     aria-selected="false" tabIndex="-1">Very very very very long link</a>

and this is how MDB React render the same example from the documentation

<li className="nav-item" role="presentation" style="cursor: pointer;">
  <a className="nav-link">Very very very very long link</a>

This is our markup to implement MDBTabsItem for this example

    <MDBTabsItem className={`${itemClasses || ''} ${disabled ? 'disabled': ''}`}>

Grzegorz Bujański staff answered 1 year ago

Thanks for reporting. We'll fix it in the documentation. Our components allow you to pass this attributes. You can do it in a simple way:

  <MDBTabs fill className='mb-3'>
      <MDBTabsLink onClick={() => handleFillClick('tab1')} active={fillActive === 'tab1'} aria-controls="tab1" aria-selected={fillActive === 'tab1'}>
      <MDBTabsLink onClick={() => handleFillClick('tab2')} active={fillActive === 'tab2'} aria-controls="tab2" aria-selected={fillActive === 'tab2'>
        Very very very very long link
      <MDBTabsLink onClick={() => handleFillClick('tab3')} active={fillActive === 'tab3'} aria-controls="tab3" aria-selected={fillActive === 'tab3'}>
        Another link

    <MDBTabsPane show={fillActive === 'tab1'} aria-labelledby="tab2">Tab 1 content</MDBTabsPane>
    <MDBTabsPane show={fillActive === 'tab2'} aria-labelledby="tab2">Tab 2 content</MDBTabsPane>
    <MDBTabsPane show={fillActive === 'tab3'} aria-labelledby="tab2">Tab 3 content</MDBTabsPane>

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 6.0.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: No