fix(redmine 1306603): fix pr review from Tony

Smile-SA · Aug 8, 2024 · 9c16cc3 · 9c16cc3
1 parent 1becc73
commit 9c16cc3
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 16 deletions.
diff --git a/packages/haring-react-table/src/Components/Table/Table.mock.tsx b/packages/haring-react-table/src/Components/Table/Table.mock.tsx
@@ -70,6 +70,9 @@ export const tableMock: ITableProps<Record<string, unknown>> = {
       onAction: action('Delete'),
     },
   ],
+  ariaLabels: {
+    otherActions: 'Other actions',
+  },
   columns: [
     {
       accessorKey: 'id',

diff --git a/packages/haring-react-table/src/Components/Table/Table.tsx b/packages/haring-react-table/src/Components/Table/Table.tsx
@@ -37,9 +37,14 @@ import {
 
 import classes from './Table.module.css';
 
+export interface ITableAriaLabels {
+  otherActions: string;
+}
+
 export interface ITableProps<Data extends Record<string, unknown>>
   extends MRT_TableOptions<Data> {
   actions?: ITableAction<Data>[];
+  ariaLabels?: ITableAriaLabels;
   maxVisibleActions?: number;
   menuLabel?: string;
   paginationProps?: Partial<IPaginationProps>;
@@ -64,6 +69,7 @@ export function Table<Data extends Record<string, unknown>>(
 ): ReactElement {
   const {
     actions = [],
+    ariaLabels,
     icons,
     initialState,
     menuLabel = 'Other actions',
@@ -193,14 +199,14 @@ export function Table<Data extends Record<string, unknown>>(
           {visibleRowActions.map((action, index) => (
             <Tooltip
               key={`${index + index}`}
-              label={getActionLabel(action, row)}
+              label={getAriaLabel(action, row, 'actionLabel')}
               {...tooltipProps}
             >
               <ActionIcon
                 aria-label={
-                  getAriaLabel(action, row)
-                    ? getAriaLabel(action, row)
-                    : getActionLabel(action, row)
+                  getAriaLabel(action, row, 'ariaLabel')
+                    ? getAriaLabel(action, row, 'ariaLabel')
+                    : getAriaLabel(action, row, 'actionLabel')
                 }
                 className={classes.action}
                 onClick={() => handleAction(row, index)}
@@ -225,7 +231,7 @@ export function Table<Data extends Record<string, unknown>>(
             >
               <Menu.Target>
                 <ActionIcon
-                  aria-label="other actions"
+                  aria-label={ariaLabels?.otherActions || 'Other actions'}
                   className={`${classes.menuButton} ${classes.action}`}
                   radius={4}
                   type="button"

diff --git a/...haring-react-table/src/Components/TableGridView/__snapshots__/TableGridView.test.tsx.snap b/...haring-react-table/src/Components/TableGridView/__snapshots__/TableGridView.test.tsx.snap
@@ -1152,7 +1152,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       aria-controls="mantine-f4bipx4bi-dropdown"
                       aria-expanded="false"
                       aria-haspopup="menu"
-                      aria-label="other actions"
+                      aria-label="Other actions"
                       class="haring-focus haring-active undefined undefined m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       id="mantine-f4bipx4bi-target"
@@ -1365,7 +1365,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       aria-controls="mantine-f4bipx4bi-dropdown"
                       aria-expanded="false"
                       aria-haspopup="menu"
-                      aria-label="other actions"
+                      aria-label="Other actions"
                       class="haring-focus haring-active undefined undefined m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       id="mantine-f4bipx4bi-target"
@@ -1578,7 +1578,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       aria-controls="mantine-f4bipx4bi-dropdown"
                       aria-expanded="false"
                       aria-haspopup="menu"
-                      aria-label="other actions"
+                      aria-label="Other actions"
                       class="haring-focus haring-active undefined undefined m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       id="mantine-f4bipx4bi-target"
@@ -1791,7 +1791,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       aria-controls="mantine-f4bipx4bi-dropdown"
                       aria-expanded="false"
                       aria-haspopup="menu"
-                      aria-label="other actions"
+                      aria-label="Other actions"
                       class="haring-focus haring-active undefined undefined m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       id="mantine-f4bipx4bi-target"
@@ -2004,7 +2004,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       aria-controls="mantine-f4bipx4bi-dropdown"
                       aria-expanded="false"
                       aria-haspopup="menu"
-                      aria-label="other actions"
+                      aria-label="Other actions"
                       class="haring-focus haring-active undefined undefined m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       id="mantine-f4bipx4bi-target"
@@ -2217,7 +2217,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       aria-controls="mantine-f4bipx4bi-dropdown"
                       aria-expanded="false"
                       aria-haspopup="menu"
-                      aria-label="other actions"
+                      aria-label="Other actions"
                       class="haring-focus haring-active undefined undefined m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       id="mantine-f4bipx4bi-target"
@@ -2437,7 +2437,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       aria-controls="mantine-f4bipx4bi-dropdown"
                       aria-expanded="false"
                       aria-haspopup="menu"
-                      aria-label="other actions"
+                      aria-label="Other actions"
                       class="haring-focus haring-active undefined undefined m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       id="mantine-f4bipx4bi-target"

diff --git a/packages/haring-react-table/src/helpers/table.ts b/packages/haring-react-table/src/helpers/table.ts
@@ -2,6 +2,8 @@ import type { ITableAction, ITableConfirmAction } from '../types';
 import type { MRT_Row } from 'mantine-react-table';
 import type { ReactNode } from 'react';
 
+export type ILabelProperty = 'actionLabel' | 'ariaLabel';
+
 export function isConfirmAction<Data extends Record<string, unknown>>(
   action: ITableAction<Data>,
 ): action is ITableConfirmAction<Data> {
@@ -29,7 +31,11 @@ export function getActionLabel<Data extends Record<string, unknown>>(
 export function getAriaLabel<Data extends Record<string, unknown>>(
   action?: ITableAction<Data> | null,
   rows?: MRT_Row<Data> | MRT_Row<Data>[],
+  property?: ILabelProperty,
 ): string | undefined {
+  if (property === 'actionLabel') {
+    return getActionLabel(action, rows);
+  }
   if (!action) {
     return '';
   }

diff --git a/packages/haring-react/src/Components/CollapseButton/CollapseButtonControlled.tsx b/packages/haring-react/src/Components/CollapseButton/CollapseButtonControlled.tsx
@@ -9,10 +9,15 @@ import { CaretDown, CaretRight } from '@phosphor-icons/react';
 
 import classes from './CollapseButton.module.css';
 
+export interface ICollapseButtonAriaLabels {
+  expandButton?: string;
+}
+
 export interface ICollapseButtonControlledProps<
   T extends number | string,
   C extends ElementType,
 > extends ICollapseButtonProps<T, C> {
+  ariaLabels?: ICollapseButtonAriaLabels;
   collapseProps?: Partial<CollapseProps>;
   /** Only in the Controlled version, use this prop to provide the setter function for the opened/collapsed state */
   onCollapseChange?: (isOpened: boolean) => void;
@@ -25,6 +30,7 @@ export function CollapseButtonControlled<
   C extends ElementType = 'button',
 >(props: ICollapseButtonControlledProps<T, C>): ReactElement {
   const {
+    ariaLabels,
     children,
     collapseProps,
     component: Component = 'button',
@@ -111,7 +117,7 @@ export function CollapseButtonControlled<
         rightSection={
           Boolean(children) && (
             <ActionIcon
-              aria-label="expand button"
+              aria-label={ariaLabels?.expandButton || 'expand button'}
               data-testid="toggle"
               onClick={handleClick}
               radius="sm"

diff --git a/packages/haring-react/src/Components/InfoBox/InfoBox.tsx b/packages/haring-react/src/Components/InfoBox/InfoBox.tsx
@@ -12,6 +12,10 @@ import { Motif } from './Motif';
 
 export type IMantineBreakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs';
 
+export interface IInfoBoxAriaLabels {
+  expandButton?: string;
+}
+
 export interface IContentItem {
   arialLabel?: string;
   icon?: ReactElement;
@@ -21,6 +25,7 @@ export interface IContentItem {
 }
 
 export interface IInfoCardProps extends PaperProps {
+  ariaLabels?: IInfoBoxAriaLabels;
   children?: ReactElement;
   collapse?: boolean;
   content?: ReactElement;
@@ -36,6 +41,7 @@ export interface IInfoCardProps extends PaperProps {
 export function InfoBox(props: IInfoCardProps): ReactElement {
   const theme = useMantineTheme();
   const {
+    ariaLabels,
     children,
     collapse = true,
     content,
@@ -97,7 +103,7 @@ export function InfoBox(props: IInfoCardProps): ReactElement {
         </Collapse>
         {Boolean(collapse) && (
           <ActionIcon
-            aria-label="expand button"
+            aria-label={ariaLabels?.expandButton || 'expand button'}
             className={`${classes.collapseButton} ${
               !opened && classes.collapseButtonCenter
             }`}

diff --git a/packages/haring-react/src/Components/SidebarFilters/SidebarFilters.tsx b/packages/haring-react/src/Components/SidebarFilters/SidebarFilters.tsx
@@ -29,10 +29,15 @@ export interface ISidebarFilter {
   value: unknown;
 }
 
+export interface ISidebarFiltersAriaLabels {
+  expandIcon?: string;
+}
+
 type IId = number | string;
 
 export interface ISidebarFiltersProps {
   activeFilters?: ISidebarFilter[] | [];
+  ariaLabels?: ISidebarFiltersAriaLabels;
   closeAllFiltersLabel?: string;
   defaultOpenedActiveFilters?: boolean;
   defaultOpenedMenuIds?: IId[];
@@ -48,6 +53,7 @@ export interface ISidebarFiltersProps {
 export function SidebarFilters(props: ISidebarFiltersProps): ReactElement {
   const {
     activeFilters = [],
+    ariaLabels,
     closeAllFiltersLabel = 'Close all',
     title = 'Active filters',
     menus = [],
@@ -134,7 +140,7 @@ export function SidebarFilters(props: ISidebarFiltersProps): ReactElement {
           opened={activeFiltersCollapseOpened}
           rightSection={
             <ActionIcon
-              aria-label="expand icon"
+              aria-label={ariaLabels?.expandIcon || 'expand icon'}
               data-testid="toggle"
               onClick={() => {
                 setActiveFiltersCollapseOpened(!activeFiltersCollapseOpened);

diff --git a/packages/haring-react/src/Components/Thumbnail/Thumbnail.tsx b/packages/haring-react/src/Components/Thumbnail/Thumbnail.tsx
@@ -23,14 +23,20 @@ import { ConfirmModal } from '../ConfirmModal/ConfirmModal';
 
 import classes from './Thumbnail.module.css';
 
+export interface IThumbnailAriaLabels {
+  optionMenu?: string;
+}
+
 export interface IThumbnailProps extends IThumbnail {
   actions?: IThumbnailAction[];
+  ariaLabels?: IThumbnailAriaLabels;
 }
 
 export function Thumbnail(props: IThumbnailProps): ReactElement {
   const theme = useMantineTheme();
   const {
     actions = [],
+    ariaLabels,
     iconType,
     image = defaultImage,
     label,
@@ -111,7 +117,7 @@ export function Thumbnail(props: IThumbnailProps): ReactElement {
               <Menu radius={4} shadow="lg" width={200}>
                 <Menu.Target>
                   <ActionIcon
-                    aria-label="option menu button"
+                    aria-label={ariaLabels?.optionMenu || 'option menu button'}
                     className={
                       selected ? classes.menuButtonSelected : classes.menuButton
                     }