[10-10CG] Add aria-live div to Show More Facilities functionality

src/applications/caregivers/components/FormFields/FacilitySearch.jsx

@@ -19,6 +19,7 @@
   const [searchInputError, setSearchInputError] = useState(null);
   const [facilitiesListError, setFacilitiesListError] = useState(null);
   const [facilities, setFacilities] = useState([]);
+  const [newFacilitiesCount, setNewFacilitiesCount] = useState(0);
   const [pagination, setPagination] = useState({
     currentPage: 0,
     totalEntries: 0,
@@ -35,6 +36,14 @@
     return facilities?.length < pagination.totalEntries;
   };
 
+  const ariaLiveMessage = () => {
+    if (newFacilitiesCount > 0) {
+      const facilitySuffix = newFacilitiesCount === 1 ? 'y' : 'ies';
+      return `${newFacilitiesCount} new facilit${facilitySuffix} loaded`;
+    }
+    return '';
+  };
+
   const isReviewPage = () => {
     const urlParams = new URLSearchParams(window.location.search);
     return urlParams.get('review') === 'true';
@@ -198,6 +207,7 @@
 
   const showMoreFacilities = async e => {
     e.preventDefault();
+    setNewFacilitiesCount(0);
     setLoadingMoreFacilities(true);
     const facilitiesResponse = await fetchFacilities({
       ...coordinates,
@@ -213,6 +223,7 @@
     }
 
     setFacilities([...facilities, ...facilitiesResponse.facilities]);
+    setNewFacilitiesCount(facilitiesResponse.facilities.length);
     setPagination(facilitiesResponse.meta.pagination);
     setSubmittedQuery(query);
     setLoadingMoreFacilities(false);
@@ -236,9 +247,16 @@
       return (
         <>
           <FacilityList {...facilityListProps} />
+          <div
+            aria-live="polite"
+            role="status"
+            className="vads-u-visibility--screen-reader"
+          >
+            {ariaLiveMessage()}
+          </div>
           {loadingMoreFacilities && loader()}
           {hasMoreFacilities() && (
             <button
               type="button"
               className="va-button-link"
               onClick={showMoreFacilities}

src/applications/caregivers/tests/unit/components/FormFields/FacilitySearch.unit.spec.js

@@ -78,6 +78,7 @@ describe('CG <FacilitySearch>', () => {
       radioList: container.querySelector('va-radio'),
       searchInputError: queryByRole('alert'),
       moreFacilities: queryByText('Load more facilities'),
+      ariaLiveStatus: queryByRole('status'),
       formNavButtons: {
         back: getByText('Back'),
         forward: getByText('Continue'),
@@ -100,6 +101,7 @@ describe('CG <FacilitySearch>', () => {
       expect(selectors().input).to.exist;
       expect(selectors().radioList).not.to.exist;
       expect(selectors().moreFacilities).not.to.exist;
+      expect(selectors().ariaLiveStatus).not.to.exist;
       expect(queryByText(content['form-facilities-search-label'])).to.exist;
       expect(queryByText('(*Required)')).to.exist;
     });
@@ -138,6 +140,7 @@ describe('CG <FacilitySearch>', () => {
       await waitFor(() => {
         expect(selectors().radioList).to.exist;
         expect(selectors().loader).to.not.exist;
+        expect(selectors().ariaLiveStatus.textContent).to.eq('');
         expect(selectors().input).to.not.have.attr('error');
         sinon.assert.calledWith(mapboxStub, 'Tampa');
         sinon.assert.calledWith(facilitiesStub, {
@@ -382,7 +385,7 @@ describe('CG <FacilitySearch>', () => {
     });
 
     context('more facilities buttons', () => {
-      it('successfully loads more facilities on click', async () => {
+      it('successfully loads 1 more facility on click', async () => {
         const { props, mockStore } = getData({});
         const { selectors, getByText, container } = subject({
           props,
@@ -405,19 +408,83 @@ describe('CG <FacilitySearch>', () => {
           expect(selectors().loader).to.not.exist;
           expect(selectors().input).to.not.have.attr('error');
           expect(getByText(/Showing 1-1 of 1 facilities for/)).to.exist;
+          expect(selectors().ariaLiveStatus.textContent).to.eq('');
         });
 
         await waitFor(() => {
           userEvent.click(selectors().moreFacilities);
           expect(selectors().radioList).to.exist;
           expect(selectors().loader).to.exist;
+          expect(selectors().ariaLiveStatus.textContent).to.eq('');
         });
 
         await waitFor(() => {
           expect(selectors().radioList).to.exist;
           expect(selectors().loader).to.not.exist;
           expect(getByText(/Showing 1-2 of 2 facilities for/)).to.exist;
           expect(selectors().input).to.not.have.attr('error');
+          expect(selectors().ariaLiveStatus.textContent).to.eq(
+            '1 new facility loaded',
+          );
+        });
+
+        await waitFor(() => {
+          sinon.assert.calledWith(mapboxStub, 'Tampa');
+          sinon.assert.calledWith(facilitiesStub, {
+            lat,
+            long,
+            perPage,
+            radius,
+            page: 2,
+          });
+          expect(mapboxStub.callCount).to.equal(1);
+          // This is 3 because there is an existing bug that using submit with the va-search-input component triggers two requests
+          // https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/3117
+          expect(facilitiesStub.callCount).to.equal(3);
+        });
+      });
+
+      it('successfully loads 2 more facilities on click', async () => {
+        const { props, mockStore } = getData({});
+        const { selectors, getByText, container } = subject({
+          props,
+          mockStore,
+        });
+
+        mapboxStub.resolves(mapBoxSuccessResponse);
+        facilitiesStub
+          .onFirstCall()
+          .resolves(mockFetchChildFacilityWithCaregiverSupportResponse);
+        facilitiesStub.onSecondCall().resolves(mockFetchFacilitiesResponse);
+
+        await waitFor(() => {
+          inputVaSearchInput(container, 'Tampa', selectors().input);
+          expect(selectors().loader).to.exist;
+        });
+
+        await waitFor(() => {
+          expect(selectors().radioList).to.exist;
+          expect(selectors().loader).to.not.exist;
+          expect(selectors().input).to.not.have.attr('error');
+          expect(getByText(/Showing 1-1 of 1 facilities for/)).to.exist;
+          expect(selectors().ariaLiveStatus.textContent).to.eq('');
+        });
+
+        await waitFor(() => {
+          userEvent.click(selectors().moreFacilities);
+          expect(selectors().radioList).to.exist;
+          expect(selectors().loader).to.exist;
+          expect(selectors().ariaLiveStatus.textContent).to.eq('');
+        });
+
+        await waitFor(() => {
+          expect(selectors().radioList).to.exist;
+          expect(selectors().loader).to.not.exist;
+          expect(getByText(/Showing 1-3 of 3 facilities for/)).to.exist;
+          expect(selectors().input).to.not.have.attr('error');
+          expect(selectors().ariaLiveStatus.textContent).to.eq(
+            '2 new facilities loaded',
+          );
         });
 
         await waitFor(() => {