@lion/tooltip - npm Package Compare versions

Comparing version 0.11.4 to 0.12.0

CHANGELOG.md

@@ -6,2 +6,18 @@ # Change Log
 
+# [0.12.0](https://github.com/ing-bank/lion/compare/@lion/tooltip@0.11.4...@lion/tooltip@0.12.0) (2020-06-23)
+
+
+### Bug Fixes
+
+* **overlays:** accessibility attrs setup/teardown ([dfe1905](https://github.com/ing-bank/lion/commit/dfe1905e7c61007decb27da4dc30ea17fb1de1b1))
+
+
+### Features
+
+* **tooltip:** add invoker relation for accessibility ([3f84a3b](https://github.com/ing-bank/lion/commit/3f84a3bab88cd470007f5a327cfd999d65076992))
+
+
+
+
+
 ## [0.11.4](https://github.com/ing-bank/lion/compare/@lion/tooltip@0.11.3...@lion/tooltip@0.11.4) (2020-06-18)
@@ -8,0 +24,0 @@

package.json

 {
   "name": "@lion/tooltip",
-  "version": "0.11.4",
+  "version": "0.12.0",
   "description": "Show relative overlay content on hover",
@@ -33,3 +33,3 @@ "license": "MIT",
     "@lion/core": "0.7.2",
-    "@lion/overlays": "0.16.4"
+    "@lion/overlays": "0.16.5"
   },
@@ -44,3 +44,3 @@ "keywords": [
   },
-  "gitHead": "8958b2fa02d3b0c39120d405c5284aa01990a524"
+  "gitHead": "a217b8a1286477157ce6c7a8c5495158537e798d"
 }

README.md

@@ -82,2 +82,20 @@ # Tooltip
 
+### invokerRelation
+
+There is a difference between tooltips used as a primary label or as a description. In most cases a button will already have its own label, so the tooltip will be used as a description with extra information, which is already set as default. Only in case of icon buttons you want to use the tooltip as the primary label. To do so you need to set the `invokerRelation` to `label`.
+
+> For detailed information please read: [inclusive tooltips](https://inclusive-components.design/tooltips-toggletips/#inclusivetooltips).
+
+```js preview-story
+export const invokerRelation = () => html`
+  <style>
+    ${tooltipDemoStyles}
+  </style>
+  <lion-tooltip .config=${{ invokerRelation: 'label' }}>
+    <button slot="invoker" class="demo-tooltip-invoker">📅</button>
+    <div slot="content" class="demo-tooltip-content">Agenda<div>
+  </lion-tooltip>
+`;
+```
+
 ### Placements
@@ -84,0 +102,0 @@

src/LionTooltip.js

@@ -15,2 +15,6 @@ import { css, html, LitElement } from '@lion/core';
       },
+      invokerRelation: {
+        type: String,
+        attribute: 'invoker-relation',
+      },
     };
@@ -74,2 +78,13 @@ }
     super();
+    /**
+     * Whether an arrow should be displayed
+     * @type {boolean}
+     */
+    this.hasArrow = false;
+    /**
+     * Decides whether the tooltip invoker text should be considered a description
+     * (sets aria-describedby) or a label (sets aria-labelledby).
+     * @type {'label'\'description'}
+     */
+    this.invokerRelation = 'description';
     this._mouseActive = false;
@@ -84,3 +99,2 @@ this._keyActive = false;
     }
-    this._overlayContentNode.setAttribute('role', 'tooltip');
   }
@@ -134,2 +148,5 @@
       },
+      handlesAccessibility: true,
+      isTooltip: true,
+      invokerRelation: this.invokerRelation,
     };
@@ -136,0 +153,0 @@ }

test/lion-tooltip.test.js

@@ -209,2 +209,28 @@ import { runOverlayMixinSuite } from '@lion/overlays/test-suites/OverlayMixin.suite.js';
 
+    it('should have aria-describedby role set on the invoker', async () => {
+      const el = await fixture(html`
+        <lion-tooltip>
+          <div slot="content">Hey there</div>
+          <button slot="invoker">Tooltip button</button>
+        </lion-tooltip>
+      `);
+      const content = el.querySelector('[slot=content]');
+      const invoker = el.querySelector('[slot=invoker]');
+      expect(invoker.getAttribute('aria-describedby')).to.be.equal(content.id);
+      expect(invoker.getAttribute('aria-labelledby')).to.be.equal(null);
+    });
+
+    it('should have aria-labelledby role set on the invoker when [ invoker-relation="label"]', async () => {
+      const el = await fixture(html`
+        <lion-tooltip invoker-relation="label">
+          <div slot="content">Hey there</div>
+          <button slot="invoker">Tooltip button</button>
+        </lion-tooltip>
+      `);
+      const content = el.querySelector('[slot=content]');
+      const invoker = el.querySelector('[slot=invoker]');
+      expect(invoker.getAttribute('aria-describedby')).to.be.equal(null);
+      expect(invoker.getAttribute('aria-labelledby')).to.be.equal(content.id);
+    });
+
     it('should be accessible when closed', async () => {
@@ -211,0 +237,0 @@ const el = await fixture(html`

No alert changes

Improved metrics

Total package byte prevSize

53585

increased by5.84%

Lines of code

436

increased by10.38%

Number of lines in readme file

246

increased by7.89%

Dependency changes

• + Added@lion/overlays@0.16.5(transitive)

• - Removed@lion/overlays@0.16.4(transitive)

• Updated@lion/overlays@0.16.5