carbon-addons-iot-react 2.149.0-next.44 → 2.149.0-next.45

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.149.0-next.45](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.149.0-next.44...v2.149.0-next.45) (2022-04-04)
+
+
+### Bug Fixes
+
+* **card:** accessibility violation in card header tooltip ([475e9f6](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/475e9f6b097e64b9580b8a879d20c3fdae71287a)), closes [#3395](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3395)
+
+
+
+
+
 # [2.149.0-next.44](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.149.0-next.43...v2.149.0-next.44) (2022-03-31)
 
 

package/es/components/Card/Card.js

@@ -235,7 +235,8 @@ var defaultProps = {
     expandLabel: 'Expand to fullscreen',
     overflowMenuDescription: 'Open and close list of options',
     toLabel: 'to',
-    extraActionLabel: 'Action Label'
+    extraActionLabel: 'Action Label',
+    titleTooltipIconDescription: 'Tooltip info icon'
   },
   onMouseDown: undefined,
   onMouseUp: undefined,
@@ -445,6 +446,8 @@ var Card = function Card(props) {
     title: title,
     titleTextTooltip: titleTextTooltip,
     infoIconTooltip: tooltip,
+    titleTooltipIconDescription: strings.titleTooltipIconDescription // To fix accessibility violation.
+    ,
     testId: "".concat(testID || testId)
   }), cardToolbar), /*#__PURE__*/React__default.createElement(CardContent // TODO: remove deprecated testID prop in v3
   , {
@@ -637,7 +640,7 @@ Card.__docgenInfo = {
     },
     "i18n": {
       "defaultValue": {
-        "value": "{\n  noDataLabel: 'No data is available for this time range.',\n  noDataShortLabel: 'No data',\n  errorLoadingDataLabel: 'Error loading data for this card: ',\n  errorLoadingDataShortLabel: 'Data error.',\n  timeRangeLabel: 'Time range',\n  rollingPeriodLabel: 'Rolling period',\n  defaultLabel: 'Default',\n  last24HoursLabel: 'Last 24 hrs',\n  last7DaysLabel: 'Last 7 days',\n  lastMonthLabel: 'Last month',\n  lastQuarterLabel: 'Last quarter',\n  lastYearLabel: 'Last year',\n  periodToDateLabel: 'Period to date',\n  thisWeekLabel: 'This week',\n  thisMonthLabel: 'This month',\n  thisQuarterLabel: 'This quarter',\n  thisYearLabel: 'This year',\n  selectTimeRangeLabel: 'Select time range',\n  hourlyLabel: 'Hourly',\n  dailyLabel: 'Daily',\n  weeklyLabel: 'Weekly',\n  monthlyLabel: 'Monthly',\n  editCardLabel: 'Edit card',\n  cloneCardLabel: 'Clone card',\n  deleteCardLabel: 'Delete card',\n  closeLabel: 'Close',\n  expandLabel: 'Expand to fullscreen',\n  overflowMenuDescription: 'Open and close list of options',\n  toLabel: 'to',\n  extraActionLabel: 'Action Label',\n}",
+        "value": "{\n  noDataLabel: 'No data is available for this time range.',\n  noDataShortLabel: 'No data',\n  errorLoadingDataLabel: 'Error loading data for this card: ',\n  errorLoadingDataShortLabel: 'Data error.',\n  timeRangeLabel: 'Time range',\n  rollingPeriodLabel: 'Rolling period',\n  defaultLabel: 'Default',\n  last24HoursLabel: 'Last 24 hrs',\n  last7DaysLabel: 'Last 7 days',\n  lastMonthLabel: 'Last month',\n  lastQuarterLabel: 'Last quarter',\n  lastYearLabel: 'Last year',\n  periodToDateLabel: 'Period to date',\n  thisWeekLabel: 'This week',\n  thisMonthLabel: 'This month',\n  thisQuarterLabel: 'This quarter',\n  thisYearLabel: 'This year',\n  selectTimeRangeLabel: 'Select time range',\n  hourlyLabel: 'Hourly',\n  dailyLabel: 'Daily',\n  weeklyLabel: 'Weekly',\n  monthlyLabel: 'Monthly',\n  editCardLabel: 'Edit card',\n  cloneCardLabel: 'Clone card',\n  deleteCardLabel: 'Delete card',\n  closeLabel: 'Close',\n  expandLabel: 'Expand to fullscreen',\n  overflowMenuDescription: 'Open and close list of options',\n  toLabel: 'to',\n  extraActionLabel: 'Action Label',\n  titleTooltipIconDescription: 'Tooltip info icon',\n}",
         "computed": false
       },
       "required": false

package/es/components/Card/CardTitle.js

@@ -23,7 +23,8 @@ var propTypes = {
   /** Adds tooltip to the title (no info icon) that when clicked shows a tooltip with this content.
    * Cannot be used together with the tooltip prop or the or the hasTitleWrap prop.
    */
-  titleTextTooltip: PropTypes.element
+  titleTextTooltip: PropTypes.element,
+  titleTooltipIconDescription: PropTypes.string.isRequired
 };
 var defaultProps = {
   infoIconTooltip: undefined,
@@ -39,7 +40,8 @@ var CardTitle = function CardTitle(_ref // eslint-disable-line react/prop-types
       subtitle = _ref.subtitle,
       testId = _ref.testId,
       title = _ref.title,
-      titleTextTooltip = _ref.titleTextTooltip;
+      titleTextTooltip = _ref.titleTextTooltip,
+      titleTooltipIconDescription = _ref.titleTooltipIconDescription;
   var titleRef = useRef();
   var subTitleRef = useRef();
   var truncatesTitle = useHasTextOverflow(titleRef, title);
@@ -96,7 +98,8 @@ var CardTitle = function CardTitle(_ref // eslint-disable-line react/prop-types
     triggerClassName: "".concat(iotPrefix, "--card--header--tooltip"),
     id: "card-tooltip-".concat(id) // https://github.com/carbon-design-system/carbon/pull/6744
     ,
-    triggerText: ""
+    triggerText: "",
+    iconDescription: titleTooltipIconDescription
   }, infoIconTooltip), renderSubTitle());
 };
 CardTitle.propTypes = propTypes;
@@ -170,6 +173,13 @@ CardTitle.__docgenInfo = {
       },
       "required": true,
       "description": ""
+    },
+    "titleTooltipIconDescription": {
+      "type": {
+        "name": "string"
+      },
+      "required": true,
+      "description": ""
     }
   }
 };

