feat: Add ARIA roles and attributes (#233)

Fixes #235 
Fixes #216

Author: gazab

.codeclimate.yml

@@ -39,7 +39,7 @@ plugins:
     config:
       languages:
         javascript:
-          mass_threshold : 50
+          mass_threshold : 60
 exclude_patterns:
 - "docs/"
 - "snapshots/"

__snapshots__/src/index.test.js.md

@@ -15,9 +15,9 @@ Generated by [AVA](https://ava.li).
       <div
         className="dropdown"
       >
-        <a
-          className="dropdown-trigger arrow top"
-          onClick={Function {}}
+        <Trigger
+          onTrigger={Function {}}
+          showDropdown={true}
         >
           <Input
             inputRef={Function inputRef {}}
@@ -28,7 +28,7 @@ Generated by [AVA](https://ava.li).
             onTagRemove={Function {}}
             tags={[]}
           />
-        </a>
+        </Trigger>
         <div
           className="dropdown-content"
         >
@@ -166,8 +166,10 @@ Generated by [AVA](https://ava.li).
       <div
         className="dropdown"
       >
-        <a
-          className="dropdown-trigger arrow disabled bottom"
+        <Trigger
+          disabled={true}
+          onTrigger={Function {}}
+          showDropdown={false}
         >
           <Input
             disabled={true}
@@ -179,7 +181,7 @@ Generated by [AVA](https://ava.li).
             onTagRemove={Function {}}
             tags={[]}
           />
-        </a>
+        </Trigger>
       </div>
     </div>
 
@@ -263,39 +265,51 @@ Generated by [AVA](https://ava.li).
         <div
           className="dropdown radio-select"
         >
-          <a
-            className="dropdown-trigger arrow bottom"
-            onClick={Function {}}
+          <Trigger
+            onTrigger={Function {}}
+            radioSelect={true}
+            showDropdown={false}
           >
-            <Input
-              inputRef={Function inputRef {}}
-              onBlur={Function {}}
-              onFocus={Function {}}
-              onInputChange={Function {}}
+            <a
+              "aria-expanded"="false"
+              "aria-haspopup"="tree"
+              className="dropdown-trigger arrow bottom"
+              onClick={Function {}}
               onKeyDown={Function {}}
-              onTagRemove={Function {}}
-              tags={[]}
+              role="button"
+              tabIndex={0}
             >
-              <ul
-                className="tag-list"
+              <Input
+                inputRef={Function inputRef {}}
+                onBlur={Function {}}
+                onFocus={Function {}}
+                onInputChange={Function {}}
+                onKeyDown={Function {}}
+                onTagRemove={Function {}}
+                radioSelect={true}
+                tags={[]}
               >
-                <li
-                  className="tag-item"
+                <ul
+                  className="tag-list"
                 >
-                  <input
-                    "aria-autocomplete"="list"
-                    className="search"
-                    onBlur={Function {}}
-                    onChange={Function {}}
-                    onFocus={Function {}}
-                    onKeyDown={Function {}}
-                    placeholder="Choose..."
-                    type="text"
-                  />
-                </li>
-              </ul>
-            </Input>
-          </a>
+                  <li
+                    className="tag-item"
+                  >
+                    <input
+                      "aria-autocomplete"="list"
+                      className="search"
+                      onBlur={Function {}}
+                      onChange={Function {}}
+                      onFocus={Function {}}
+                      onKeyDown={Function {}}
+                      placeholder="Choose..."
+                      type="text"
+                    />
+                  </li>
+                </ul>
+              </Input>
+            </a>
+          </Trigger>
         </div>
       </div>
     </DropdownTreeSelect>
@@ -379,39 +393,49 @@ Generated by [AVA](https://ava.li).
         <div
           className="dropdown"
         >
-          <a
-            className="dropdown-trigger arrow bottom"
-            onClick={Function {}}
+          <Trigger
+            onTrigger={Function {}}
+            showDropdown={false}
           >
-            <Input
-              inputRef={Function inputRef {}}
-              onBlur={Function {}}
-              onFocus={Function {}}
-              onInputChange={Function {}}
+            <a
+              "aria-expanded"="false"
+              "aria-haspopup"="tree"
+              className="dropdown-trigger arrow bottom"
+              onClick={Function {}}
               onKeyDown={Function {}}
-              onTagRemove={Function {}}
-              tags={[]}
+              role="button"
+              tabIndex={0}
             >
-              <ul
-                className="tag-list"
+              <Input
+                inputRef={Function inputRef {}}
+                onBlur={Function {}}
+                onFocus={Function {}}
+                onInputChange={Function {}}
+                onKeyDown={Function {}}
+                onTagRemove={Function {}}
+                tags={[]}
               >
-                <li
-                  className="tag-item"
+                <ul
+                  className="tag-list"
                 >
-                  <input
-                    "aria-autocomplete"="list"
-                    className="search"
-                    onBlur={Function {}}
-                    onChange={Function {}}
-                    onFocus={Function {}}
-                    onKeyDown={Function {}}
-                    placeholder="Choose..."
-                    type="text"
-                  />
-                </li>
-              </ul>
-            </Input>
-          </a>
+                  <li
+                    className="tag-item"
+                  >
+                    <input
+                      "aria-autocomplete"="list"
+                      className="search"
+                      onBlur={Function {}}
+                      onChange={Function {}}
+                      onFocus={Function {}}
+                      onKeyDown={Function {}}
+                      placeholder="Choose..."
+                      type="text"
+                    />
+                  </li>
+                </ul>
+              </Input>
+            </a>
+          </Trigger>
         </div>
       </div>
     </DropdownTreeSelect>
@@ -427,9 +451,9 @@ Generated by [AVA](https://ava.li).
       <div
         className="dropdown"
       >
-        <a
-          className="dropdown-trigger arrow top"
-          onClick={Function {}}
+        <Trigger
+          onTrigger={Function {}}
+          showDropdown={true}
         >
           <Input
             inputRef={Function inputRef {}}
@@ -440,7 +464,7 @@ Generated by [AVA](https://ava.li).
             onTagRemove={Function {}}
             tags={[]}
           />
-        </a>
+        </Trigger>
         <div
           className="dropdown-content"
         >