fix(Icon): Wrap in forwardRef to be used as Dropdown trigger

[kylealwyn]

No description provided.

[codecov-io]

Codecov Report

Merging #31 into master will increase coverage by 0.17%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master      #31      +/-   ##
==========================================
+ Coverage   88.38%   88.55%   +0.17%     
==========================================
  Files          13       13              
  Lines         198      201       +3     
  Branches       31       32       +1     
==========================================
+ Hits          175      178       +3     
  Misses         16       16              
  Partials        7        7

Impacted Files	Coverage Δ
src/utils.js	93.54% <100%> (+0.44%)	⬆️
src/Dropdown/Dropdown.js	91.78% <100%> (+0.11%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 580064f...f4a0cac. Read the comment docs.

[cehsu]

Nice!

[cehsu]

In order to make icon buttons accessible, we can wrap the icon in a div with role=Button and tabIndex=0. https://louiseclark.tech/tech-blog/accessibility-journey-making-buttons-accessible

[kylealwyn]

How about assigning directly to the trigger itself:

diff --git a/src/Dropdown/Dropdown.js b/src/Dropdown/Dropdown.js
index 7c0e70b..5341a9e 100644
--- a/src/Dropdown/Dropdown.js
+++ b/src/Dropdown/Dropdown.js
@@ -110,6 +110,8 @@ export default function Dropdown({
                   ref(node);
                 }
               },
+              role: trigger.role || 'button',
+              tabIndex: trigger.tabIndex || 0,
               'aria-haspopup': true,
               'aria-expanded': isOpen,
               onClick: handleTrigger,

---

EDIT

@cehsu The above, or wrapping in div with same properties allow me to trigger dropdown with spacebar or enter :/