[Accessibility] Sidenav missing close handler when opened by keyboard interaction

[gselderslaghs]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

When using the Sidenav component, the element can not be closed by keyboard interaction

Current Behavior

Close sidenav is not possible by keyboard interaction

Codepen example

Expected behavior

Component should be closable by mouse and keyboard input

Possible Solutions or Causes

Implement the necessary functional attributes on initialization in order to make open/close button tabbable/focusable by keyboard interaction

Your Environment

• Version used: 2.1.1

[gselderslaghs]

I think we can implement a tabbable close link that is hidden by default, similar as idea in #234
The close functionality already exists in the Sidenav component by adding sidenav-close class

[gselderslaghs]

Please check out this CodePen example with a possible solution, I'd like to hear what's your thoughts on this approach
I've implemented the close link with a styling class to hide the element by default and make it accessible by focus state