a11y-component-roles.component.html

<nav role="navigation" class="skiplink">
  <a [href]="generateSkiplink('#templateroles')" >Go directly to roles in the template</a>
  <a [href]="generateSkiplink('#hostroles')">Go directly roles of the host element</a>
</nav>

<article role="article">
  <header class="row well">
    <h2>Roles for custom component widgets</h2>
  </header>

  <section class="row well">
    <header>
      <h3 id="templateroles" tabindex="-1">Roles in the template</h3>
      <hr>
    </header>

    <a11y-custom-control [(ngModel)]="inputDivModel">
      I set the role in my template:
    </a11y-custom-control>

    <a11y-value-helper [displayValue]="inputDivModel"></a11y-value-helper>

  </section>

  <section class="row well">
    <header>
      <h3 id="hostroles" tabindex="-1">Roles of the host element</h3>
      <hr>
    </header>

  <div class="row">
    <div class="col-xs-12">
      <!-- #docregion cb-a11y-custom-button-usage -->
      <a11y-custom-button (click)="onClick()">Do something...</a11y-custom-button>
      <!-- #enddocregion -->
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12">
      <a11y-value-helper [displayValue]="generateButtonString()"></a11y-value-helper>
    </div>
  </div>

  </section>

</article>