npm - @khanacademy/wonder-blocks-tooltip - Versions diffs - 1.3.15 → 1.3.16 - Mend

@khanacademy/wonder-blocks-tooltip 1.3.15 → 1.3.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/CHANGELOG.md +8 -0
package/dist/es/index.js +2 -1
package/dist/index.js +2 -1
package/package.json +2 -2
package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +139 -129
package/src/components/tooltip-tail.js +1 -0

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,13 @@
 # @khanacademy/wonder-blocks-tooltip
+## 1.3.16
+### Patch Changes
+-   e9364406: hide tooltip-tail from screen readers
+-   Updated dependencies [2546b126]
+    -   @khanacademy/wonder-blocks-modal@2.3.6
 ## 1.3.15
 ### Patch Changes

package/dist/es/index.js CHANGED Viewed

@@ -497,7 +497,8 @@ class TooltipTail extends React.Component {
       className: css(styles$2.arrow),
       style: this._getArrowStyle(),
       width: width,
-      height: height
+      height: height,
+      "aria-hidden": true
     }, this._maybeRenderDropshadow(points), React.createElement("polyline", {
       fill: Colors[color],
       stroke: Colors[color],

package/dist/index.js CHANGED Viewed

@@ -446,7 +446,8 @@ class TooltipTail extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       className: Object(aphrodite__WEBPACK_IMPORTED_MODULE_1__["css"])(styles.arrow),
       style: this._getArrowStyle(),
       width: width,
-      height: height
+      height: height,
+      "aria-hidden": true
     }, this._maybeRenderDropshadow(points), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("polyline", {
       fill: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a[color],
       stroke: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a[color],

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-tooltip",
-  "version": "1.3.15",
+  "version": "1.3.16",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -19,7 +19,7 @@
     "@khanacademy/wonder-blocks-color": "^1.2.0",
     "@khanacademy/wonder-blocks-core": "^4.3.2",
     "@khanacademy/wonder-blocks-layout": "^1.4.10",
-    "@khanacademy/wonder-blocks-modal": "^2.3.5",
+    "@khanacademy/wonder-blocks-modal": "^2.3.6",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
     "@khanacademy/wonder-blocks-typography": "^1.1.32"
   },

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap CHANGED Viewed

@@ -5,7 +5,7 @@ exports[`wonder-blocks-tooltip example 1 1`] = `
   aria-describedby="uid-tooltip-0-aria-content"
   className=""
   style={
-    Object {
+    {
       "MozOsxFontSmoothing": "grayscale",
       "WebkitFontSmoothing": "antialiased",
     }
@@ -19,7 +19,7 @@ exports[`wonder-blocks-tooltip example 2 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "stretch",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -46,7 +46,7 @@ exports[`wonder-blocks-tooltip example 3 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "stretch",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -65,7 +65,7 @@ exports[`wonder-blocks-tooltip example 3 1`] = `
   <div
     className=""
     style={
-      Object {
+      {
         "alignItems": "stretch",
         "border": "1px solid black",
         "borderStyle": "solid",
@@ -87,7 +87,7 @@ exports[`wonder-blocks-tooltip example 3 1`] = `
     <div
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "borderStyle": "solid",
           "borderWidth": 0,
@@ -106,11 +106,11 @@ exports[`wonder-blocks-tooltip example 3 1`] = `
       <span
         className=""
         style={
-          Object {
+          {
             "MozOsxFontSmoothing": "grayscale",
             "WebkitFontSmoothing": "antialiased",
             "display": "block",
-            "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+            "fontFamily": "Lato, "Noto Sans", sans-serif",
             "fontSize": 16,
             "fontWeight": 400,
             "lineHeight": "22px",
@@ -122,7 +122,7 @@ exports[`wonder-blocks-tooltip example 3 1`] = `
           aria-describedby="uid-tooltip-1-aria-content"
           className=""
           style={
-            Object {
+            {
               "MozOsxFontSmoothing": "grayscale",
               "WebkitFontSmoothing": "antialiased",
             }
@@ -159,11 +159,11 @@ exports[`wonder-blocks-tooltip example 4 1`] = `
   onTouchStart={[Function]}
   role="button"
   style={
-    Object {
-      "::MozFocusInner": Object {
+    {
+      "::MozFocusInner": {
         "border": 0,
       },
-      ":focus": Object {
+      ":focus": {
         "WebkitTapHighlightColor": "rgba(0,0,0,0)",
       },
       "alignItems": "center",
@@ -194,12 +194,12 @@ exports[`wonder-blocks-tooltip example 4 1`] = `
   <span
     className=""
     style={
-      Object {
+      {
         "MozOsxFontSmoothing": "grayscale",
         "WebkitFontSmoothing": "antialiased",
         "alignItems": "center",
         "display": "inline-block",
-        "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+        "fontFamily": "Lato, "Noto Sans", sans-serif",
         "fontSize": 16,
         "fontWeight": "bold",
         "lineHeight": "20px",
@@ -219,7 +219,7 @@ exports[`wonder-blocks-tooltip example 5 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "stretch",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -238,11 +238,11 @@ exports[`wonder-blocks-tooltip example 5 1`] = `
   <span
     className=""
     style={
-      Object {
+      {
         "MozOsxFontSmoothing": "grayscale",
         "WebkitFontSmoothing": "antialiased",
         "display": "block",
-        "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+        "fontFamily": "Lato, "Noto Sans", sans-serif",
         "fontSize": 14,
         "fontWeight": 400,
         "lineHeight": "18px",
@@ -254,7 +254,7 @@ exports[`wonder-blocks-tooltip example 5 1`] = `
   <div
     className=""
     style={
-      Object {
+      {
         "alignItems": "stretch",
         "borderStyle": "solid",
         "borderWidth": 0,
@@ -274,7 +274,7 @@ exports[`wonder-blocks-tooltip example 5 1`] = `
       aria-describedby="uid-tooltip-2-aria-content"
       className=""
       style={
-        Object {
+        {
           "alignItems": "center",
           "border": "solid 1px steelblue",
           "borderStyle": "solid",
@@ -300,7 +300,7 @@ exports[`wonder-blocks-tooltip example 5 1`] = `
       aria-describedby="uid-tooltip-3-aria-content"
       className=""
       style={
-        Object {
+        {
           "alignItems": "center",
           "border": "solid 1px steelblue",
           "borderStyle": "solid",
@@ -326,7 +326,7 @@ exports[`wonder-blocks-tooltip example 5 1`] = `
       aria-describedby="uid-tooltip-4-aria-content"
       className=""
       style={
-        Object {
+        {
           "alignItems": "center",
           "border": "solid 1px steelblue",
           "borderStyle": "solid",
@@ -352,7 +352,7 @@ exports[`wonder-blocks-tooltip example 5 1`] = `
       aria-describedby="uid-tooltip-5-aria-content"
       className=""
       style={
-        Object {
+        {
           "alignItems": "center",
           "border": "solid 1px steelblue",
           "borderStyle": "solid",
@@ -382,7 +382,7 @@ exports[`wonder-blocks-tooltip example 6 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "center",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -417,11 +417,11 @@ exports[`wonder-blocks-tooltip example 6 1`] = `
     onTouchStart={[Function]}
     role="button"
     style={
-      Object {
-        "::MozFocusInner": Object {
+      {
+        "::MozFocusInner": {
           "border": 0,
         },
-        ":focus": Object {
+        ":focus": {
           "WebkitTapHighlightColor": "rgba(0,0,0,0)",
         },
         "alignItems": "center",
@@ -452,12 +452,12 @@ exports[`wonder-blocks-tooltip example 6 1`] = `
     <span
       className=""
       style={
-        Object {
+        {
           "MozOsxFontSmoothing": "grayscale",
           "WebkitFontSmoothing": "antialiased",
           "alignItems": "center",
           "display": "inline-block",
-          "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+          "fontFamily": "Lato, "Noto Sans", sans-serif",
           "fontSize": 16,
           "fontWeight": "bold",
           "lineHeight": "20px",
@@ -475,7 +475,7 @@ exports[`wonder-blocks-tooltip example 6 1`] = `
     aria-hidden="true"
     className=""
     style={
-      Object {
+      {
         "MsFlexBasis": 16,
         "MsFlexPreferredSize": 16,
         "WebkitFlexBasis": 16,
@@ -516,11 +516,11 @@ exports[`wonder-blocks-tooltip example 6 1`] = `
     onTouchEnd={[Function]}
     onTouchStart={[Function]}
     style={
-      Object {
-        "::MozFocusInner": Object {
+      {
+        "::MozFocusInner": {
           "border": 0,
         },
-        ":focus": Object {
+        ":focus": {
           "WebkitTapHighlightColor": "rgba(0,0,0,0)",
         },
         "alignItems": "center",
@@ -548,7 +548,7 @@ exports[`wonder-blocks-tooltip example 6 1`] = `
       className=""
       height={24}
       style={
-        Object {
+        {
           "display": "inline-block",
           "flexGrow": 0,
           "flexShrink": 0,
@@ -571,7 +571,7 @@ exports[`wonder-blocks-tooltip example 7 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "stretch",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -590,11 +590,11 @@ exports[`wonder-blocks-tooltip example 7 1`] = `
   <span
     className=""
     style={
-      Object {
+      {
         "MozOsxFontSmoothing": "grayscale",
         "WebkitFontSmoothing": "antialiased",
         "display": "block",
-        "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+        "fontFamily": "Lato, "Noto Sans", sans-serif",
         "fontSize": 16,
         "fontWeight": 400,
         "lineHeight": "20px",
@@ -610,7 +610,7 @@ exports[`wonder-blocks-tooltip example 8 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "stretch",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -629,11 +629,11 @@ exports[`wonder-blocks-tooltip example 8 1`] = `
   <h4
     className=""
     style={
-      Object {
+      {
         "MozOsxFontSmoothing": "grayscale",
         "WebkitFontSmoothing": "antialiased",
         "display": "block",
-        "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+        "fontFamily": "Lato, "Noto Sans", sans-serif",
         "fontSize": 20,
         "fontWeight": 700,
         "lineHeight": "24px",
@@ -648,7 +648,7 @@ exports[`wonder-blocks-tooltip example 8 1`] = `
     aria-hidden="true"
     className=""
     style={
-      Object {
+      {
         "MsFlexBasis": 4,
         "MsFlexPreferredSize": 4,
         "WebkitFlexBasis": 4,
@@ -673,11 +673,11 @@ exports[`wonder-blocks-tooltip example 8 1`] = `
   <span
     className=""
     style={
-      Object {
+      {
         "MozOsxFontSmoothing": "grayscale",
         "WebkitFontSmoothing": "antialiased",
         "display": "block",
-        "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+        "fontFamily": "Lato, "Noto Sans", sans-serif",
         "fontSize": 16,
         "fontWeight": 400,
         "lineHeight": "20px",
@@ -693,7 +693,7 @@ exports[`wonder-blocks-tooltip example 9 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "stretch",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -712,11 +712,11 @@ exports[`wonder-blocks-tooltip example 9 1`] = `
   <span
     className=""
     style={
-      Object {
+      {
         "MozOsxFontSmoothing": "grayscale",
         "WebkitFontSmoothing": "antialiased",
         "display": "block",
-        "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+        "fontFamily": "Lato, "Noto Sans", sans-serif",
         "fontSize": 16,
         "fontWeight": 400,
         "lineHeight": "22px",
@@ -729,7 +729,7 @@ exports[`wonder-blocks-tooltip example 9 1`] = `
     aria-hidden="true"
     className=""
     style={
-      Object {
+      {
         "MsFlexBasis": 4,
         "MsFlexPreferredSize": 4,
         "WebkitFlexBasis": 4,
@@ -754,11 +754,11 @@ exports[`wonder-blocks-tooltip example 9 1`] = `
   <span
     className=""
     style={
-      Object {
+      {
         "MozOsxFontSmoothing": "grayscale",
         "WebkitFontSmoothing": "antialiased",
         "display": "block",
-        "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+        "fontFamily": "Lato, "Noto Sans", sans-serif",
         "fontSize": 16,
         "fontWeight": 400,
         "lineHeight": "22px",
@@ -770,11 +770,11 @@ exports[`wonder-blocks-tooltip example 9 1`] = `
   <span
     className=""
     style={
-      Object {
+      {
         "MozOsxFontSmoothing": "grayscale",
         "WebkitFontSmoothing": "antialiased",
         "display": "block",
-        "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+        "fontFamily": "Lato, "Noto Sans", sans-serif",
         "fontSize": 14,
         "fontWeight": 400,
         "lineHeight": "18px",
@@ -790,7 +790,7 @@ exports[`wonder-blocks-tooltip example 10 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "stretch",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -810,7 +810,7 @@ exports[`wonder-blocks-tooltip example 10 1`] = `
     className=""
     data-placement="top"
     style={
-      Object {
+      {
         "alignItems": "stretch",
         "borderStyle": "solid",
         "borderWidth": 0,
@@ -831,10 +831,11 @@ exports[`wonder-blocks-tooltip example 10 1`] = `
     }
   >
     <svg
+      aria-hidden={true}
       className="arrow_oo4scr"
       height={12}
       style={
-        Object {
+        {
           "marginLeft": 8,
           "marginRight": 8,
           "paddingBottom": 8,
@@ -889,7 +890,7 @@ exports[`wonder-blocks-tooltip example 10 1`] = `
   <div
     className=""
     style={
-      Object {
+      {
         "alignItems": "stretch",
         "borderStyle": "solid",
         "borderWidth": 0,
@@ -909,7 +910,7 @@ exports[`wonder-blocks-tooltip example 10 1`] = `
     <div
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "backgroundColor": "bisque",
           "borderStyle": "solid",
@@ -930,7 +931,7 @@ exports[`wonder-blocks-tooltip example 10 1`] = `
     <div
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "backgroundColor": "green",
           "borderStyle": "solid",
@@ -951,7 +952,7 @@ exports[`wonder-blocks-tooltip example 10 1`] = `
     <div
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "backgroundColor": "bisque",
           "borderStyle": "solid",
@@ -973,7 +974,7 @@ exports[`wonder-blocks-tooltip example 10 1`] = `
       aria-hidden="true"
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "borderStyle": "solid",
           "borderWidth": 0,
@@ -998,7 +999,7 @@ exports[`wonder-blocks-tooltip example 11 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "stretch",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -1017,7 +1018,7 @@ exports[`wonder-blocks-tooltip example 11 1`] = `
   <div
     className=""
     style={
-      Object {
+      {
         "alignItems": "stretch",
         "borderStyle": "solid",
         "borderWidth": 0,
@@ -1037,7 +1038,7 @@ exports[`wonder-blocks-tooltip example 11 1`] = `
     <div
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "backgroundColor": "bisque",
           "borderStyle": "solid",
@@ -1058,7 +1059,7 @@ exports[`wonder-blocks-tooltip example 11 1`] = `
     <div
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "backgroundColor": "green",
           "borderStyle": "solid",
@@ -1079,7 +1080,7 @@ exports[`wonder-blocks-tooltip example 11 1`] = `
     <div
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "backgroundColor": "bisque",
           "borderStyle": "solid",
@@ -1101,7 +1102,7 @@ exports[`wonder-blocks-tooltip example 11 1`] = `
       aria-hidden="true"
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "borderStyle": "solid",
           "borderWidth": 0,
@@ -1123,7 +1124,7 @@ exports[`wonder-blocks-tooltip example 11 1`] = `
     className=""
     data-placement="right"
     style={
-      Object {
+      {
         "alignItems": "stretch",
         "borderStyle": "solid",
         "borderWidth": 0,
@@ -1144,10 +1145,11 @@ exports[`wonder-blocks-tooltip example 11 1`] = `
     }
   >
     <svg
+      aria-hidden={true}
       className="arrow_oo4scr"
       height={24}
       style={
-        Object {
+        {
           "marginBottom": 8,
           "marginTop": 8,
           "paddingLeft": 8,
@@ -1206,7 +1208,7 @@ exports[`wonder-blocks-tooltip example 12 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "stretch",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -1225,7 +1227,7 @@ exports[`wonder-blocks-tooltip example 12 1`] = `
   <div
     className=""
     style={
-      Object {
+      {
         "alignItems": "stretch",
         "borderStyle": "solid",
         "borderWidth": 0,
@@ -1245,7 +1247,7 @@ exports[`wonder-blocks-tooltip example 12 1`] = `
     <div
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "backgroundColor": "bisque",
           "borderStyle": "solid",
@@ -1266,7 +1268,7 @@ exports[`wonder-blocks-tooltip example 12 1`] = `
     <div
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "backgroundColor": "green",
           "borderStyle": "solid",
@@ -1287,7 +1289,7 @@ exports[`wonder-blocks-tooltip example 12 1`] = `
     <div
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "backgroundColor": "bisque",
           "borderStyle": "solid",
@@ -1309,7 +1311,7 @@ exports[`wonder-blocks-tooltip example 12 1`] = `
       aria-hidden="true"
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "borderStyle": "solid",
           "borderWidth": 0,
@@ -1331,7 +1333,7 @@ exports[`wonder-blocks-tooltip example 12 1`] = `
     className=""
     data-placement="bottom"
     style={
-      Object {
+      {
         "alignItems": "stretch",
         "borderStyle": "solid",
         "borderWidth": 0,
@@ -1352,10 +1354,11 @@ exports[`wonder-blocks-tooltip example 12 1`] = `
     }
   >
     <svg
+      aria-hidden={true}
       className="arrow_oo4scr"
       height={12}
       style={
-        Object {
+        {
           "marginLeft": 8,
           "marginRight": 8,
           "paddingTop": 8,
@@ -1386,7 +1389,7 @@ exports[`wonder-blocks-tooltip example 13 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "stretch",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -1406,7 +1409,7 @@ exports[`wonder-blocks-tooltip example 13 1`] = `
     className=""
     data-placement="left"
     style={
-      Object {
+      {
         "alignItems": "stretch",
         "borderStyle": "solid",
         "borderWidth": 0,
@@ -1427,10 +1430,11 @@ exports[`wonder-blocks-tooltip example 13 1`] = `
     }
   >
     <svg
+      aria-hidden={true}
       className="arrow_oo4scr"
       height={24}
       style={
-        Object {
+        {
           "marginBottom": 8,
           "marginTop": 8,
           "paddingRight": 8,
@@ -1485,7 +1489,7 @@ exports[`wonder-blocks-tooltip example 13 1`] = `
   <div
     className=""
     style={
-      Object {
+      {
         "alignItems": "stretch",
         "borderStyle": "solid",
         "borderWidth": 0,
@@ -1505,7 +1509,7 @@ exports[`wonder-blocks-tooltip example 13 1`] = `
     <div
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "backgroundColor": "bisque",
           "borderStyle": "solid",
@@ -1526,7 +1530,7 @@ exports[`wonder-blocks-tooltip example 13 1`] = `
     <div
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "backgroundColor": "green",
           "borderStyle": "solid",
@@ -1547,7 +1551,7 @@ exports[`wonder-blocks-tooltip example 13 1`] = `
     <div
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "backgroundColor": "bisque",
           "borderStyle": "solid",
@@ -1569,7 +1573,7 @@ exports[`wonder-blocks-tooltip example 13 1`] = `
       aria-hidden="true"
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "borderStyle": "solid",
           "borderWidth": 0,
@@ -1594,7 +1598,7 @@ exports[`wonder-blocks-tooltip example 14 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "stretch",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -1617,7 +1621,7 @@ exports[`wonder-blocks-tooltip example 14 1`] = `
     onMouseLeave={[Function]}
     role="tooltip"
     style={
-      Object {
+      {
         "alignItems": "stretch",
         "borderStyle": "solid",
         "borderWidth": 0,
@@ -1636,7 +1640,7 @@ exports[`wonder-blocks-tooltip example 14 1`] = `
     <div
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "backgroundColor": "#ffffff",
           "border": "solid 1px rgba(33,36,44,0.16)",
@@ -1661,7 +1665,7 @@ exports[`wonder-blocks-tooltip example 14 1`] = `
       <div
         className=""
         style={
-          Object {
+          {
             "alignItems": "stretch",
             "borderStyle": "solid",
             "borderWidth": 0,
@@ -1680,11 +1684,11 @@ exports[`wonder-blocks-tooltip example 14 1`] = `
         <span
           className=""
           style={
-            Object {
+            {
               "MozOsxFontSmoothing": "grayscale",
               "WebkitFontSmoothing": "antialiased",
               "display": "block",
-              "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+              "fontFamily": "Lato, "Noto Sans", sans-serif",
               "fontSize": 16,
               "fontWeight": 400,
               "lineHeight": "20px",
@@ -1699,7 +1703,7 @@ exports[`wonder-blocks-tooltip example 14 1`] = `
       className=""
       data-placement="top"
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "borderStyle": "solid",
           "borderWidth": 0,
@@ -1720,10 +1724,11 @@ exports[`wonder-blocks-tooltip example 14 1`] = `
       }
     >
       <svg
+        aria-hidden={true}
         className="arrow_oo4scr"
         height={12}
         style={
-          Object {
+          {
             "marginLeft": 8,
             "marginRight": 8,
             "paddingBottom": 8,
@@ -1783,7 +1788,7 @@ exports[`wonder-blocks-tooltip example 15 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "flex-start",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -1806,7 +1811,7 @@ exports[`wonder-blocks-tooltip example 15 1`] = `
     onMouseLeave={[Function]}
     role="tooltip"
     style={
-      Object {
+      {
         "alignItems": "stretch",
         "borderStyle": "solid",
         "borderWidth": 0,
@@ -1825,7 +1830,7 @@ exports[`wonder-blocks-tooltip example 15 1`] = `
     <div
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "backgroundColor": "#ffffff",
           "border": "solid 1px rgba(33,36,44,0.16)",
@@ -1850,7 +1855,7 @@ exports[`wonder-blocks-tooltip example 15 1`] = `
       <div
         className=""
         style={
-          Object {
+          {
             "alignItems": "stretch",
             "borderStyle": "solid",
             "borderWidth": 0,
@@ -1869,11 +1874,11 @@ exports[`wonder-blocks-tooltip example 15 1`] = `
         <span
           className=""
           style={
-            Object {
+            {
               "MozOsxFontSmoothing": "grayscale",
               "WebkitFontSmoothing": "antialiased",
               "display": "block",
-              "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+              "fontFamily": "Lato, "Noto Sans", sans-serif",
               "fontSize": 16,
               "fontWeight": 400,
               "lineHeight": "20px",
@@ -1888,7 +1893,7 @@ exports[`wonder-blocks-tooltip example 15 1`] = `
       className=""
       data-placement="right"
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "borderStyle": "solid",
           "borderWidth": 0,
@@ -1909,10 +1914,11 @@ exports[`wonder-blocks-tooltip example 15 1`] = `
       }
     >
       <svg
+        aria-hidden={true}
         className="arrow_oo4scr"
         height={24}
         style={
-          Object {
+          {
             "marginBottom": 8,
             "marginTop": 8,
             "paddingLeft": 8,
@@ -1972,7 +1978,7 @@ exports[`wonder-blocks-tooltip example 16 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "stretch",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -1995,7 +2001,7 @@ exports[`wonder-blocks-tooltip example 16 1`] = `
     onMouseLeave={[Function]}
     role="tooltip"
     style={
-      Object {
+      {
         "alignItems": "stretch",
         "borderStyle": "solid",
         "borderWidth": 0,
@@ -2014,7 +2020,7 @@ exports[`wonder-blocks-tooltip example 16 1`] = `
     <div
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "backgroundColor": "#ffffff",
           "border": "solid 1px rgba(33,36,44,0.16)",
@@ -2039,7 +2045,7 @@ exports[`wonder-blocks-tooltip example 16 1`] = `
       <div
         className=""
         style={
-          Object {
+          {
             "alignItems": "stretch",
             "borderStyle": "solid",
             "borderWidth": 0,
@@ -2058,11 +2064,11 @@ exports[`wonder-blocks-tooltip example 16 1`] = `
         <span
           className=""
           style={
-            Object {
+            {
               "MozOsxFontSmoothing": "grayscale",
               "WebkitFontSmoothing": "antialiased",
               "display": "block",
-              "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+              "fontFamily": "Lato, "Noto Sans", sans-serif",
               "fontSize": 16,
               "fontWeight": 400,
               "lineHeight": "20px",
@@ -2077,7 +2083,7 @@ exports[`wonder-blocks-tooltip example 16 1`] = `
       className=""
       data-placement="bottom"
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "borderStyle": "solid",
           "borderWidth": 0,
@@ -2098,10 +2104,11 @@ exports[`wonder-blocks-tooltip example 16 1`] = `
       }
     >
       <svg
+        aria-hidden={true}
         className="arrow_oo4scr"
         height={12}
         style={
-          Object {
+          {
             "marginLeft": 8,
             "marginRight": 8,
             "paddingTop": 8,
@@ -2133,7 +2140,7 @@ exports[`wonder-blocks-tooltip example 17 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "stretch",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -2156,7 +2163,7 @@ exports[`wonder-blocks-tooltip example 17 1`] = `
     onMouseLeave={[Function]}
     role="tooltip"
     style={
-      Object {
+      {
         "alignItems": "stretch",
         "borderStyle": "solid",
         "borderWidth": 0,
@@ -2175,7 +2182,7 @@ exports[`wonder-blocks-tooltip example 17 1`] = `
     <div
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "backgroundColor": "#ffffff",
           "border": "solid 1px rgba(33,36,44,0.16)",
@@ -2200,7 +2207,7 @@ exports[`wonder-blocks-tooltip example 17 1`] = `
       <div
         className=""
         style={
-          Object {
+          {
             "alignItems": "stretch",
             "borderStyle": "solid",
             "borderWidth": 0,
@@ -2219,11 +2226,11 @@ exports[`wonder-blocks-tooltip example 17 1`] = `
         <span
           className=""
           style={
-            Object {
+            {
               "MozOsxFontSmoothing": "grayscale",
               "WebkitFontSmoothing": "antialiased",
               "display": "block",
-              "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+              "fontFamily": "Lato, "Noto Sans", sans-serif",
               "fontSize": 16,
               "fontWeight": 400,
               "lineHeight": "20px",
@@ -2238,7 +2245,7 @@ exports[`wonder-blocks-tooltip example 17 1`] = `
       className=""
       data-placement="left"
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "borderStyle": "solid",
           "borderWidth": 0,
@@ -2259,10 +2266,11 @@ exports[`wonder-blocks-tooltip example 17 1`] = `
       }
     >
       <svg
+        aria-hidden={true}
         className="arrow_oo4scr"
         height={24}
         style={
-          Object {
+          {
             "marginBottom": 8,
             "marginTop": 8,
             "paddingRight": 8,
@@ -2322,7 +2330,7 @@ exports[`wonder-blocks-tooltip example 18 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "stretch",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -2345,7 +2353,7 @@ exports[`wonder-blocks-tooltip example 18 1`] = `
     onMouseLeave={[Function]}
     role="tooltip"
     style={
-      Object {
+      {
         "alignItems": "stretch",
         "borderStyle": "solid",
         "borderWidth": 0,
@@ -2364,7 +2372,7 @@ exports[`wonder-blocks-tooltip example 18 1`] = `
     <div
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "backgroundColor": "#ffffff",
           "border": "solid 1px rgba(33,36,44,0.16)",
@@ -2389,7 +2397,7 @@ exports[`wonder-blocks-tooltip example 18 1`] = `
       <div
         className=""
         style={
-          Object {
+          {
             "alignItems": "stretch",
             "borderStyle": "solid",
             "borderWidth": 0,
@@ -2408,11 +2416,11 @@ exports[`wonder-blocks-tooltip example 18 1`] = `
         <span
           className=""
           style={
-            Object {
+            {
               "MozOsxFontSmoothing": "grayscale",
               "WebkitFontSmoothing": "antialiased",
               "display": "block",
-              "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+              "fontFamily": "Lato, "Noto Sans", sans-serif",
               "fontSize": 16,
               "fontWeight": 400,
               "lineHeight": "20px",
@@ -2427,7 +2435,7 @@ exports[`wonder-blocks-tooltip example 18 1`] = `
       className=""
       data-placement="bottom"
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "borderStyle": "solid",
           "borderWidth": 0,
@@ -2449,10 +2457,11 @@ exports[`wonder-blocks-tooltip example 18 1`] = `
       }
     >
       <svg
+        aria-hidden={true}
         className="arrow_oo4scr"
         height={12}
         style={
-          Object {
+          {
             "marginLeft": 8,
             "marginRight": 8,
             "paddingTop": 8,
@@ -2484,7 +2493,7 @@ exports[`wonder-blocks-tooltip example 19 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "stretch",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -2507,7 +2516,7 @@ exports[`wonder-blocks-tooltip example 19 1`] = `
     onMouseLeave={[Function]}
     role="tooltip"
     style={
-      Object {
+      {
         "alignItems": "stretch",
         "backgroundColor": "transparent",
         "borderStyle": "solid",
@@ -2530,7 +2539,7 @@ exports[`wonder-blocks-tooltip example 19 1`] = `
     <div
       className=""
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "backgroundColor": "#ffffff",
           "border": "solid 1px rgba(33,36,44,0.16)",
@@ -2555,7 +2564,7 @@ exports[`wonder-blocks-tooltip example 19 1`] = `
       <div
         className=""
         style={
-          Object {
+          {
             "alignItems": "stretch",
             "borderStyle": "solid",
             "borderWidth": 0,
@@ -2574,11 +2583,11 @@ exports[`wonder-blocks-tooltip example 19 1`] = `
         <span
           className=""
           style={
-            Object {
+            {
               "MozOsxFontSmoothing": "grayscale",
               "WebkitFontSmoothing": "antialiased",
               "display": "block",
-              "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+              "fontFamily": "Lato, "Noto Sans", sans-serif",
               "fontSize": 16,
               "fontWeight": 400,
               "lineHeight": "20px",
@@ -2593,7 +2602,7 @@ exports[`wonder-blocks-tooltip example 19 1`] = `
       className=""
       data-placement="top"
       style={
-        Object {
+        {
           "alignItems": "stretch",
           "borderStyle": "solid",
           "borderWidth": 0,
@@ -2614,10 +2623,11 @@ exports[`wonder-blocks-tooltip example 19 1`] = `
       }
     >
       <svg
+        aria-hidden={true}
         className="arrow_oo4scr"
         height={12}
         style={
-          Object {
+          {
             "marginLeft": 8,
             "marginRight": 8,
             "paddingBottom": 8,

package/src/components/tooltip-tail.js CHANGED Viewed

@@ -374,6 +374,7 @@ export default class TooltipTail extends React.Component<Props> {
                 style={this._getArrowStyle()}
                 width={width}
                 height={height}
+                aria-hidden
             >
                 {this._maybeRenderDropshadow(points)}