package/es/constants/CardPropTypes.js

@@ -753,7 +753,8 @@ var CardPropTypes = {
     closeLabel: PropTypes.string,
     loadingDataLabel: PropTypes.string,
     overflowMenuDescription: PropTypes.string,
-    toLabel: PropTypes.string
+    toLabel: PropTypes.string,
+    titleTooltipIconDescription: PropTypes.string
   }),
 
   /** Adds an info icon after the title that when clicked shows a tooltip with this content.

package/lib/components/Card/Card.js

@@ -250,7 +250,8 @@ var defaultProps = {
     expandLabel: 'Expand to fullscreen',
     overflowMenuDescription: 'Open and close list of options',
     toLabel: 'to',
-    extraActionLabel: 'Action Label'
+    extraActionLabel: 'Action Label',
+    titleTooltipIconDescription: 'Tooltip info icon'
   },
   onMouseDown: undefined,
   onMouseUp: undefined,
@@ -460,6 +461,8 @@ var Card = function Card(props) {
     title: title,
     titleTextTooltip: titleTextTooltip,
     infoIconTooltip: tooltip,
+    titleTooltipIconDescription: strings.titleTooltipIconDescription // To fix accessibility violation.
+    ,
     testId: "".concat(testID || testId)
   }), cardToolbar), /*#__PURE__*/React__default['default'].createElement(CardContent // TODO: remove deprecated testID prop in v3
   , {
@@ -652,7 +655,7 @@ Card.__docgenInfo = {
     },
     "i18n": {
       "defaultValue": {
-        "value": "{\n  noDataLabel: 'No data is available for this time range.',\n  noDataShortLabel: 'No data',\n  errorLoadingDataLabel: 'Error loading data for this card: ',\n  errorLoadingDataShortLabel: 'Data error.',\n  timeRangeLabel: 'Time range',\n  rollingPeriodLabel: 'Rolling period',\n  defaultLabel: 'Default',\n  last24HoursLabel: 'Last 24 hrs',\n  last7DaysLabel: 'Last 7 days',\n  lastMonthLabel: 'Last month',\n  lastQuarterLabel: 'Last quarter',\n  lastYearLabel: 'Last year',\n  periodToDateLabel: 'Period to date',\n  thisWeekLabel: 'This week',\n  thisMonthLabel: 'This month',\n  thisQuarterLabel: 'This quarter',\n  thisYearLabel: 'This year',\n  selectTimeRangeLabel: 'Select time range',\n  hourlyLabel: 'Hourly',\n  dailyLabel: 'Daily',\n  weeklyLabel: 'Weekly',\n  monthlyLabel: 'Monthly',\n  editCardLabel: 'Edit card',\n  cloneCardLabel: 'Clone card',\n  deleteCardLabel: 'Delete card',\n  closeLabel: 'Close',\n  expandLabel: 'Expand to fullscreen',\n  overflowMenuDescription: 'Open and close list of options',\n  toLabel: 'to',\n  extraActionLabel: 'Action Label',\n}",
+        "value": "{\n  noDataLabel: 'No data is available for this time range.',\n  noDataShortLabel: 'No data',\n  errorLoadingDataLabel: 'Error loading data for this card: ',\n  errorLoadingDataShortLabel: 'Data error.',\n  timeRangeLabel: 'Time range',\n  rollingPeriodLabel: 'Rolling period',\n  defaultLabel: 'Default',\n  last24HoursLabel: 'Last 24 hrs',\n  last7DaysLabel: 'Last 7 days',\n  lastMonthLabel: 'Last month',\n  lastQuarterLabel: 'Last quarter',\n  lastYearLabel: 'Last year',\n  periodToDateLabel: 'Period to date',\n  thisWeekLabel: 'This week',\n  thisMonthLabel: 'This month',\n  thisQuarterLabel: 'This quarter',\n  thisYearLabel: 'This year',\n  selectTimeRangeLabel: 'Select time range',\n  hourlyLabel: 'Hourly',\n  dailyLabel: 'Daily',\n  weeklyLabel: 'Weekly',\n  monthlyLabel: 'Monthly',\n  editCardLabel: 'Edit card',\n  cloneCardLabel: 'Clone card',\n  deleteCardLabel: 'Delete card',\n  closeLabel: 'Close',\n  expandLabel: 'Expand to fullscreen',\n  overflowMenuDescription: 'Open and close list of options',\n  toLabel: 'to',\n  extraActionLabel: 'Action Label',\n  titleTooltipIconDescription: 'Tooltip info icon',\n}",
         "computed": false
       },
       "required": false

package/lib/components/Card/CardTitle.js

@@ -34,7 +34,8 @@ var propTypes = {
   /** Adds tooltip to the title (no info icon) that when clicked shows a tooltip with this content.
    * Cannot be used together with the tooltip prop or the or the hasTitleWrap prop.
    */
-  titleTextTooltip: PropTypes__default['default'].element
+  titleTextTooltip: PropTypes__default['default'].element,
+  titleTooltipIconDescription: PropTypes__default['default'].string.isRequired
 };
 var defaultProps = {
   infoIconTooltip: undefined,
@@ -50,7 +51,8 @@ var CardTitle = function CardTitle(_ref // eslint-disable-line react/prop-types
       subtitle = _ref.subtitle,
       testId = _ref.testId,
       title = _ref.title,
-      titleTextTooltip = _ref.titleTextTooltip;
+      titleTextTooltip = _ref.titleTextTooltip,
+      titleTooltipIconDescription = _ref.titleTooltipIconDescription;
   var titleRef = React.useRef();
   var subTitleRef = React.useRef();
   var truncatesTitle = useHasTextOverflow(titleRef, title);
@@ -107,7 +109,8 @@ var CardTitle = function CardTitle(_ref // eslint-disable-line react/prop-types
     triggerClassName: "".concat(iotPrefix, "--card--header--tooltip"),
     id: "card-tooltip-".concat(id) // https://github.com/carbon-design-system/carbon/pull/6744
     ,
-    triggerText: ""
+    triggerText: "",
+    iconDescription: titleTooltipIconDescription
   }, infoIconTooltip), renderSubTitle());
 };
 CardTitle.propTypes = propTypes;
@@ -181,6 +184,13 @@ CardTitle.__docgenInfo = {
       },
       "required": true,
       "description": ""
+    },
+    "titleTooltipIconDescription": {
+      "type": {
+        "name": "string"
+      },
+      "required": true,
+      "description": ""
     }
   }
 };

