Adds title attribute to clear button (Hacker0x01#1317)

* Adds title attribute to clear button * Changes title attribute to be configurable, adds test, updates docs * Updates clear button to be a button and removes it from tab order
vladferix · Mar 31, 2018 · 988c28d · 988c28d
1 parent 5eee56f
commit 988c28d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 4 deletions.
diff --git a/docs/datepicker.md b/docs/datepicker.md
@@ -10,6 +10,7 @@ General datepicker component.
 | `calendarClassName`          | `string`                       |                 |                                            |
 | `children`                   | `node`                         |                 |                                            |
 | `className`                  | `string`                       |                 |                                            |
+| `clearButtonTitle`           | `string`                       |                 |                                            |
 | `customInput`                | `element`                      |                 |                                            |
 | `customInputRef`             | `string`                       | `'ref'`         | The property used to pass the ref callback |
 | `dateFormat`                 | `union(string\|array)`         | `'L'`           |                                            |

diff --git a/src/index.jsx b/src/index.jsx
@@ -128,7 +128,8 @@ export default class DatePicker extends React.Component {
     minTime: PropTypes.object,
     maxTime: PropTypes.object,
     excludeTimes: PropTypes.array,
-    useShortMonthInDropdown: PropTypes.bool
+    useShortMonthInDropdown: PropTypes.bool,
+    clearButtonTitle: PropTypes.string
   };
 
   static get defaultProps() {
@@ -588,10 +589,11 @@ export default class DatePicker extends React.Component {
   renderClearButton = () => {
     if (this.props.isClearable && this.props.selected != null) {
       return (
-        <a
+        <button
           className="react-datepicker__close-icon"
-          href="javascript:void(0)"
           onClick={this.onClearClick}
+          title={this.props.clearButtonTitle}
+          tabIndex={-1}
         />
       );
     } else {

diff --git a/test/datepicker_test.js b/test/datepicker_test.js
@@ -337,6 +337,21 @@ describe("DatePicker", () => {
     expect(datePicker.state.inputValue).to.be.null;
   });
 
+  it("should set the title attribute on the clear button if clearButtonTitle is supplied", () => {
+    const datePicker = TestUtils.renderIntoDocument(
+      <DatePicker
+        selected={utils.newDate("2018-03-19")}
+        isClearable
+        clearButtonTitle="clear button"
+      />
+    );
+    const clearButtonText = TestUtils.findRenderedDOMComponentWithClass(
+      datePicker,
+      "react-datepicker__close-icon"
+    ).getAttribute("title");
+    expect(clearButtonText).to.equal("clear button");
+  });
+
   it("should save time from the selected date", () => {
     const selected = utils.newDate("2015-12-20 10:11:12");
     let date;

diff --git a/test/week_number_test.js b/test/week_number_test.js
@@ -1,20 +1,31 @@
 import React from "react";
 import WeekNumber from "../src/week_number";
 import { shallow } from "enzyme";
+import sinon from "sinon";
 
 function renderWeekNumber(weekNumber, props = {}) {
   return shallow(<WeekNumber weekNumber={weekNumber} {...props} />);
 }
 
 describe("WeekNumber", () => {
+  let shallowWeekNumber;
   describe("rendering", () => {
     it("should render the specified Week Number", () => {
       const weekNumber = 1;
-      const shallowWeekNumber = renderWeekNumber(weekNumber);
+      shallowWeekNumber = renderWeekNumber(weekNumber);
       expect(
         shallowWeekNumber.hasClass("react-datepicker__week-number")
       ).to.equal(true);
       expect(shallowWeekNumber.text()).to.equal(weekNumber + "");
     });
+
+    it("should call the onClick function if it is defined", () => {
+      const onClick = sinon.spy();
+      shallowWeekNumber = shallow(
+        <WeekNumber weekNumber={1} onClick={onClick} />
+      );
+      shallowWeekNumber.instance().handleClick({});
+      expect(onClick).to.have.property("callCount", 1);
+    });
   });
 });