fix(action): When using tooltips with an action, browsers title popup…

… shows up (#872)

* #871 don't automatically set title on the button. Let the user set the title on the action if they want it. This is to allow them to create tooltips.

* fix test

src/components/calcite-action/calcite-action.e2e.ts

@@ -72,7 +72,6 @@ describe("calcite-action", () => {
     await page.setContent(`<calcite-action text="hello world"></calcite-action>`);
 
     const button = await page.find(`calcite-action >>> .${CSS.button}`);
-    expect(button.getAttribute("title")).toBe("hello world");
     expect(button.getAttribute("aria-label")).toBe("hello world");
   });
 
@@ -81,7 +80,6 @@ describe("calcite-action", () => {
     await page.setContent(`<calcite-action text="hello world" label="hi"></calcite-action>`);
 
     const button = await page.find(`calcite-action >>> .${CSS.button}`);
-    expect(button.getAttribute("title")).toBe("hi");
     expect(button.getAttribute("aria-label")).toBe("hi");
   });
 

src/components/calcite-action/calcite-action.tsx

@@ -153,8 +153,7 @@ export class CalciteAction {
   render() {
     const { compact, disabled, loading, el, textEnabled, label, text } = this;
 
-    const titleText = !textEnabled && text;
-    const title = label || titleText;
+    const ariaLabel = label || (!textEnabled && text);
     const rtl = getElementDir(el) === "rtl";
 
     const buttonClasses = {
@@ -167,8 +166,7 @@ export class CalciteAction {
       <Host>
         <button
           class={classnames(CSS.button, buttonClasses)}
-          title={title}
-          aria-label={title}
+          aria-label={ariaLabel}
           disabled={disabled}
           aria-disabled={disabled.toString()}
           aria-busy={loading.toString()}