From 7a012ce9107334d51658d580d0dc7b0c00cd4be5 Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Fri, 9 May 2025 14:56:32 +0300
Subject: [PATCH] feat: add tooltips to constraint operator buttons (#9941)

![image](https://github.com/user-attachments/assets/9e40b6f8-a98e-48e0-a931-a946ad6ec9cf)
---
 .../EditableConstraint.tsx                    | 78 +++++++++----------
 1 file changed, 38 insertions(+), 40 deletions(-)

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
index 10a8cc4f1c..ae8df6be85 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
@@ -10,7 +10,6 @@ import Delete from '@mui/icons-material/Delete';
 import { ValueList } from './ValueList';
 import { ReactComponent as CaseSensitiveIcon } from 'assets/icons/case-sensitive.svg';
 import { ReactComponent as CaseInsensitiveIcon } from 'assets/icons/case-insensitive.svg';
-import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly';
 import { AddValuesWidget } from './AddValuesWidget';
 
 import { ReactComponent as EqualsIcon } from 'assets/icons/constraint-equals.svg';
@@ -268,26 +267,26 @@ export const EditableConstraint: FC<Props> = ({
                         />
 
                         <OperatorOptions>
-                            <StyledButton
-                                type='button'
-                                onClick={() =>
-                                    updateConstraint({
-                                        type: 'toggle inverted operator',
-                                    })
-                                }
+                            <HtmlTooltip
+                                title={`Make the selected operator${localConstraint.inverted ? ' inclusive' : ' exclusive'}`}
+                                arrow
+                                describeChild
                             >
-                                {localConstraint.inverted ? (
-                                    <StyledNotEqualsIcon aria-label='The constraint operator is exclusive.' />
-                                ) : (
-                                    <StyledEqualsIcon aria-label='The constraint operator is inclusive.' />
-                                )}
-                                <ScreenReaderOnly>
-                                    Make the selected operator
-                                    {localConstraint.inverted
-                                        ? ' inclusive'
-                                        : ' exclusive'}
-                                </ScreenReaderOnly>
-                            </StyledButton>
+                                <StyledButton
+                                    type='button'
+                                    onClick={() =>
+                                        updateConstraint({
+                                            type: 'toggle inverted operator',
+                                        })
+                                    }
+                                >
+                                    {localConstraint.inverted ? (
+                                        <StyledNotEqualsIcon aria-label='The constraint operator is exclusive.' />
+                                    ) : (
+                                        <StyledEqualsIcon aria-label='The constraint operator is inclusive.' />
+                                    )}
+                                </StyledButton>
+                            </HtmlTooltip>
 
                             <ConstraintOperatorSelect
                                 options={operatorsForContext(contextName)}
@@ -297,27 +296,26 @@ export const EditableConstraint: FC<Props> = ({
                             />
 
                             {showCaseSensitiveButton ? (
-                                <StyledButton
-                                    type='button'
-                                    onClick={() =>
-                                        updateConstraint({
-                                            type: 'toggle case sensitivity',
-                                        })
-                                    }
+                                <HtmlTooltip
+                                    title={`Make match${localConstraint.caseInsensitive ? ' ' : ' not '}case sensitive`}
+                                    arrow
+                                    describeChild
                                 >
-                                    {localConstraint.caseInsensitive ? (
-                                        <StyledCaseInsensitiveIcon aria-label='The match is not case sensitive.' />
-                                    ) : (
-                                        <StyledCaseSensitiveIcon aria-label='The match is case sensitive.' />
-                                    )}
-                                    <ScreenReaderOnly>
-                                        Make match
-                                        {localConstraint.caseInsensitive
-                                            ? ' '
-                                            : ' not '}
-                                        case sensitive
-                                    </ScreenReaderOnly>
-                                </StyledButton>
+                                    <StyledButton
+                                        type='button'
+                                        onClick={() =>
+                                            updateConstraint({
+                                                type: 'toggle case sensitivity',
+                                            })
+                                        }
+                                    >
+                                        {localConstraint.caseInsensitive ? (
+                                            <StyledCaseInsensitiveIcon aria-label='The match is not case sensitive.' />
+                                        ) : (
+                                            <StyledCaseSensitiveIcon aria-label='The match is case sensitive.' />
+                                        )}
+                                    </StyledButton>
+                                </HtmlTooltip>
                             ) : null}
                         </OperatorOptions>
                     </ConstraintOptions>