Topic: Missing accessibility attrs on MDBTabs
*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> </li>
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> </li>
This is our markup to implement MDBTabsItem for this example
<MDBTabsItem className={`${itemClasses || ''} ${disabled ? 'disabled': ''}`}> <MDBTabsLink className={`${classList}`} {...rest}> {tabLabel} </MDBTabsLink> </MDBTabsItem>
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'>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleFillClick('tab1')} active={fillActive === 'tab1'} aria-controls="tab1" aria-selected={fillActive === 'tab1'}>
Link
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleFillClick('tab2')} active={fillActive === 'tab2'} aria-controls="tab2" aria-selected={fillActive === 'tab2'>
Very very very very long link
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleFillClick('tab3')} active={fillActive === 'tab3'} aria-controls="tab3" aria-selected={fillActive === 'tab3'}>
Another link
</MDBTabsLink>
</MDBTabsItem>
</MDBTabs>
<MDBTabsContent>
<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>
</MDBTabsContent>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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