[ACS-1882] Keyboard Navigation: Personal files: Wrong focus order when adding a comment in "Details" section (#11521)

lib/core/src/lib/comments/comments.component.html

@@ -5,6 +5,7 @@
     <div *ngIf="!readOnly" class="adf-comments-input-container adf-comments-divider">
             <mat-form-field>
                 <textarea
+                    #commentInput
                     matInput
                     id="comment-input"
                     class="adf-text-text-area"

lib/core/src/lib/comments/comments.component.spec.ts

@@ -366,5 +366,24 @@ describe('CommentsComponent', () => {
             fixture.detectChanges();
             expect(getAddCommentButton().disabled).toBeFalse();
         });
+
+        it('should return focus to comment input after successfully adding a comment', async () => {
+            const comment = 'Test Comment';
+            component.commentControl.setValue(comment);
+            addCommentSpy.and.returnValue(commentsResponseMock.addComment(comment));
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const commentInput = testingUtils.getByCSS('#comment-input').nativeElement;
+            spyOn(commentInput, 'focus');
+
+            component.addComment();
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            expect(commentInput.focus).toHaveBeenCalled();
+        });
     });
 });

lib/core/src/lib/comments/comments.component.ts

@@ -16,7 +16,17 @@
  */
 
 import { CommentModel } from '../models/comment.model';
-import { Component, EventEmitter, inject, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import {
+    Component, ElementRef,
+    EventEmitter,
+    inject,
+    Input,
+    OnChanges,
+    Output,
+    SimpleChanges,
+    ViewChild,
+    ViewEncapsulation
+} from '@angular/core';
 import { ADF_COMMENTS_SERVICE } from './interfaces/comments.token';
 import { CommentsService } from './interfaces/comments-service.interface';
 import { CommonModule } from '@angular/common';
@@ -44,6 +54,8 @@ import { CommentListComponent } from './comment-list';
     encapsulation: ViewEncapsulation.None
 })
 export class CommentsComponent implements OnChanges {
+    @ViewChild('commentInput') commentInput: ElementRef<HTMLTextAreaElement>;
+
     /** The numeric ID of the task. */
     @Input()
     id: string;
@@ -117,6 +129,7 @@ export class CommentsComponent implements OnChanges {
                 this.addToComments(res);
                 this.commentControl.reset();
                 this.commentAdded.emit(res);
+                this.commentInput?.nativeElement?.focus();
             },
             error: (err) => {
                 this.error.emit(err);