fix(DatePicker): remove decorative svg as a click target (#10283)

* fix(DatePicker): remove decorative svg as a click target * test(datepicker): remove usages of removed openCalendar prop, mirror style changes * fix(DatePicker): add deprecation warnings for unneeded props * test(DatePicker): update snapshot tests * fix(datepicker): no longer call deprecated openCalendar input prop Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Dec 17, 2021 · 7be55cd · 7be55cd
1 parent 334821f
commit 7be55cd
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 34 deletions.
diff --git a/packages/components/src/components/date-picker/_date-picker.scss b/packages/components/src/components/date-picker/_date-picker.scss
@@ -134,8 +134,8 @@
     // vertically center icon within parent container on IE11
     top: 50%;
     right: 1rem;
-    cursor: pointer;
     fill: $icon-primary;
+    pointer-events: none;
     transform: translateY(-50%);
   }
 

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2502,9 +2502,7 @@ Map {
       "hideLabel": Object {
         "type": "bool",
       },
-      "iconDescription": Object {
-        "type": "string",
-      },
+      "iconDescription": [Function],
       "id": Object {
         "isRequired": true,
         "type": "string",
@@ -2525,9 +2523,7 @@ Map {
       "onClick": Object {
         "type": "func",
       },
-      "openCalendar": Object {
-        "type": "func",
-      },
+      "openCalendar": [Function],
       "pattern": [Function],
       "placeholder": Object {
         "type": "string",

diff --git a/packages/react/src/components/DatePicker/DatePicker-test.js b/packages/react/src/components/DatePicker/DatePicker-test.js
@@ -354,21 +354,6 @@ describe('DatePicker', () => {
   });
 });
 
-describe('DatePickerInput', () => {
-  it('should call `openCalendar` on calendar icon click', () => {
-    const mockOpenCalendar = jest.fn();
-    const wrapper = mount(
-      <DatePickerInput
-        labelText="Date Picker label"
-        id="input-from"
-        openCalendar={mockOpenCalendar}
-      />
-    );
-    wrapper.find('svg').simulate('click');
-    expect(mockOpenCalendar).toHaveBeenCalled();
-  });
-});
-
 describe('DatePickerSkeleton', () => {
   describe('Renders as expected', () => {
     const wrapper = shallow(<DatePickerSkeleton range />);

diff --git a/packages/react/src/components/DatePicker/DatePicker.js b/packages/react/src/components/DatePicker/DatePicker.js
@@ -529,12 +529,6 @@ export default class DatePicker extends Component {
       </svg>`;
   }
 
-  openCalendar = () => {
-    if (this.cal) {
-      this.cal.open();
-    }
-  };
-
   updateClassNames = (calendar) => {
     const calendarContainer = calendar.calendarContainer;
     const daysContainer = calendar.days;
@@ -660,7 +654,6 @@ export default class DatePicker extends Component {
               return React.cloneElement(child, {
                 datePickerType,
                 ref: this.assignInputFieldRef,
-                openCalendar: this.openCalendar,
               });
             }
             if (
@@ -671,7 +664,6 @@ export default class DatePicker extends Component {
               return React.cloneElement(child, {
                 datePickerType,
                 ref: this.assignToInputFieldRef,
-                openCalendar: this.openCalendar,
               });
             }
             if (index === 0) {

diff --git a/packages/react/src/components/DatePickerInput/DatePickerInput.js b/packages/react/src/components/DatePickerInput/DatePickerInput.js
@@ -7,6 +7,7 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import deprecate from '../../prop-types/deprecate';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
 import {
@@ -46,7 +47,10 @@ export default class DatePickerInput extends Component {
     /**
      * The description of the calendar icon.
      */
-    iconDescription: PropTypes.string,
+    iconDescription: deprecate(
+      PropTypes.string,
+      `\nThe prop \`iconDescriptionInput\` for DatePickerInput has been deprecated and is no longer used`
+    ),
 
     /**
      * Specify an id that uniquely identifies the `<input>`
@@ -83,7 +87,10 @@ export default class DatePickerInput extends Component {
     /**
      * Provide a function to be called when the input field is clicked
      */
-    openCalendar: PropTypes.func,
+    openCalendar: deprecate(
+      PropTypes.func,
+      `\nThe prop \`openCalendar\` for DatePickerInput has been deprecated and is no longer used`
+    ),
 
     /**
      * Provide a regular expression that the input value must match
@@ -220,7 +227,8 @@ export default class DatePickerInput extends Component {
           className={`${prefix}--date-picker__icon`}
           aria-label={iconDescription}
           onClick={openCalendar}
-          role="img">
+          role="img"
+          aria-hidden="true">
           {iconDescription && <title>{iconDescription}</title>}
         </Calendar16>
       );

diff --git a/packages/styles/scss/components/date-picker/_date-picker.scss b/packages/styles/scss/components/date-picker/_date-picker.scss
@@ -141,8 +141,8 @@
     // vertically center icon within parent container on IE11
     top: 50%;
     right: 1rem;
-    cursor: pointer;
     fill: $icon-primary;
+    pointer-events: none;
     transform: translateY(-50%);
   }