package/lib/constants/CardPropTypes.js

@@ -762,7 +762,8 @@ var CardPropTypes = {
     closeLabel: PropTypes__default['default'].string,
     loadingDataLabel: PropTypes__default['default'].string,
     overflowMenuDescription: PropTypes__default['default'].string,
-    toLabel: PropTypes__default['default'].string
+    toLabel: PropTypes__default['default'].string,
+    titleTooltipIconDescription: PropTypes__default['default'].string
   }),
 
   /** Adds an info icon after the title that when clicked shows a tooltip with this content.

package/package.json

@@ -340,10 +340,10 @@
     "whatwg-fetch": "^3.0.0"
   },
   "sideEffects": false,
-  "version": "2.149.0-next.44",
+  "version": "2.149.0-next.45",
   "resolutions": {
     "chokidar": "3.3.1",
     "react-grid-layout": "1.2.2"
   },
-  "gitHead": "3c9e91926acdb193a42ff4883747fc67b38d1013"
+  "gitHead": "756238a81745c1e43182efd8869919433fe963ab"
 }

package/umd/carbon-addons-iot-react.js

@@ -103251,7 +103251,8 @@
 	    closeLabel: PropTypes__default['default'].string,
 	    loadingDataLabel: PropTypes__default['default'].string,
 	    overflowMenuDescription: PropTypes__default['default'].string,
-	    toLabel: PropTypes__default['default'].string
+	    toLabel: PropTypes__default['default'].string,
+	    titleTooltipIconDescription: PropTypes__default['default'].string
 	  }),
 
 	  /** Adds an info icon after the title that when clicked shows a tooltip with this content.
@@ -106356,7 +106357,8 @@
 	  /** Adds tooltip to the title (no info icon) that when clicked shows a tooltip with this content.
 	   * Cannot be used together with the tooltip prop or the or the hasTitleWrap prop.
 	   */
