Add author name to utility buttons

fixes VICE-2686
flag=react_discussions_post

Test Plan:
 - turn on discussion redesign ff
 - go to a discussion
 - turn on voice over
 - tab over reply, like, expansion, and thread action buttons
 > voice over should read author name as part accessible content

Change-Id: I7f72bcb5d78bf37bccf6d13dae6475f550f12d1b
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/290063
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Omar Soto-Fortuño <omar.soto@instructure.com>
Product-Review: Omar Soto-Fortuño <omar.soto@instructure.com>
QA-Review: Chawn Neal <chawn.neal@instructure.com>

ui/features/discussion_topics_post/react/components/ThreadActions/ThreadActions.js

@@ -71,7 +71,9 @@ export const ThreadActions = props => {
             trigger={
               <IconButton
                 size="small"
-                screenReaderLabel={I18n.t('Manage Discussion')}
+                screenReaderLabel={I18n.t('Manage Discussion by %{author}', {
+                  author: props.authorName
+                })}
                 renderIcon={IconMoreLine}
                 withBackground={false}
                 withBorder={false}
@@ -232,6 +234,7 @@ const renderMenuItem = (
 }
 
 ThreadActions.propTypes = {
+  authorName: PropTypes.string,
   id: PropTypes.string.isRequired,
   onMarkAllAsUnread: PropTypes.func,
   onMarkAllAsRead: PropTypes.func,

ui/features/discussion_topics_post/react/components/ThreadingToolbar/Expansion.js

@@ -49,10 +49,18 @@ export function Expansion({...props}) {
           data-testid="expand-button"
           interaction={props.isReadOnly ? 'disabled' : 'enabled'}
         >
-          <ScreenReaderContent>
+          <ScreenReaderContent
+            data-testid={
+              props.isExpanded ? 'reply-expansion-btn-collapse' : 'reply-expansion-btn-expand'
+            }
+          >
             {props.isExpanded
-              ? I18n.t('Collapse discussion thread')
-              : I18n.t('Expand discussion thread')}
+              ? I18n.t('Collapse discussion thread from %{author}', {
+                  author: props.authorName
+                })
+              : I18n.t('Expand discussion thread from %{author}', {
+                  author: props.authorName
+                })}
           </ScreenReaderContent>
           <Text
             weight="bold"
@@ -84,6 +92,10 @@ Expansion.propTypes = {
    * Key consumed by ThreadingToolbar's InlineList
    */
   delimiterKey: PropTypes.string.isRequired,
+  /**
+   * Name of author of the post being replied to
+   */
+  authorName: PropTypes.string,
   /**
    * Disable/Enable for the button
    */

ui/features/discussion_topics_post/react/components/ThreadingToolbar/__tests__/Expansion.test.js

@@ -66,16 +66,16 @@ describe('Expansion', () => {
   })
 
   it('indicates expansion status', () => {
-    const {queryByText, rerender} = setup({isExpanded: false})
-    expect(queryByText('Expand discussion thread')).toBeTruthy()
-    expect(queryByText('Collapse discussion thread')).toBeFalsy()
+    const {queryByTestId, rerender} = setup({isExpanded: false})
+    expect(queryByTestId('reply-expansion-btn-expand')).toBeTruthy()
+    expect(queryByTestId('reply-expansion-btn-collapse')).toBeFalsy()
 
     rerender(
       <Expansion onClick={Function.prototype} isExpanded delimiterKey="expansion" expandText="" />
     )
 
-    expect(queryByText('Expand discussion thread')).toBeFalsy()
-    expect(queryByText('Collapse discussion thread')).toBeTruthy()
+    expect(queryByTestId('reply-expansion-btn-expand')).toBeFalsy()
+    expect(queryByTestId('reply-expansion-btn-collapse')).toBeTruthy()
   })
 
   it('displays as readonly if isReadOnly is true', () => {

ui/features/discussion_topics_post/react/containers/DiscussionThreadContainer/DiscussionThreadContainer.js

@@ -243,6 +243,7 @@ export const DiscussionThreadContainer = props => {
       <ThreadingToolbar.Expansion
         key={`expand-${props.discussionEntry._id}`}
         delimiterKey={`expand-delimiter-${props.discussionEntry._id}`}
+        authorName={getDisplayName(props.discussionEntry)}
         expandText={
           <ReplyInfo
             replyCount={props.discussionEntry.rootEntryParticipantCounts?.repliesCount}
@@ -357,6 +358,7 @@ export const DiscussionThreadContainer = props => {
                       filter !== 'drafts' && !props.discussionEntry.deleted ? (
                         <ThreadActions
                           id={props.discussionEntry._id}
+                          authorName={getDisplayName(props.discussionEntry)}
                           isUnread={!props.discussionEntry.entryParticipant?.read}
                           onToggleUnread={toggleUnread}
                           onDelete={props.discussionEntry.permissions?.delete ? onDelete : null}

ui/features/discussion_topics_post/react/containers/IsolatedThreadsContainer/IsolatedThreadsContainer.js

@@ -307,6 +307,7 @@ const IsolatedThreadContainer = props => {
       <ThreadingToolbar.Expansion
         key={`expand-${props.discussionEntry.id}`}
         delimiterKey={`expand-delimiter-${props.discussionEntry.id}`}
+        authorName={getDisplayName(props.discussionEntry)}
         expandText={I18n.t('View Replies')}
         isExpanded={false}
         onClick={() => props.onOpenIsolatedView(props.discussionEntry._id, null, false)}