Adds aria attributes to the ConversationList

signalapp · Oct 7, 2021 · 096849c · 096849c
1 parent 8220ea4
commit 096849c
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 15 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -2447,6 +2447,38 @@
     }
   },
 
+  "ConversationList__aria-label": {
+    "message": "Conversation with $title$, $unreadCount$ new messages, last message: $lastMessage$.",
+    "description": "Aria label for the conversation list item",
+    "placeholders": {
+      "title": {
+        "content": "$1",
+        "example": "Alice"
+      },
+      "unreadCount": {
+        "content": "$2",
+        "example": "23"
+      },
+      "lastMessage": {
+        "content": "$3",
+        "example": "How about Friday?"
+      }
+    }
+  },
+  "ConversationList__last-message-undefined": {
+    "message": "The last message may have been deleted.",
+    "description": "For aria-label within conversation list. Describes if last message is not defined."
+  },
+  "BaseConversationListItem__aria-label": {
+    "message": "Go to conversation with $title$",
+    "description": "Aria label for the conversation list item button",
+    "placeholders": {
+      "title": {
+        "content": "$1",
+        "example": "Alice"
+      }
+    }
+  },
   "ConversationListItem--message-request": {
     "message": "Message Request",
     "description": "Preview shown for conversation if the user has not yet accepted an incoming message request"

diff --git a/patches/react-virtualized+9.21.0.patch b/patches/react-virtualized+9.21.0.patch
@@ -70,7 +70,7 @@ index 262776b..156cf0f 100644
        this._cellHeightCache[key] = height;
        this._cellWidthCache[key] = width;
 diff --git a/node_modules/react-virtualized/dist/commonjs/Grid/Grid.js b/node_modules/react-virtualized/dist/commonjs/Grid/Grid.js
-index e1b959a..7410c0a 100644
+index e1b959a..97d6ef9 100644
 --- a/node_modules/react-virtualized/dist/commonjs/Grid/Grid.js
 +++ b/node_modules/react-virtualized/dist/commonjs/Grid/Grid.js
 @@ -132,6 +132,9 @@ var Grid = function (_React$PureComponent) {
@@ -294,7 +294,15 @@ index e1b959a..7410c0a 100644
          });
        }
 
-@@ -909,6 +1035,11 @@ var Grid = function (_React$PureComponent) {
+@@ -750,6 +876,7 @@ var Grid = function (_React$PureComponent) {
+         }, containerProps, {
+           'aria-label': this.props['aria-label'],
+           'aria-readonly': this.props['aria-readonly'],
++          'aria-rowcount': this.props['rowCount'],
+           className: (0, _classnames2.default)('ReactVirtualized__Grid', className),
+           id: id,
+           onScroll: this._onScroll,
+@@ -909,6 +1036,11 @@ var Grid = function (_React$PureComponent) {
            visibleRowIndices: visibleRowIndices
          });
 
@@ -306,7 +314,7 @@ index e1b959a..7410c0a 100644
          // update the indices
          this._columnStartIndex = columnStartIndex;
          this._columnStopIndex = columnStopIndex;
-@@ -962,7 +1093,11 @@ var Grid = function (_React$PureComponent) {
+@@ -962,7 +1094,11 @@ var Grid = function (_React$PureComponent) {
        var scrollLeft = _ref6.scrollLeft,
            scrollTop = _ref6.scrollTop,
            totalColumnsWidth = _ref6.totalColumnsWidth,
@@ -319,7 +327,7 @@ index e1b959a..7410c0a 100644
 
        this._onScrollMemoizer({
          callback: function callback(_ref7) {
-@@ -973,19 +1108,26 @@ var Grid = function (_React$PureComponent) {
+@@ -973,19 +1109,26 @@ var Grid = function (_React$PureComponent) {
                onScroll = _props7.onScroll,
                width = _props7.width;
 
@@ -349,7 +357,7 @@ index e1b959a..7410c0a 100644
          }
        });
      }
-@@ -1325,6 +1467,15 @@ var Grid = function (_React$PureComponent) {
+@@ -1325,6 +1468,15 @@ var Grid = function (_React$PureComponent) {
          var totalColumnsWidth = instanceProps.columnSizeAndPositionManager.getTotalSize();
          var scrollBarSize = instanceProps.scrollbarSizeMeasured && totalColumnsWidth > width ? instanceProps.scrollbarSize : 0;
 

diff --git a/ts/components/ConversationList.tsx b/ts/components/ConversationList.tsx
@@ -4,7 +4,7 @@
 import React, { useRef, useEffect, useCallback, ReactNode } from 'react';
 import { List, ListRowRenderer } from 'react-virtualized';
 import classNames from 'classnames';
-import { pick } from 'lodash';
+import { get, pick } from 'lodash';
 
 import { missingCaseError } from '../util/missingCaseError';
 import { assert } from '../util/assert';
@@ -256,13 +256,25 @@ export const ConversationList: React.FC<PropsType> = ({
             'unblurredAvatarPath',
             'unreadCount',
           ]);
+          const { title, unreadCount, lastMessage } = itemProps;
+
           result = (
-            <ConversationListItem
-              {...itemProps}
-              key={key}
-              onClick={onSelectConversation}
-              i18n={i18n}
-            />
+            <div
+              aria-label={i18n('ConversationList__aria-label', {
+                lastMessage:
+                  get(lastMessage, 'text') ||
+                  i18n('ConversationList__last-message-undefined'),
+                title,
+                unreadCount: String(unreadCount),
+              })}
+            >
+              <ConversationListItem
+                {...itemProps}
+                key={key}
+                onClick={onSelectConversation}
+                i18n={i18n}
+              />
+            </div>
           );
           break;
         }
@@ -276,7 +288,10 @@ export const ConversationList: React.FC<PropsType> = ({
           break;
         case RowType.Header:
           result = (
-            <div className="module-conversation-list__item--header">
+            <div
+              className="module-conversation-list__item--header"
+              aria-label={i18n(row.i18nKey)}
+            >
               {i18n(row.i18nKey)}
             </div>
           );
@@ -304,8 +319,10 @@ export const ConversationList: React.FC<PropsType> = ({
       }
 
       return (
-        <span style={style} key={key}>
-          {result}
+        <span aria-rowindex={index + 1} role="row" style={style} key={key}>
+          <div role="gridcell" aria-colindex={1}>
+            {result}
+          </div>
         </span>
       );
     },

diff --git a/ts/components/conversationList/BaseConversationListItem.tsx b/ts/components/conversationList/BaseConversationListItem.tsx
@@ -212,6 +212,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
     if (onClick) {
       return (
         <button
+          aria-label={i18n('BaseConversationListItem__aria-label', { title })}
           className={classNames(
             commonClassNames,
             `${BASE_CLASS_NAME}--is-button`