fix(search): remove role attr and label from skeleton (#4272)

carbon-design-system · Oct 10, 2019 · 0136897 · 0136897
1 parent 8c8a825
commit 0136897
Showing 1 changed file with 24 additions and 29 deletions.
diff --git a/packages/react/src/components/Search/Search.Skeleton.js b/packages/react/src/components/Search/Search.Skeleton.js
@@ -6,41 +6,36 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
 
 const { prefix } = settings;
 
-export default class SearchSkeleton extends Component {
-  static propTypes = {
-    /**
-     * Specify whether the Search should be a small variant
-     */
-    small: PropTypes.bool,
-  };
+const SearchSkeleton = ({ small }) => {
+  const searchClasses = classNames({
+    [`${prefix}--skeleton`]: true,
+    [`${prefix}--search--xl`]: !small,
+    [`${prefix}--search--sm`]: small,
+  });
 
-  static defaultProps = {
-    small: false,
-  };
+  return (
+    <div className={searchClasses}>
+      <span className={`${prefix}--label`} />
+      <div className={`${prefix}--search-input`} />
+    </div>
+  );
+};
 
-  render() {
-    const { small, id } = this.props;
+SearchSkeleton.propTypes = {
+  /**
+   * Specify whether the Search should be a small variant
+   */
+  small: PropTypes.bool,
+};
 
-    const searchClasses = classNames({
-      [`${prefix}--skeleton`]: true,
-      [`${prefix}--search--xl`]: !small,
-      [`${prefix}--search--sm`]: small,
-    });
+SearchSkeleton.defaultProps = {
+  small: false,
+};
 
-    return (
-      <div className={searchClasses} role="search">
-        {
-          /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control */
-          <label htmlFor={id} className={`${prefix}--label`} />
-        }
-        <div className={`${prefix}--search-input`} />
-      </div>
-    );
-  }
-}
+export default SearchSkeleton;