-	  titleTextTooltip: PropTypes__default['default'].element
+	  titleTextTooltip: PropTypes__default['default'].element,
+	  titleTooltipIconDescription: PropTypes__default['default'].string.isRequired
 	};
 	var defaultProps$1E = {
 	  infoIconTooltip: undefined,
@@ -106372,7 +106374,8 @@
 	      subtitle = _ref.subtitle,
 	      testId = _ref.testId,
 	      title = _ref.title,
-	      titleTextTooltip = _ref.titleTextTooltip;
+	      titleTextTooltip = _ref.titleTextTooltip,
+	      titleTooltipIconDescription = _ref.titleTooltipIconDescription;
 	  var titleRef = React$1.useRef();
 	  var subTitleRef = React$1.useRef();
 	  var truncatesTitle = useHasTextOverflow(titleRef, title);
@@ -106429,7 +106432,8 @@
 	    triggerClassName: "".concat(iotPrefix$1h, "--card--header--tooltip"),
 	    id: "card-tooltip-".concat(id) // https://github.com/carbon-design-system/carbon/pull/6744
 	    ,
-	    triggerText: ""
+	    triggerText: "",
+	    iconDescription: titleTooltipIconDescription
 	  }, infoIconTooltip), renderSubTitle());
 	};
 	CardTitle.propTypes = propTypes$1x;
@@ -106503,6 +106507,13 @@
 	      },
 	      "required": true,
 	      "description": ""
+	    },
+	    "titleTooltipIconDescription": {
+	      "type": {
+	        "name": "string"
+	      },
+	      "required": true,
+	      "description": ""
 	    }
 	  }
 	};
