docs(Button): add example with replicating button behaviour (#1951)

docs/app/Examples/elements/Button/Usage/ButtonExampleAttachedEvents.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react'
+import { Button, Grid, Segment } from 'semantic-ui-react'
+
+export default class ButtonExampleAttachedEvents extends Component {
+  state = { log: [] }
+
+  handleClick = () => this.updateLog('Button received click with mouse')
+
+  handleKeyPress = (e) => {
+    if (e.charCode === 32 || e.charCode === 13) {
+      // Prevent the default action to stop scrolling when space is pressed
+      e.preventDefault()
+      this.updateLog('Button received click with keyboard')
+    }
+  }
+
+  updateLog = message => this.setState({ log: [message, ...this.state.log] })
+
+  render() {
+    const { log } = this.state
+
+    return (
+      <Grid>
+        <Grid.Column width={8}>
+          <Segment attached='top'>
+            The button bellow accepts clicks with mouse and key presses with Space Bar or Enter.
+          </Segment>
+          <Button
+            attached='bottom'
+            content='Click'
+            onClick={this.handleClick}
+            onKeyPress={this.handleKeyPress}
+          />
+        </Grid.Column>
+        <Grid.Column width={8}>
+          <Segment>
+              <pre style={{ height: 100, overflowY: 'scroll' }}>
+                {log.map((e, i) => <p key={i}>{e}</p>)}
+              </pre>
+          </Segment>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}

docs/app/Examples/elements/Button/Usage/index.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Message } from 'semantic-ui-react'
 
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
@@ -10,6 +11,28 @@ const ButtonUsageExamples = () => (
       description='A button can be focused.'
       examplePath='elements/Button/Usage/ButtonExampleFocus'
     />
+    <ComponentExample
+      title='Attached events'
+      description='A button can be handle all events.'
+      examplePath='elements/Button/Usage/ButtonExampleAttachedEvents'
+    >
+      <Message warning>
+        <p>
+          When <code>Button</code> is <code>attached</code> or rendered as non-<code>button</code> element, it losses
+          ability to handle keyboard events when it focused.
+        </p>
+        <p>
+          However, <code>button</code> behaviour can be replicated with <code>onKeyPress</code> handler. You can find
+          out more details on {' '}
+          <a
+            href='https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role'
+            target='_blank'
+          >
+            MDN
+          </a>.
+        </p>
+      </Message>
+    </ComponentExample>
   </ExampleSection>
 )
 

src/elements/Button/Button.js

@@ -283,6 +283,7 @@ class Button extends Component {
         disabled={(disabled && ElementType === 'button') || undefined}
         onClick={this.handleClick}
         ref={this.handleRef}
+        role='button'
         tabIndex={tabIndex}
       >
         {hasChildren && children}