Error in activity reporter not visible, need to scroll to the top

Add a scrollToMessage method for the vcd-banner-activity-reporter. This increases the visibility of success and error messages by having them in the view of the user.

Testing Done:
- Edited examples locally to have a page where the error/success message is not visible.
- Observed that the scrolling to the error/success message worked.

Signed-off-by: Juliana Sica <[email protected]>

projects/components/CHANGELOG.MD

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix ErrorBannerExampleComponent when closed with X button
 ### Changed
 * errorMessage reset value is `null` instead of `undefined`
+* Add a scrollToMessage method for the vcd-banner-activity-reporter
 
 ## [15.0.1-dev.12]
 ### Fixed

projects/components/src/common/activity-reporter/banner-activity-reporter.component.ts

@@ -49,6 +49,7 @@ export class BannerActivityReporterComponent extends ActivityReporter {
     reportError(errorText: string): void {
         this.errorText = errorText;
         this.running = false;
+        this.scrollToMessage();
     }
 
     /**
@@ -59,6 +60,7 @@ export class BannerActivityReporterComponent extends ActivityReporter {
             this.successMessage = successMessage;
         }
         this.running = false;
+        this.scrollToMessage();
     }
 
     /**
@@ -75,6 +77,14 @@ export class BannerActivityReporterComponent extends ActivityReporter {
         this.successMessage = null;
     }
 
+    /**
+     * To view error and success messages, scroll to the top of the page for visibility
+     */
+    scrollToMessage(): void {
+        const element = document.querySelector('vcd-banner-activity-reporter');
+        element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
+    }
+
     /*
      * Reset the banner activity state manually.
      *