@@ -106710,7 +106721,8 @@
 	    expandLabel: 'Expand to fullscreen',
 	    overflowMenuDescription: 'Open and close list of options',
 	    toLabel: 'to',
-	    extraActionLabel: 'Action Label'
+	    extraActionLabel: 'Action Label',
+	    titleTooltipIconDescription: 'Tooltip info icon'
 	  },
 	  onMouseDown: undefined,
 	  onMouseUp: undefined,
@@ -106920,6 +106932,8 @@
 	    title: title,
 	    titleTextTooltip: titleTextTooltip,
 	    infoIconTooltip: tooltip,
+	    titleTooltipIconDescription: strings.titleTooltipIconDescription // To fix accessibility violation.
+	    ,
 	    testId: "".concat(testID || testId)
 	  }), cardToolbar), /*#__PURE__*/React__default['default'].createElement(CardContent // TODO: remove deprecated testID prop in v3
 	  , {
@@ -107112,7 +107126,7 @@
 	    },
 	    "i18n": {
 	      "defaultValue": {
-	        "value": "{\n  noDataLabel: 'No data is available for this time range.',\n  noDataShortLabel: 'No data',\n  errorLoadingDataLabel: 'Error loading data for this card: ',\n  errorLoadingDataShortLabel: 'Data error.',\n  timeRangeLabel: 'Time range',\n  rollingPeriodLabel: 'Rolling period',\n  defaultLabel: 'Default',\n  last24HoursLabel: 'Last 24 hrs',\n  last7DaysLabel: 'Last 7 days',\n  lastMonthLabel: 'Last month',\n  lastQuarterLabel: 'Last quarter',\n  lastYearLabel: 'Last year',\n  periodToDateLabel: 'Period to date',\n  thisWeekLabel: 'This week',\n  thisMonthLabel: 'This month',\n  thisQuarterLabel: 'This quarter',\n  thisYearLabel: 'This year',\n  selectTimeRangeLabel: 'Select time range',\n  hourlyLabel: 'Hourly',\n  dailyLabel: 'Daily',\n  weeklyLabel: 'Weekly',\n  monthlyLabel: 'Monthly',\n  editCardLabel: 'Edit card',\n  cloneCardLabel: 'Clone card',\n  deleteCardLabel: 'Delete card',\n  closeLabel: 'Close',\n  expandLabel: 'Expand to fullscreen',\n  overflowMenuDescription: 'Open and close list of options',\n  toLabel: 'to',\n  extraActionLabel: 'Action Label',\n}",
+	        "value": "{\n  noDataLabel: 'No data is available for this time range.',\n  noDataShortLabel: 'No data',\n  errorLoadingDataLabel: 'Error loading data for this card: ',\n  errorLoadingDataShortLabel: 'Data error.',\n  timeRangeLabel: 'Time range',\n  rollingPeriodLabel: 'Rolling period',\n  defaultLabel: 'Default',\n  last24HoursLabel: 'Last 24 hrs',\n  last7DaysLabel: 'Last 7 days',\n  lastMonthLabel: 'Last month',\n  lastQuarterLabel: 'Last quarter',\n  lastYearLabel: 'Last year',\n  periodToDateLabel: 'Period to date',\n  thisWeekLabel: 'This week',\n  thisMonthLabel: 'This month',\n  thisQuarterLabel: 'This quarter',\n  thisYearLabel: 'This year',\n  selectTimeRangeLabel: 'Select time range',\n  hourlyLabel: 'Hourly',\n  dailyLabel: 'Daily',\n  weeklyLabel: 'Weekly',\n  monthlyLabel: 'Monthly',\n  editCardLabel: 'Edit card',\n  cloneCardLabel: 'Clone card',\n  deleteCardLabel: 'Delete card',\n  closeLabel: 'Close',\n  expandLabel: 'Expand to fullscreen',\n  overflowMenuDescription: 'Open and close list of options',\n  toLabel: 'to',\n  extraActionLabel: 'Action Label',\n  titleTooltipIconDescription: 'Tooltip info icon',\n}",
 	        "computed": false
 	      },
 	      "required": false