IAEMOD-6049: Address actions menu and horizontal filter 508 issues

apps/sam-design-system-site/src/sds-styles.scss

@@ -6,5 +6,3 @@ $theme-image-path: '~@gsa-sam/sam-styles/src/img';
 $theme-font-path: '~@gsa-sam/sam-styles/src/fonts';
 
 @import '~@gsa-sam/sam-styles/src/stylesheets/sam';
-
-

libs/packages/components/src/lib/actions-menu/actions-menu.component.html

@@ -5,6 +5,7 @@
   [class.sds-button--shadow]="model.trigger.shadow"
   [class.sds-button--small]="size === 'sm'"
   [sdsMenuTriggerFor]="menu"
+  role="button"
 >
   <usa-icon [icon]="'three-dots-vertical'" [size]="'1x'"></usa-icon>
   <span class="usa-sr-only">{{ screenReaderText }}</span>

libs/packages/sam-formly/src/lib/formly-filters/sds-filters.component.html

@@ -73,6 +73,7 @@
 
 <!-- Chip Display -->
 <ng-container *ngIf="displayChips">
+  <p class="usa-sr-only" id="chip-status-announce" aria-live="polite">{{ chipStatusText }}</p>
   <div *ngFor="let chip of chips" class="width-auto sds-tag sds-tag--chip sds-tag--input margin-right-2">
     <div class="sds--tag__item">
       <sds-readonly-container

libs/packages/sam-formly/src/lib/formly-filters/sds-filters.component.ts

@@ -22,7 +22,7 @@ import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { FormlyUtilsService, ReadonlyDataType } from '../formly/services/formly-utils.service';
 import { SdsFormlyTypes } from '../formly/models/formly-types';
-import { SdsDialogRef, SdsDialogService, SDS_DIALOG_DATA } from '@gsa-sam/components';
+import { SdsDialogRef, SdsDialogService } from '@gsa-sam/components';
 import { cloneDeep } from 'lodash-es';
 import { FormlyValueChangeEvent } from '@ngx-formly/core/lib/components/formly.field.config';
 @Component({
@@ -117,6 +117,8 @@ export class SdsFiltersComponent implements OnInit, OnChanges {
   chips: ReadonlyDataType[] = [];
   dialogRef: SdsDialogRef<any>;
 
+  chipStatusText = '';
+
   // Snapshot of model before filter dialog opens during horizontal responsive format
   _modelSnapshot: any;
 
@@ -428,6 +430,9 @@ export class SdsFiltersComponent implements OnInit, OnChanges {
       });
     });
 
+    const { added, deleted } = this.findChipDifferences(this.chips, allChips);
+    this.chipAdded(added);
+    this.chipRemoved(deleted);
     this.chips = allChips;
   }
 
@@ -479,4 +484,56 @@ export class SdsFiltersComponent implements OnInit, OnChanges {
     Object.assign(objectValue, ...existingValues);
     field.formControl.setValue(objectValue);
   }
+
+  chipAdded(added: ReadonlyDataType | ReadonlyDataType[]): void {
+    if (!this.displayChips) {
+      return;
+    }
+    let statusText = '';
+    if (Array.isArray(added)) {
+      if (added.length === 0) {
+        return;
+      }
+      for (let i = 0; i < added.length; i++) {
+        statusText = statusText.concat(`Filter ${added[i].label} ${added[i].srValue} added.`);
+      }
+    } else {
+      statusText = `Filter ${added.label} ${added.srValue} added.`;
+    }
+    this.chipStatusText = statusText;
+  }
+  chipRemoved(removed: ReadonlyDataType | ReadonlyDataType[]): void {
+    if (!this.displayChips) {
+      return;
+    }
+    let statusText = '';
+    if (Array.isArray(removed)) {
+      if (removed.length === 0) {
+        return;
+      }
+      for (let i = 0; i < removed.length; i++) {
+        statusText = statusText.concat(`Filter ${removed[i].label} ${removed[i].srValue} removed.`);
+      }
+    } else {
+      statusText = `Filter ${removed.label} ${removed.srValue} removed.`;
+    }
+    this.chipStatusText = statusText;
+  }
+  findChipDifferences(
+    oldChips: ReadonlyDataType[],
+    newChips: ReadonlyDataType[]
+  ): {
+    added: ReadonlyDataType[];
+    deleted: ReadonlyDataType[];
+  } {
+    const deleted = oldChips.filter(
+      (oldChip) => newChips.findIndex((newChip) => this.sameChip(newChip, oldChip)) === -1
+    );
+    const added = newChips.filter((newChip) => oldChips.findIndex((oldChip) => this.sameChip(newChip, oldChip)) === -1);
+    return { added, deleted };
+  }
+
+  sameChip(chipA: ReadonlyDataType, chipB: ReadonlyDataType): boolean {
+    return chipA.srValue === chipB.srValue;
+  }
 }

libs/packages/sam-formly/src/lib/formly/services/formly-utils.service.ts

@@ -9,6 +9,7 @@ export interface ReadonlyDataType {
   value: any;
   readonlyOptions: ReadonlyOptions;
   formlyKey: string;
+  srValue: string;
 }
 @Injectable()
 export class FormlyUtilsService {