FIX (aria)[#146]: add aria-expanded, closes #146

__tests__/__snapshots__/index.spec.js.snap

@@ -96,6 +96,8 @@ exports[`<Select/> component <Select/> is disabled 1`] = `
 
 <div>
   <div
+    aria-expanded={false}
+    aria-label="Dropdown select"
     className="react-dropdown-select undefined emotion-6 emotion-7"
     color="#0074D9"
     direction="ltr"
@@ -239,6 +241,8 @@ exports[`<Select/> component <Select/> renders correctly 1`] = `
 
 <div>
   <div
+    aria-expanded={false}
+    aria-label="Dropdown select"
     className="react-dropdown-select undefined emotion-6 emotion-7"
     color="#0074D9"
     direction="ltr"
@@ -396,6 +400,8 @@ exports[`<Select/> component <Select/> renders with clearable 1`] = `
 
 <div>
   <div
+    aria-expanded={false}
+    aria-label="Dropdown select"
     className="react-dropdown-select undefined emotion-8 emotion-9"
     color="#0074D9"
     direction="ltr"
@@ -547,6 +553,8 @@ exports[`<Select/> component <Select/> renders with custom search function 1`] =
 
 <div>
   <div
+    aria-expanded={false}
+    aria-label="Dropdown select"
     className="react-dropdown-select undefined emotion-6 emotion-7"
     color="#0074D9"
     direction="ltr"
@@ -711,6 +719,8 @@ exports[`<Select/> component <Select/> renders with loading 1`] = `
 
 <div>
   <div
+    aria-expanded={false}
+    aria-label="Dropdown select"
     className="react-dropdown-select undefined emotion-8 emotion-9"
     color="#0074D9"
     direction="ltr"
@@ -858,6 +868,8 @@ exports[`<Select/> component <Select/> renders with name 1`] = `
 
 <div>
   <div
+    aria-expanded={false}
+    aria-label="Dropdown select"
     className="react-dropdown-select undefined emotion-6 emotion-7"
     color="#0074D9"
     direction="ltr"
@@ -1022,6 +1034,8 @@ exports[`<Select/> component <Select/> renders with separator 1`] = `
 
 <div>
   <div
+    aria-expanded={false}
+    aria-label="Dropdown select"
     className="react-dropdown-select undefined emotion-8 emotion-9"
     color="#0074D9"
     direction="ltr"
@@ -1168,6 +1182,8 @@ exports[`<Select/> component <Select/> renders with short color 1`] = `
 
 <div>
   <div
+    aria-expanded={false}
+    aria-label="Dropdown select"
     className="react-dropdown-select undefined emotion-6 emotion-7"
     color="#000"
     direction="ltr"

src/components/Dropdown.js

@@ -43,6 +43,7 @@ const Dropdown = ({ props, state, methods }) => (
       <React.Fragment>
         {props.create && state.search && !valueExistInSelected(state.search, [...state.values, ...props.options], props) && (
           <AddNew
+            role="button"
             className={`${LIB_NAME}-dropdown-add-new`}
             color={props.color}
             onClick={() => methods.createNew(state.search)}>

src/components/Item.js

@@ -31,8 +31,8 @@ class Item extends Component {
         ref={this.item}
         aria-selected={methods.isSelected(item)}
         aria-disabled={item.disabled}
-        disabled={item.disabled}
         aria-label={getByPath(item, props.labelField)}
+        disabled={item.disabled}
         key={`${getByPath(item, props.valueField)}${getByPath(item, props.labelField)}`}
         tabIndex="-1"
         className={`${LIB_NAME}-item ${

src/index.js

@@ -498,6 +498,8 @@ export class Select extends Component {
       <ClickOutside onClickOutside={(event) => this.dropDown('close', event)}>
         <ReactDropdownSelect
           onKeyDown={this.handleKeyDown}
+          aria-label="Dropdown select"
+          aria-expanded={this.state.dropdown}
           onClick={(event) => this.dropDown('open', event)}
           tabIndex={this.props.disabled ? '-1' : '0'}
           direction={this.props.direction}