Update Tree branch and item to use new SLDS HTML tags

[vernak2539]

Additional description

When the Tree component is used for left hand navigation, which is quite often, when the tree gets big and expands to the whole space, when users hover over a item/branch, the link URL is displayed in the lower left hand corner of the browser window (Chrome).

We've seen that if the link element is long or the tree item is short user's can miss the tree item at the bottom of the screen.

To combat this, we are submitting this PR which removes the href attr from the Tree's branch and item.

After checking W3, we've found the following:

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element’s contents.

---

Pull Request Review checklist (do not remove)

• npm run lint:fix has been run and linting passes.
• Mocha, Jest (Storyshots), and components/component-docs.json CI tests pass (npm test).
• Tests have been added for new props to prevent regressions in the future. See readme.
• Review the appropriate Storybook stories. Open http://localhost:9001/.
• The Accessibility panel of each Storybook story has 0 violations (aXe). Open http://localhost:9001/.
• Review tests are passing in the browser. Open http://localhost:8001/.
• Review markup conforms to SLDS by looking at DOM snapshot strings.
• Add year-first date and commit SHA to last-slds-markup-review in package.json and push.
• Request a review of the deployed Heroku app by the Salesforce UX Accessibility Team.
• Add year-first review date, and commit SHA, last-accessibility-review, to package.json and push.
• While the contributor's branch is checked out, run npm run local-update within locally cloned site repo to confirm the site will function correctly at the next release.

[interactivellama]

Great find! It looks like we are out of sync with SLDS. Please align the HTML with SLDS. https://www.lightningdesignsystem.com/components/trees/

Items and branches now use a span:

    <li role="treeitem" aria-level="1" tabindex="0">
      <div class="slds-tree__item">
        <button class="slds-button slds-button_icon slds-m-right_x-small slds-is-disabled" aria-hidden="true" tabindex="-1" title="Expand Tree Item">
          <svg class="slds-button__icon slds-button__icon_small" aria-hidden="true">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright" />
          </svg>
          <span class="slds-assistive-text">Expand Tree Item</span>
        </button>
        <span class="slds-size_1-of-1">
          <span class="slds-tree__item-label slds-truncate" title="Tree Item">Tree Item</span>
        </span>
      </div>
    </li>
    <li role="treeitem" aria-level="1" aria-expanded="false" aria-label="Tree Branch">
      <div class="slds-tree__item">
        <button class="slds-button slds-button_icon slds-button_icon slds-m-right_x-small" aria-hidden="true" tabindex="-1" title="Expand Tree Branch">
          <svg class="slds-button__icon slds-button__icon_small" aria-hidden="true">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright" />
          </svg>
          <span class="slds-assistive-text">Expand Tree Branch</span>
        </button>
        <span class="slds-size_1-of-1">
          <span class="slds-tree__item-label slds-truncate" title="Tree Branch">Tree Branch</span>
        </span>
      </div>
    </li>

[vernak2539]

@interactivellama does this look good?

[interactivellama]

Looks good! Thanks for the update.