Missing accessibility attrs on MDBTabs

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>
</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>

Add comment

Grzegorz Bujański staff answered 1 year ago

0 0 Best answer

<p>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:</p>

<pre class="prettyprint"><code>  <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>
</code></pre>

Please insert min. 20 characters.

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>

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

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

forgePodLeaders

0Support score
1Questions 0Answers 0Snippets