toolbar activeIndex does not update when clicking on a nested element within the toolbar

[mollykreis]

🐛 Bug Report

With the FAST toolbar, the activeIndex represents which element within the toolbar should have focus when the toolbar is focused. That index is updated when an element within the toolbar is clicked. However, the click handler does not account for a nested item being clicked.

For example, if a div exists inside of a button within the toolbar, and that div is clicked, the click handler doesn't recognize the button as being the new focused element.

💻 Repro or Code Sample

Simple reproducing example:
https://typescript-9zx3yc.stackblitz.io

🤔 Expected Behavior

Clicking any part of, or any element within, an element slotted within the toolbar should cause the activeIndex to update to the index of that element.

😯 Current Behavior

The activeIndex of the toolbar only updates if an element slotted within the toolbar is clicked, not a nested element within it.

💁 Possible Solution

Update the toolbar's clickHandler to check for the click target being contained within one of the focusableElements of the toolbar rather than being one of the focusableElements of the toolbar.

See the existing clickHandler code here

🔦 Context

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• Version [e.g. 1.8.0]