Keyboard shortcuts and accessibility

ts/components/conversation/media-gallery/DocumentListItem.tsx

@@ -42,9 +42,8 @@ export class DocumentListItem extends React.Component<Props> {
     const { fileName, fileSize, timestamp } = this.props;
 
     return (
-      <div
+      <button
         className="module-document-list-item__content"
-        role="button"
         onClick={this.props.onClick}
       >
         <div className="module-document-list-item__icon" />
@@ -59,7 +58,7 @@ export class DocumentListItem extends React.Component<Props> {
         <div className="module-document-list-item__date">
           {moment(timestamp).format('ddd, MMM D, Y')}
         </div>
-      </div>
+      </button>
     );
   }
 }

ts/components/conversation/media-gallery/MediaGallery.tsx

@@ -16,6 +16,7 @@ interface Props {
   documents: Array<MediaItemType>;
   i18n: LocalizerType;
   media: Array<MediaItemType>;
+
   onItemClick?: (event: ItemClickEvent) => void;
 }
 
@@ -61,15 +62,26 @@ const Tab = ({
 };
 
 export class MediaGallery extends React.Component<Props, State> {
+  public readonly focusRef: React.RefObject<HTMLDivElement> = React.createRef();
   public state: State = {
     selectedTab: 'media',
   };
 
+  public componentDidMount() {
+    // When this component is created, it's initially not part of the DOM, and then it's
+    //   added off-screen and animated in. This ensures that the focus takes.
+    setTimeout(() => {
+      if (this.focusRef.current) {
+        this.focusRef.current.focus();
+      }
+    });
+  }
+
   public render() {
     const { selectedTab } = this.state;
 
     return (
-      <div className="module-media-gallery">
+      <div className="module-media-gallery" tabIndex={0} ref={this.focusRef}>
         <div className="module-media-gallery__tab-container">
           <Tab
             label="Media"

ts/components/conversation/media-gallery/MediaGridItem.tsx

@@ -109,13 +109,9 @@ export class MediaGridItem extends React.Component<Props, State> {
 
   public render() {
     return (
-      <div
-        className="module-media-grid-item"
-        role="button"
-        onClick={this.props.onClick}
-      >
+      <button className="module-media-grid-item" onClick={this.props.onClick}>
         {this.renderContent()}
-      </div>
+      </button>
     );
   }
 }