Issue #807: fix accessibility search and total results

smclab · Jan 8, 2024 · 9f1e488 · 9f1e488
1 parent a2221d9
commit 9f1e488
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 38 deletions.
diff --git a/js-packages/search-frontend/src/components/Search.tsx b/js-packages/search-frontend/src/components/Search.tsx
@@ -40,6 +40,8 @@ type SearchProps = {
   mobileVersion?: boolean;
   btnSearch?: boolean;
   defaultValue?: string;
+  actionOnClick?():void; 
+  customMessageSearch?: string;
   isSearchOnInputChange?: boolean;
   htmlKey?: string | undefined | null;
   textOnQueryStringOnCLick?: string | null | undefined;
@@ -65,7 +67,9 @@ export function Search({
   saveSearchQuery,
   defaultValue,
   htmlKey,
+  customMessageSearch,
   messageSearchIsVisible = true,
+  actionOnClick,
 }: SearchProps) {
   const autoSelect = configuration.searchAutoselect;
   const replaceText = configuration.searchReplaceText;
@@ -337,6 +341,9 @@ export function Search({
                 }
               }}
               onKeyDown={(event) => {
+                if(event.key==="Enter" && actionOnClick){
+                  actionOnClick();
+                }
                 const span =
                   openedDropdown &&
                   spans.find(
@@ -441,7 +448,7 @@ export function Search({
             ></input>
             {messageSearchIsVisible && (
               <p className="visually-hidden" id="message-search">
-                {t(
+                {customMessageSearch || t(
                   "insert-text-to-set-the-value-or-use-up-and-down-arrow-keys-to-navigate-the-suggestion-box",
                 ) ||
                   "insert text to set the value or use up and down arrow keys to navigate the suggestion box"}

diff --git a/js-packages/search-frontend/src/components/TotalResults.tsx b/js-packages/search-frontend/src/components/TotalResults.tsx
@@ -1,11 +1,19 @@
 import React from "react";
 
 export function TotalResults({
-  totalResult
+  totalResult,
+  saveTotalResultState,
 }: {
   totalResult: number | null;
+  saveTotalResultState?: React.Dispatch<React.SetStateAction<number | null>>;
 }) {
-  return (
-    <div className="openk9-totalResults-container">{totalResult}</div>
-  )
-}
+  if (saveTotalResultState && totalResult) {
+    saveTotalResultState(totalResult);
+  } else {
+    if (saveTotalResultState && totalResult!==null) {
+      saveTotalResultState(0);
+    }
+  }
+
+  return <div className="openk9-totalResults-container">{totalResult}</div>;
+}
diff --git a/js-packages/search-frontend/src/embeddable/Main.tsx b/js-packages/search-frontend/src/embeddable/Main.tsx
@@ -77,11 +77,11 @@ export function Main({
   const [isMobileMinWidth, setIsMobileMinWIdth] = React.useState(false);
   const [isVisibleFilters, setIsVisibleFilters] = React.useState(false);
   const [languageSelect, setLanguageSelect] = React.useState("");
-  const [selectionsState, selectionsDispatch] = useSelections({useKeycloak});
+  const [selectionsState, selectionsDispatch] = useSelections({ useKeycloak });
   const [sortAfterKey, setSortAfterKey] = React.useState("");
   const [totalResult, setTotalResult] = React.useState<number | null>(null);
-  const [prevSearchQuery,setPrevSearchQuery] =React.useState([]);
-  const [prevSearchQueryMobile,setPrevSearchQueryMobile] =React.useState([]);
+  const [prevSearchQuery, setPrevSearchQuery] = React.useState([]);
+  const [prevSearchQueryMobile, setPrevSearchQueryMobile] = React.useState([]);
 
   const { dateRange, setDateRange, dateTokens } = useDateTokens();
   const { filterTokens, addFilterToken, removeFilterToken } = useFilters({
@@ -128,11 +128,20 @@ export function Main({
         selectionsDispatch,
         selectionsState,
       });
-  const { detail, setDetail } = useDetails(searchQuery,setPrevSearchQuery,prevSearchQuery);
+  const { detail, setDetail } = useDetails(
+    searchQuery,
+    setPrevSearchQuery,
+    prevSearchQuery,
+  );
   const { detailMobile, setDetailMobile, idPreview, setIdPreview } =
-    useDetailsMobile(searchQuery,prevSearchQueryMobile,setPrevSearchQueryMobile);
-  const {dynamicFilters,languageQuery,whoIsDynamicResponse,languages}=recoveryDataBackEnd();
-
+    useDetailsMobile(
+      searchQuery,
+      prevSearchQueryMobile,
+      setPrevSearchQueryMobile,
+    );
+  const { dynamicFilters, languageQuery, whoIsDynamicResponse, languages } =
+    recoveryDataBackEnd();
+
   //Effect
   React.useEffect(() => {
     const checkIfMobile = () => {
@@ -168,7 +177,7 @@ export function Main({
       setDynamicData(newData);
     }
   }, [whoIsDynamicResponse.isSuccess, whoIsDynamicResponse.data]);
-  
+
   React.useEffect(() => {
     if (languageQuery.data?.value) {
       i18n.changeLanguage(
@@ -218,7 +227,13 @@ export function Main({
             isSearchOnInputChange={isSearchOnInputChange}
             defaultValue={configuration.searchConfigurable?.defaultValue ?? ""}
             htmlKey={configuration.searchConfigurable?.htmlKey}
-            messageSearchIsVisible={configuration?.searchConfigurable?.messageSearchIsVisible ?? true}
+            messageSearchIsVisible={
+              configuration?.searchConfigurable?.messageSearchIsVisible ?? true
+            }
+            customMessageSearch={
+              configuration?.searchConfigurable?.customMessageSearch
+            }
+            actionOnClick={configuration?.searchConfigurable?.actionOnClick}
           />
         </I18nextProvider>,
         configuration.searchConfigurable
@@ -378,6 +393,19 @@ export function Main({
         </I18nextProvider>,
         configuration.totalResult,
       )}
+      {renderPortal(
+        <I18nextProvider i18n={i18next}>
+          <TotalResults
+            totalResult={totalResult}
+            saveTotalResultState={
+              configuration.totalResultConfigurable?.saveTotalResultState
+            }
+          />
+        </I18nextProvider>,
+        configuration.totalResultConfigurable
+          ? configuration.totalResultConfigurable.element
+          : null,
+      )}
       {renderPortal(
         <I18nextProvider i18n={i18next}>
           <TotalResultsMobile totalResult={totalResult} />
@@ -953,9 +981,9 @@ function useTabs(
   return { tabTokens, tabs, selectedTabIndex, setSelectedTabIndex };
 }
 
-function recoveryDataBackEnd(){
-    const client = useOpenK9Client();
-    const dynamicFilters = useQuery(["handle-dynamic-filters", {}], async () => {
+function recoveryDataBackEnd() {
+  const client = useOpenK9Client();
+  const dynamicFilters = useQuery(["handle-dynamic-filters", {}], async () => {
     return await client.handle_dynamic_filters();
   });
   const languageQuery = useQuery(["language", {}], async () => {
@@ -970,7 +998,7 @@ function recoveryDataBackEnd(){
   const languages = useQuery(["date-label-languages", {}], async () => {
     return await client.getLanguages();
   });
-  return {dynamicFilters,languageQuery,whoIsDynamicResponse,languages}
+  return { dynamicFilters, languageQuery, whoIsDynamicResponse, languages };
 }
 
 function useFilters({
@@ -1097,14 +1125,18 @@ function useDateTokens() {
   return { dateRange, setDateRange, dateTokens };
 }
 
-function useDetails(searchQuery: Array<SearchToken>,setPrevSearchQuery:any,prevSearchQuery:Array<SearchToken>) {
+function useDetails(
+  searchQuery: Array<SearchToken>,
+  setPrevSearchQuery: any,
+  prevSearchQuery: Array<SearchToken>,
+) {
   const [detail, setDetail] = React.useState<GenericResultItem<unknown> | null>(
     null,
   );
   React.useEffect(() => {
-     if (prevSearchQuery !== null && !isEqual(searchQuery, prevSearchQuery)) {
+    if (prevSearchQuery !== null && !isEqual(searchQuery, prevSearchQuery)) {
       setDetail(null);
-     }
+    }
     setPrevSearchQuery(searchQuery);
   }, [searchQuery, prevSearchQuery]);
   return { detail, setDetail };
@@ -1127,17 +1159,24 @@ function renderPortal(
   );
 }
 
-function useDetailsMobile(searchQuery: Array<SearchToken>,prevSearchQueryMobile:Array<SearchToken>,setPrevSearchQueryMobile:any) {
+function useDetailsMobile(
+  searchQuery: Array<SearchToken>,
+  prevSearchQueryMobile: Array<SearchToken>,
+  setPrevSearchQueryMobile: any,
+) {
   const [idPreview, setIdPreview] = React.useState("");
   const [detailMobile, setDetailMobile] =
     React.useState<GenericResultItem<unknown> | null>(null);
   React.useEffect(() => {
-    if (prevSearchQueryMobile !== null && !isEqual(searchQuery, prevSearchQueryMobile)) {
-    setDetailMobile(null);
+    if (
+      prevSearchQueryMobile !== null &&
+      !isEqual(searchQuery, prevSearchQueryMobile)
+    ) {
+      setDetailMobile(null);
     }
-    setPrevSearchQueryMobile(searchQuery)
-  }, [searchQuery,prevSearchQueryMobile]);
-   
+    setPrevSearchQueryMobile(searchQuery);
+  }, [searchQuery, prevSearchQueryMobile]);
+
   return { detailMobile, setDetailMobile, idPreview, setIdPreview };
 }
 
@@ -1371,8 +1410,8 @@ function factoryWhoIsDynamic({
   if (whoIsDynamicResponse.refreshOnTab) {
     resultArray.push("tab");
   }
-  if(whoIsDynamicResponse.refreshOnDate){
-    resultArray.push("date")
+  if (whoIsDynamicResponse.refreshOnDate) {
+    resultArray.push("date");
   }
   return resultArray;
 }
diff --git a/js-packages/search-frontend/src/embeddable/entry.tsx b/js-packages/search-frontend/src/embeddable/entry.tsx
@@ -205,14 +205,14 @@ type DataRangePickerVerticalProps = {
   element: Element | string | null;
   start?: any;
   end?: any;
-  readOnly?:boolean;
+  readOnly?: boolean;
 };
 
 type ResultListProps = {
   element: Element | string | null;
   changeOnOver: boolean;
   counterIsVisible?: boolean;
-  label?:string;
+  label?: string;
 };
 
 type SortResultConfigurableProps = {
@@ -233,6 +233,8 @@ type SearchProps = {
   defaultValue?: string | undefined | null;
   htmlKey?: string | undefined | null;
   messageSearchIsVisible?: boolean;
+  customMessageSearch?: string;
+  actionOnClick?(): void;
 };
 
 type FilterProps = {
@@ -250,11 +252,16 @@ type ResulListPaginationProps = {
 type TabsProps = {
   element: Element | string | null;
   onAction(): void;
-  scrollMode?:boolean;
+  scrollMode?: boolean;
   speed?: number;
   distance?: number;
   step?: number;
-  pxHiddenRightArrow?:number;
+  pxHiddenRightArrow?: number;
+};
+
+type totalResultProps = {
+  element: Element | string | null;
+  saveTotalResultState?: React.Dispatch<React.SetStateAction<number | null>>;
 };
 
 export type Configuration = {
@@ -272,7 +279,7 @@ export type Configuration = {
   useKeycloak: boolean;
   useQueryString: boolean;
   useFilterConfiguration: boolean;
-  waitKeycloackForToken:boolean;
+  waitKeycloackForToken: boolean;
   // element types
   activeFilters: Element | string | null;
   calendar: Element | string | null;
@@ -287,7 +294,7 @@ export type Configuration = {
   tabs: Element | string | null;
   totalResult: Element | string | null;
   totalResultMobile: Element | string | null;
-  removeFilters: Element |string|null;
+  removeFilters: Element | string | null;
   // configurable types
   calendarMobile: CalendarMobileConfiguration | null;
   dataRangePicker: DataRangePickerProps | null;
@@ -304,6 +311,7 @@ export type Configuration = {
   sortableConfigurable: SortableProps | null;
   sortResultConfigurable: SortResultConfigurableProps | null;
   tabsConfigurable: TabsProps | null;
+  totalResultConfigurable: totalResultProps | null;
   // functions
   changeSortResult: (
     sort: Array<RestApi.SortField>,
@@ -350,11 +358,12 @@ const defaultConfiguration: Configuration = {
   tenant: null,
   token: null,
   totalResult: null,
+  totalResultConfigurable: null,
   totalResultMobile: null,
   useKeycloak: true,
   useQueryString: true,
-  useFilterConfiguration:true,
-  waitKeycloackForToken:false,
+  useFilterConfiguration: true,
+  waitKeycloackForToken: false,
   changeSortResult: (sort) => sort,
   overrideTabs: (tabs) => tabs,
 };