Accessibility improvements

.gitignore

@@ -8,3 +8,4 @@ coverage
 package-lock.json
 build.tar.gz
 .DS_Store
+yarn.lock

Dockerfile

@@ -0,0 +1,2 @@
+FROM dockerhub.camara.leg.br/dockerhub/library/nginx:latest
+ADD ./build /usr/share/nginx/html/

src/components/App/App.js

@@ -230,7 +230,7 @@ export class App extends Component {
 		};
 
 		return (
-			<Router history={history} onChange={this.handleRoute}>
+			<Router history={history} onChange={this.handleRoute} ref={this.handleAppRef}>
 				<ChatConnector default path='/' {...screenProps} />
 				<ChatFinished path='/chat-finished' {...screenProps} />
 				<GDPRAgreement path='/gdpr' {...screenProps} />

src/components/Avatar/index.js

@@ -24,6 +24,7 @@ export class Avatar extends Component {
 	render = ({ small, large, src, description, status, className, style }, { errored }) => (
 		<div
 			aria-label='User picture'
+			aria-hidden='true'
 			className={createClassName(styles, 'avatar', { small, large, nobg: src && !errored }, [className])}
 			style={style}
 		>

src/components/Button/index.js

@@ -23,13 +23,14 @@ export const Button = memo(({
 	style = {},
 	children,
 	img,
+	label,
 }) => (
 	<button
 		type={submit ? 'submit' : 'button'}
 		disabled={disabled}
 		onClick={onClick}
 		onMouseUp={handleMouseUp}
-		aria-label={icon ? children[0] : null}
+		aria-label={label ?? (icon ? children[0] : null)}
 		className={createClassName(styles, 'button', {
 			disabled,
 			outline,

src/components/Composer/ComposerAction/styles.scss

@@ -1,6 +1,9 @@
 @import '../../../styles/helpers';
+@import '../../../styles/colors';
 
 $composer-action-margin: 0 6px;
+$composer-action-color: $color-text-dark;
+$composer-action-color-hover: $color-black;
 
 .composer__action {
 	flex: 0 0 auto;
@@ -15,11 +18,17 @@ $composer-action-margin: 0 6px;
 	background: none;
 
 	font-size: 0;
+	color: $composer-action-color;
 
 	&:focus {
 		transform: scale(1.05);
 
-		outline: none;
+		// outline: none;
+	}
+
+	&:hover,
+	&:focus {
+		color: $composer-action-color-hover;
 	}
 
 	@include pressable-button(1px);

src/components/Composer/styles.scss

@@ -12,11 +12,11 @@ $composer-focused-border-color: $color-text-grey;
 $composer-input-min-height: 20px;
 $composer-input-max-height: 150px;
 $composer-input-padding: 2px 6px;
-$composer-input-color: $bg-color-dark;
+$composer-input-color: $color-text-darker;
 $composer-input-font-size: 0.875rem;
 $composer-input-font-weight: 500;
 $composer-input-line-height: 1.25rem;
-$composer-input-placeholder-color: $color-text-light;
+$composer-input-placeholder-color: $color-text-grey;
 
 .composer {
 	display: flex;

src/components/Footer/index.js

@@ -34,8 +34,8 @@ export const PoweredBy = withTranslation()(({ className, t, ...props }) => (
 
 const handleMouseUp = ({ target }) => target.blur();
 
-const OptionsTrigger = withTranslation()(({ pop, t }) => (
-	<button className={createClassName(styles, 'footer__options')} onClick={pop} onMouseUp={handleMouseUp}>
+const OptionsTrigger = withTranslation()(({ pop, t, expanded }) => (
+	<button className={createClassName(styles, 'footer__options')} onClick={pop} onMouseUp={handleMouseUp} aria-haspopup='true' aria-expanded={expanded}>
 		{t('options')}
 	</button>
 ));

src/components/Footer/styles.scss

@@ -2,6 +2,9 @@
 @import '../../styles/helpers';
 @import '../../styles/variables';
 
+$footer-options-text-color: $color-text-grey;
+$footer-options-text-color-hover: $color-black;
+
 .footer {
 	display: flex;
 	flex-direction: column;
@@ -31,7 +34,7 @@
 		text-align: left;
 		letter-spacing: 0.2px;
 
-		color: $color-text-grey;
+		color: $footer-options-text-color;
 		border: none;
 		background: none;
 
@@ -41,7 +44,7 @@
 
 		&:hover,
 		&:focus {
-			color: black;
+			color: $footer-options-text-color-hover;
 		}
 
 		@include pressable-button(2px);

src/components/Header/index.js

@@ -30,7 +30,7 @@ export const Picture = ({ children, className, ...props }) => (
 );
 
 export const Content = ({ children, className, ...props }) => (
-	<div className={createClassName(styles, 'header__content', {}, [className])} {...props}>
+	<div id='rocket-chat:header__content__id' className={createClassName(styles, 'header__content', {}, [className])} {...props}>
 		{children}
 	</div>
 );

src/components/Header/styles.scss

@@ -98,7 +98,7 @@ $header-action-active-displacement: 2px;
 
 			color: inherit;
 			border: none;
-			outline: none;
+			// outline: none;
 			background: none;
 			justify-content: center;
 

src/components/Menu/index.js

@@ -1,5 +1,6 @@
 import { h, Component } from 'preact';
 
+import { addFocusFirstElement, handleTabKey } from '../../lib/keyNavigation';
 import { PopoverTrigger } from '../Popover';
 import { createClassName, normalizeDOMRect } from '../helpers';
 import styles from './styles.scss';
@@ -13,7 +14,7 @@ export const Menu = ({ children, hidden, placement, ...props }) => (
 
 
 export const Group = ({ children, title, ...props }) => (
-	<div className={createClassName(styles, 'menu__group')} {...props}>
+	<div className={createClassName(styles, 'menu__group')} role='menu' {...props}>
 		{title && <div className={createClassName(styles, 'menu__group-title')}>{title}</div>}
 		{children}
 	</div>
@@ -24,6 +25,7 @@ export const Item = ({ children, primary, danger, disabled, icon, ...props }) =>
 	<button
 		className={createClassName(styles, 'menu__item', { primary, danger, disabled })}
 		disabled={disabled}
+		role='menuitem'
 		{...props}
 	>
 		{icon && (
@@ -52,6 +54,36 @@ class PopoverMenuWrapper extends Component {
 		dismiss();
 	}
 
+
+	handleCancel = () => {
+		const { dismiss } = this.props;
+		const { focusRef } = this.state;
+
+		if (focusRef) {
+			focusRef.focus();
+		}
+
+		dismiss();
+	}
+
+	handleKeyDown = (event) => {
+		const { key } = event;
+
+		switch (key) {
+			case 'Tab':
+				handleTabKey(event, this.menuRef.base);
+				break;
+			case 'Escape':
+				this.handleCancel();
+				break;
+			default:
+				break;
+		}
+
+		event.stopPropagation();
+
+	}
+
 	componentDidMount() {
 		const { triggerBounds, overlayBounds } = this.props;
 		const menuBounds = normalizeDOMRect(this.menuRef.base.getBoundingClientRect());
@@ -70,10 +102,15 @@ class PopoverMenuWrapper extends Component {
 
 		const placement = `${ menuWidth < rightSpace ? 'right' : 'left' }-${ menuHeight < bottomSpace ? 'bottom' : 'top' }`;
 
+		const focusRef = document.activeElement;
+
+		addFocusFirstElement(this.menuRef.base);
+
 		// eslint-disable-next-line react/no-did-mount-set-state
 		this.setState({
 			position: { left, right, top, bottom },
 			placement,
+			focusRef,
 		});
 	}
 
@@ -83,6 +120,7 @@ class PopoverMenuWrapper extends Component {
 			style={{ position: 'absolute', ...this.state.position }}
 			placement={this.state.placement}
 			onClickCapture={this.handleClick}
+			onkeydown={this.handleKeyDown}
 		>
 			{children}
 		</Menu>

src/components/Menu/styles.scss

@@ -65,7 +65,7 @@
 		letter-spacing: 0;
 
 		border: none;
-		outline: none;
+		// outline: none;
 		background: none;
 
 		font-family: inherit;

src/components/Messages/Message/index.js

@@ -1,10 +1,11 @@
 import { formatDistance } from 'date-fns';
 import format from 'date-fns/format';
 import isToday from 'date-fns/isToday';
+import { parseISO } from 'date-fns/fp';
 import { h } from 'preact';
 import { withTranslation } from 'react-i18next';
-
-import { getAttachmentUrl, memo, normalizeTransferHistoryMessage, resolveDate } from '../../helpers';
+import i18next from 'i18next';
+import { getAttachmentUrl, memo, normalizeTransferHistoryMessage, resolveDate, createClassName } from '../../helpers';
 import { default as AudioAttachment } from '../AudioAttachment';
 import { FileAttachment } from '../FileAttachment';
 import { ImageAttachment } from '../ImageAttachment';
@@ -28,6 +29,17 @@ import {
 	MESSAGE_TYPE_LIVECHAT_TRANSFER_HISTORY,
 	MESSAGE_WEBRTC_CALL,
 } from '../constants';
+import styles from './styles.scss';
+
+const parseDate = (time) => {
+	const timestamp = new Date(time).toISOString();
+	return i18next.t('message_time', {
+		val: new Date(timestamp),
+		formatParams: {
+			val: isToday(parseISO(timestamp)) ? { hour: 'numeric', minute: 'numeric' } : { day: 'numeric', hour: 'numeric', minute: 'numeric' },
+		},
+	});
+};
 
 const renderContent = ({
 	text,
@@ -39,6 +51,8 @@ const renderContent = ({
 	attachmentResolver,
 	mid,
 	rid,
+	username,
+    time,
 }) => [
 	...(attachments || [])
 		.map((attachment) =>
@@ -72,6 +86,12 @@ const renderContent = ({
 		),
 	text && (
 		<MessageBubble inverse={me} quoted={quoted} system={system}>
+			{!system && (
+				<span className={createClassName(styles, 'message--sr-only')}>
+					{me ? `${ i18next.t('i_say') } ` : `${ username } ${ i18next.t('says') } `}
+					{`${ parseDate(time) }:`}
+				</span>
+			)}
 			<MessageText text={text} system={system} />
 		</MessageBubble>
 	),
@@ -150,6 +170,8 @@ const Message = memo(({
 				mid: message._id,
 				rid: message.rid,
 				attachmentResolver,
+				username: message.u.name || message.u.username,
+				time: message.ts,
 			})}
 		</MessageContent>
 

src/components/Messages/Message/styles.scss

@@ -0,0 +1,10 @@
+.message--sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    border: 0;
+}

src/components/Messages/MessageList/index.js

@@ -189,7 +189,7 @@ export class MessageList extends MemoizedComponent {
 			onClick={this.handleClick}
 			style={style}
 		>
-			<ol className={createClassName(styles, 'message-list__content')}>
+			<ol className={createClassName(styles, 'message-list__content')} role='log' aria-live='polite' tabIndex={0}>
 				{this.renderItems(this.props)}
 			</ol>
 		</div>

src/components/Messages/MessageTime/index.js

@@ -18,7 +18,7 @@ const parseDate = (ts, t) => {
 };
 
 const MessageTime = memo(({ ts, normal, inverted, className, style = {}, t }) => (
-	<div className={createClassName(styles, 'message-time-wrapper')}>
+	<div className={createClassName(styles, 'message-time-wrapper')} aria-hidden='true'>
 		<time
 			dateTime={new Date(ts).toISOString()}
 			className={createClassName(styles, 'message-time', { normal, inverted }, [className])}