import * as React from 'react'

import { Commit } from '../../models/commit'
import { RichText } from '../lib/rich-text'
import { RelativeTime } from '../relative-time'
import { Button } from '../lib/button'

interface IUndoCommitProps {
  /** The function to call when the Undo button is clicked. */
  readonly onUndo: () => void

  /** The commit to undo. */
  readonly commit: Commit

  readonly emoji: Map<string, string>
}

/** The Undo Commit component. */
export class UndoCommit extends React.Component<IUndoCommitProps, void> {
  public render() {
    const authorDate = this.props.commit.author.date
    return (
      <div id='undo-commit'>
        <div className='commit-info'>
          <div className='ago'>Committed <RelativeTime date={authorDate} /></div>
          <RichText
            emoji={this.props.emoji}
            className='summary'
            text={this.props.commit.summary} />
        </div>
        <div className='actions'>
          <Button size='small' onClick={this.props.onUndo}>Undo</Button>
        </div>
      </div>
    )
  }
}

import * as React from 'react'

import { Commit } from '../../models/commit'
import { RichText } from '../lib/rich-text'
import { RelativeTime } from '../relative-time'
import { Button } from '../lib/button'

interface IUndoCommitProps {
  /** The function to call when the Undo button is clicked. */
  readonly onUndo: () => void

  /** The commit to undo. */
  readonly commit: Commit

  readonly emoji: Map<string, string>
}

/** The Undo Commit component. */
export class UndoCommit extends React.Component<IUndoCommitProps, void> {
  public render() {
    const authorDate = this.props.commit.author.date
    return (
      <div id='undo-commit' role='group' aria-label='Undo commit'>
        <div className='commit-info'>
          <div className='ago'>Committed <RelativeTime date={authorDate} /></div>
          <RichText
            emoji={this.props.emoji}
            className='summary'
            text={this.props.commit.summary} />
        </div>
        <div className='actions'>
          <Button size='small' onClick={this.props.onUndo}>Undo</Button>
        </div>
      </div>
    )
  }
}

Mark up the undo section as a group
Mark up the undo section as a group

See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role
