Content being read twice on focus of element + lots of "clickable"

The Problem

When the parent div gets focus, the entire contents of the div are read twice instead of once. In addition "clickable" gets read six times instead of one.

This problem occurs in Google Chrome only.

I'm pretty horrible at accessibility and trying to get better, so feel free to rip apart what I have here.

These ARE the Droids I'm Looking For

I'm looking for a way to have Chrome read these contents only once, and preferably only say "clickable" once instead of six times as I am sure this would be immensely annoying to any screen read user.

The Markup:

<div #tooltip class="citi-tooltip {{open ? 'open' : ''}}" tabindex="0">

  <!-- trigger icon -->
    <i 
      #tooltipTrigger
      (click)="toggleTooltipContent()"
      class="tooltip-toggle icon-svg svg-question"
      [attr.aria-label]="buttonLabel ? buttonLabel : null"
    ></i>

  <!-- content wrapper -->
  <div 
    #tooltipContent 
    [id]="tooltipId"
    class="tooltip-content {{position}}"
    [ngStyle]="styles"
    role="tooltip"
  >

    <!-- arrow -->
    <span class="tooltip-arrow"></span>

    <!-- header -->
    <p class="tooltip-header {{size}}" [innerHtml]="tooltipTitle"></p>

    <!-- content body -->
    <div class="tooltip-body {{size}}" >
      <!-- tooltip body section -->
      <div *ngIf="tooltipBody" [innerHtml]="tooltipBody"></div>

      <!-- ngcontent body section -->
      <div *ngIf="!tooltipBody"><ng-content></ng-content></div>
    </div>

  </div>
</div>

How this works:

So essentially anytime the parent div with the tabindex="0" attribute gets focus the tooltip is shown via CSS. It is also shown on hover of the parent div, and when the icon is clicked the open class is toggled which will keep it open regardless of the users mouse interactions.

So the vast majority of the functionality here falls on default browser behavior and CSS with very little JavaScript in the mix.

It might be helpful to note that I am using Angular 4 here, hence the seemingly strange markup that the average developer may not be familiar with.

Actual Tooltip Content:

Bob Is A Bob

Bob is a bobbing bobber that bobs like a bobbing bob. Bob. That is all

What NVDA Outputs:

Bob Is A Bob Bob is a bobbing bobber that bobs like a bobbing bob. Bob. That is all
clickable
clickable

clickable
clickable

clickable
Bob Is A Bob
clickable
Bob is a bobbing bobber that bobs like a bobbing bob. Bob. That is all

Any help would be greatly appreciated!

Solution

When NVDA is being odd in just one browser I look at the structure of the object to see if I can reformat it without losing what's working for the other browsers. Since the content is being repeated with a lot of "this item is clickable" announcements, it's probably due to the wrapper with tabindex=0 surrounding the content as well as the trigger. Try putting the content outside (immediately after) that wrapper div instead.

Alternatively it might be repeating the content because the text is in the InnerHTML attributes (I'm guessing Angular takes that attribute value and puts it inside the element?), but that seems less likely as then I would expect it to be a problem in Firefox as well.

The best way to find out would be to see how the HTML looks in Chrome's dev tools inspector, and compare it to what shows up in the Accessibility extension tool.