Accordion semantic variance and accessbility loss

Hello, and thanks for taking the effort in porting bootstrap components to Angular 2.

My concern is on losing html semantic and aria roles in the process. As an example the accordion component :

In bootstrap 4 we have :

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
<div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Each panel group (title + content) is wrapped in a single card element. Aria roles are set accordingly (tablist, tab, aria-labelledby, …)

Whereas with ng-bootstrap rendred accordion component we get something like this :

<ngb-accordion activeids="ngb-panel-0" ng-reflect-active-ids="ngb-panel-0">
  <div class="card">
      <div ng-reflect-class-name="card-header " class="card-header active">
        <a href="">Simple</a>
      </div>
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
        aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
        sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
        craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
        occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
        labore sustainable VHS.
     </div>
      <div ng-reflect-class-name="card-header " class="card-header ">
        <a href="">
          <span>★ <b>Fancy</b> title ★</span>
        </a>
      </div>
      <div ng-reflect-class-name="card-header " class="card-header ">
        <a href="" class="text-muted">Disabled</a>
      </div>
  </div>
</ngb-accordion>

Aria roles are gone and all panel titles and content are wrapped in the same card element.

I don’t understand the choice of dropping accessibility since it’s already here and working in bootstrap 4, and html semantic divergence can be confusing and lead to presentation bug (custom styling).

Link to minimally-working plunker that reproduces the issue:

Bootstrap accordion example can be found here

ng-bootstrap accordion can be found here

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 2.1.0

ng-bootstrap: 1.0.0-alpha.13

Bootstrap: v4.0.0-alpha.5

[pkozlowski-opensource]

@ygatesoupe I’ve sent PR #1070 to address accessibility-related attributes. Would be great if you could review this one.

We still got a bit of discrepancy between Bootstrap’s proposed markup and the markup we are producing:

• BS 4 is using a separate card for each panel while we have just one card. For now I’m going to leave it as-is since I think that our look & feel is better. I will follow up with the Bootstrap team and eventually change things in this project.
• BS 4 is using <h5> around header links - we should probably add it as well.
• BS 4 is adding a wrapper div around card-block and frankly I don’t see why this one is needed. I will follow up with the Bootstrap team and eventually change things in this project.

[pkozlowski-opensource]

I don’t understand the choice of dropping accessibility since it’s already here and working in bootstrap 4, and html semantic divergence can be confusing and lead to presentation bug (custom styling).

We are not “choosing to drop accessibility”, far from it! It is just that we didn’t get to complete accessibility review and fixes yet. Our thinking was / is that we want to stabilise the public APIs first and when its done add things like animations, accessibility and keyboard support (in other words all features than will make widgets solid but don’t require breaking API changes).

So once again, it is not like we don’t care about accessibility nor that we are not working on it deliberately. It is just that we’ve prioritized public APIs over other enhancements. If you want us to get there faster a PR fixing things you’ve noticed would be helpful.

Also please note that we didn’t “remove” anythings: cards were not present in Bootstrap 3 / angular-ui/bootstrap and Bootstrap 4 added example of an accordion based on cards only very recently (after we did initial implementation of the accordion).

In short: accessibility is important for us and is part of the roadmap. Helping with PRs would be appreciated.