From 6b5c5aad5f410d6acd121c0a4e67a35cd827e206 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 22 Oct 2020 23:26:23 -0400
Subject: [PATCH] Fix aria-describedby in tooltip targets
---
docs/getting-started/changelog.md | 1 +
src/components/tooltip/tooltip.tsx | 8 +++++---
2 files changed, 6 insertions(+), 3 deletions(-)
diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md
index ff3c160a..129e46dd 100644
--- a/docs/getting-started/changelog.md
+++ b/docs/getting-started/changelog.md
@@ -13,6 +13,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
- Fixed a bug where `disabled` could be set when buttons are rendered as links
- Fixed a bug where hoisted dropdowns would render in the wrong position when place inside an `sl-dialog`
- Fixed a bug where boolean aria attributes didn't explicitly set `true|false` string values in the DOM
+- Fixed a bug where `aria-describedby` was never set on tooltip targets in `sl-tooltip`
- Improved `sl-icon-button` accessibility by encouraging proper use of `label` and hiding the internal icon from screen readers
- Improved `sl-dropdown` accessibility by attaching `aria-haspopup` and `aria-expanded` to the slotted trigger
- Removed `console.log` from modal utility
diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
index 332d4aba..1c2bc531 100644
--- a/src/components/tooltip/tooltip.tsx
+++ b/src/components/tooltip/tooltip.tsx
@@ -202,8 +202,10 @@ export class Tooltip {
const oldTarget = this.target;
const newTarget = this.getTarget();
- if (oldTarget && newTarget !== oldTarget) {
- oldTarget.removeAttribute('aria-describedby');
+ if (newTarget !== oldTarget) {
+ if (oldTarget) {
+ oldTarget.removeAttribute('aria-describedby');
+ }
newTarget.setAttribute('aria-describedby', this.componentId);
}
}
@@ -227,7 +229,7 @@ export class Tooltip {
render() {
return (
<Host onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
- <slot aria-describedby={this.componentId} onSlotchange={this.handleSlotChange} />
+ <slot onSlotchange={this.handleSlotChange} />
{!this.disabled && (
<div ref={el => (this.tooltipPositioner = el)} class="tooltip-positioner">