From d74fbd4f899251afcae000b9fca31aec105a1470 Mon Sep 17 00:00:00 2001
From: Martyanov Andrey <37772440+martyanovandrey@users.noreply.github.com>
Date: Fri, 30 Aug 2024 13:47:51 +0500
Subject: [PATCH] fix: settings a11y - delete unnecessary aria-expanded (#281)

* fix: settings a11y

* lint
---
 .../LangControl/LangControl.tsx               |  3 -
 .../SettingsControl/SettingsControl.tsx       | 23 +++++--
 src/components/Feedback/Feedback.tsx          |  4 --
 .../Feedback/controls/DislikeControl.tsx      | 61 +++++++---------
 .../Feedback/controls/LikeControl.tsx         | 69 +++++++++----------
 src/components/Subscribe/Subscribe.tsx        | 67 ++++++++----------
 6 files changed, 102 insertions(+), 125 deletions(-)

diff --git a/src/components/Controls/single-controls/LangControl/LangControl.tsx b/src/components/Controls/single-controls/LangControl/LangControl.tsx
index 0997cdf0..5e1621d3 100644
--- a/src/components/Controls/single-controls/LangControl/LangControl.tsx
+++ b/src/components/Controls/single-controls/LangControl/LangControl.tsx
@@ -117,9 +117,6 @@ const LangControl = (props: ControlProps) => {
                 tooltipText={t('lang-text')}
                 icon={Globe}
                 popupPosition={popupPosition}
-                buttonExtraProps={{
-                    'aria-expanded': popupState.visible,
-                }}
                 isTooltipHidden={popupState.visible}
             />
         </Popover>
diff --git a/src/components/Controls/single-controls/SettingsControl/SettingsControl.tsx b/src/components/Controls/single-controls/SettingsControl/SettingsControl.tsx
index f94f3061..2d6eac38 100644
--- a/src/components/Controls/single-controls/SettingsControl/SettingsControl.tsx
+++ b/src/components/Controls/single-controls/SettingsControl/SettingsControl.tsx
@@ -92,7 +92,13 @@ const SettingsControl = (props: ControlProps) => {
                       description: t(
                           `description_wide_format_${wideFormat ? 'enabled' : 'disabled'}`,
                       ),
-                      control: <Switch checked={wideFormat} onChange={_onChangeWideFormat} />,
+                      control: (
+                          <Switch
+                              title={t('label_wide_format')}
+                              checked={wideFormat}
+                              onChange={_onChangeWideFormat}
+                          />
+                      ),
                   }
                 : null,
             onChangeShowMiniToc
@@ -104,6 +110,7 @@ const SettingsControl = (props: ControlProps) => {
                       ),
                       control: (
                           <Switch
+                              title={t('label_show_mini_toc')}
                               disabled={showMiniTocDisabled}
                               checked={showMiniToc}
                               onChange={_onChangeShowMiniToc}
@@ -118,7 +125,13 @@ const SettingsControl = (props: ControlProps) => {
                           Theme.Light === theme
                               ? t('description_disabled_dark_theme')
                               : t('description_enabled_dark_theme'),
-                      control: <Switch checked={theme === Theme.Dark} onChange={_onChangeTheme} />,
+                      control: (
+                          <Switch
+                              title={t('label_dark_theme')}
+                              checked={theme === Theme.Dark}
+                              onChange={_onChangeTheme}
+                          />
+                      ),
                   }
                 : null,
             onChangeTextSize
@@ -135,13 +148,14 @@ const SettingsControl = (props: ControlProps) => {
                                       })}
                                       view="flat"
                                       onClick={_onChangeTextSize(textSizeKey)}
+                                      title={`${t('label_text_size')} ${t(`description_${textSizeKey}_text_size`)}`}
                                   >
                                       <Button.Icon
                                           className={b('text-size-button-icon', {
                                               active: textSize === textSizeKey,
                                           })}
                                       >
-                                          A
+                                          <span aria-hidden={true}>A</span>
                                       </Button.Icon>
                                   </Button>
                               ))}
@@ -218,9 +232,6 @@ const SettingsControl = (props: ControlProps) => {
                 tooltipText={t('settings-text')}
                 popupPosition={popupPosition}
                 icon={Gear}
-                buttonExtraProps={{
-                    'aria-expanded': isVisiblePopup,
-                }}
                 isTooltipHidden={isVisiblePopup}
             />
         </Popover>
diff --git a/src/components/Feedback/Feedback.tsx b/src/components/Feedback/Feedback.tsx
index a5c14d98..b0fb1b0f 100644
--- a/src/components/Feedback/Feedback.tsx
+++ b/src/components/Feedback/Feedback.tsx
@@ -112,8 +112,6 @@ const Feedback: React.FC<FeedbackProps> = (props) => {
         [onSendFeedback, setInnerState, dislikeSuccessPopup, hideFeedbackPopups],
     );
 
-    const isDislikePopupVisible = dislikeSuccessPopup.visible || dislikeVariantsPopup.visible;
-
     return (
         <React.Fragment>
             <ControlsLayout view={view}>
@@ -122,14 +120,12 @@ const Feedback: React.FC<FeedbackProps> = (props) => {
                     view={view}
                     onClick={onChangeLike}
                     isLiked={innerState === FeedbackType.like}
-                    isPopupVisible={likeSuccessPopup.visible}
                 />
                 <DislikeControl
                     ref={dislikeControlRef}
                     view={view}
                     onClick={onChangeDislike}
                     isDisliked={innerState === FeedbackType.dislike}
-                    isPopupVisible={isDislikePopupVisible}
                 />
             </ControlsLayout>
             {likeControlRef.current && (
diff --git a/src/components/Feedback/controls/DislikeControl.tsx b/src/components/Feedback/controls/DislikeControl.tsx
index 330d8207..d25e13b2 100644
--- a/src/components/Feedback/controls/DislikeControl.tsx
+++ b/src/components/Feedback/controls/DislikeControl.tsx
@@ -11,7 +11,6 @@ import {FeedbackView} from '../Feedback';
 type DislikeControlProps = {
     isVerticalView?: boolean | undefined;
     isDisliked: boolean | undefined;
-    isPopupVisible: boolean;
     className?: string | undefined;
     view: FeedbackView | undefined;
     onClick: () => void;
@@ -20,45 +19,35 @@ type DislikeControlProps = {
 const b = block('dc-feedback');
 
 const DislikeControl = memo(
-    forwardRef<HTMLButtonElement, DislikeControlProps>(
-        ({isDisliked, isPopupVisible, view, onClick}, ref) => {
-            const {t} = useTranslation('feedback');
-            const {isVerticalView, controlClassName} = useContext(ControlsLayoutContext);
-            const tooltipText = isDisliked ? t('cancel-dislike-text') : t('dislike-text');
+    forwardRef<HTMLButtonElement, DislikeControlProps>(({isDisliked, view, onClick}, ref) => {
+        const {t} = useTranslation('feedback');
+        const {isVerticalView, controlClassName} = useContext(ControlsLayoutContext);
+        const tooltipText = isDisliked ? t('cancel-dislike-text') : t('dislike-text');
 
-            const Icon = isDisliked ? ThumbsDownFill : ThumbsDown;
-
-            if (view === FeedbackView.Wide) {
-                return (
-                    <Button
-                        view="normal"
-                        ref={ref}
-                        onClick={onClick}
-                        className={b('control', {view})}
-                    >
-                        <Button.Icon>
-                            <Icon width={14} height={14} />
-                        </Button.Icon>
-                        {t<string>('button-dislike-text')}
-                    </Button>
-                );
-            }
+        const Icon = isDisliked ? ThumbsDownFill : ThumbsDown;
 
+        if (view === FeedbackView.Wide) {
             return (
-                <Control
-                    onClick={onClick}
-                    className={b('control', {view}, controlClassName)}
-                    isVerticalView={isVerticalView}
-                    tooltipText={tooltipText}
-                    ref={ref}
-                    icon={Icon}
-                    buttonExtraProps={{
-                        'aria-expanded': isPopupVisible,
-                    }}
-                />
+                <Button view="normal" ref={ref} onClick={onClick} className={b('control', {view})}>
+                    <Button.Icon>
+                        <Icon width={14} height={14} />
+                    </Button.Icon>
+                    {t<string>('button-dislike-text')}
+                </Button>
             );
-        },
-    ),
+        }
+
+        return (
+            <Control
+                onClick={onClick}
+                className={b('control', {view}, controlClassName)}
+                isVerticalView={isVerticalView}
+                tooltipText={tooltipText}
+                ref={ref}
+                icon={Icon}
+            />
+        );
+    }),
 );
 
 DislikeControl.displayName = 'DislikeControl';
diff --git a/src/components/Feedback/controls/LikeControl.tsx b/src/components/Feedback/controls/LikeControl.tsx
index 342edb1f..14c4def5 100644
--- a/src/components/Feedback/controls/LikeControl.tsx
+++ b/src/components/Feedback/controls/LikeControl.tsx
@@ -13,7 +13,6 @@ import {FeedbackView} from '../Feedback';
 type LikeControlProps = {
     isVerticalView?: boolean | undefined;
     isLiked: boolean | undefined;
-    isPopupVisible: boolean;
     className?: string | undefined;
     view: FeedbackView | undefined;
     onClick: () => void;
@@ -23,48 +22,42 @@ type LikeControlProps = {
 const b = block('dc-feedback');
 
 const LikeControl = memo(
-    forwardRef<HTMLButtonElement, LikeControlProps>(
-        ({isLiked, isPopupVisible, view, onClick}, ref) => {
-            const {t} = useTranslation('feedback');
-            const {isVerticalView, popupPosition, controlClassName} =
-                useContext(ControlsLayoutContext);
-            const tooltipText = isLiked ? t('cancel-like-text') : t('like-text');
+    forwardRef<HTMLButtonElement, LikeControlProps>(({isLiked, view, onClick}, ref) => {
+        const {t} = useTranslation('feedback');
+        const {isVerticalView, popupPosition, controlClassName} = useContext(ControlsLayoutContext);
+        const tooltipText = isLiked ? t('cancel-like-text') : t('like-text');
 
-            const Icon = isLiked ? ThumbsUpFill : ThumbsUp;
-
-            if (view === FeedbackView.Wide) {
-                return (
-                    <Button
-                        size="m"
-                        view="normal"
-                        ref={ref}
-                        onClick={onClick}
-                        className={b('control', {view})}
-                    >
-                        <Button.Icon>
-                            <Icon width={14} height={14} />
-                        </Button.Icon>
-                        {t<string>('button-like-text')}
-                    </Button>
-                );
-            }
+        const Icon = isLiked ? ThumbsUpFill : ThumbsUp;
 
+        if (view === FeedbackView.Wide) {
             return (
-                <Control
-                    onClick={onClick}
-                    className={b('control', {view}, controlClassName)}
-                    isVerticalView={isVerticalView}
-                    tooltipText={tooltipText}
+                <Button
+                    size="m"
+                    view="normal"
                     ref={ref}
-                    icon={Icon}
-                    popupPosition={popupPosition}
-                    buttonExtraProps={{
-                        'aria-expanded': isPopupVisible,
-                    }}
-                />
+                    onClick={onClick}
+                    className={b('control', {view})}
+                >
+                    <Button.Icon>
+                        <Icon width={14} height={14} />
+                    </Button.Icon>
+                    {t<string>('button-like-text')}
+                </Button>
             );
-        },
-    ),
+        }
+
+        return (
+            <Control
+                onClick={onClick}
+                className={b('control', {view}, controlClassName)}
+                isVerticalView={isVerticalView}
+                tooltipText={tooltipText}
+                ref={ref}
+                icon={Icon}
+                popupPosition={popupPosition}
+            />
+        );
+    }),
 );
 
 LikeControl.displayName = 'LikeControl';
diff --git a/src/components/Subscribe/Subscribe.tsx b/src/components/Subscribe/Subscribe.tsx
index 6fc326d1..4737f343 100644
--- a/src/components/Subscribe/Subscribe.tsx
+++ b/src/components/Subscribe/Subscribe.tsx
@@ -27,49 +27,43 @@ export interface SubscribeProps {
 type SubscribeControlProps = {
     view: SubscribeView;
     onChangeSubscribe: () => void;
-    isPopupVisible: boolean;
 };
 
 const SubscribeControl = memo(
-    forwardRef<HTMLButtonElement, SubscribeControlProps>(
-        ({view, onChangeSubscribe, isPopupVisible}, ref) => {
-            const {isVerticalView, popupPosition, controlClassName, controlSize} =
-                useContext(ControlsLayoutContext);
-            const {t} = useTranslation('controls');
-
-            if (view === SubscribeView.Wide) {
-                return (
-                    <Button
-                        view="flat-secondary"
-                        ref={ref}
-                        onClick={onChangeSubscribe}
-                        className={b('control', {view})}
-                    >
-                        <Button.Icon>
-                            <Envelope width={16} height={16} />
-                        </Button.Icon>
-                        {t<string>('button-Subscribe-text')}
-                    </Button>
-                );
-            }
+    forwardRef<HTMLButtonElement, SubscribeControlProps>(({view, onChangeSubscribe}, ref) => {
+        const {isVerticalView, popupPosition, controlClassName, controlSize} =
+            useContext(ControlsLayoutContext);
+        const {t} = useTranslation('controls');
 
+        if (view === SubscribeView.Wide) {
             return (
-                <Control
+                <Button
+                    view="flat-secondary"
                     ref={ref}
                     onClick={onChangeSubscribe}
-                    size={controlSize}
-                    className={b('control', {view}, controlClassName)}
-                    isVerticalView={isVerticalView}
-                    tooltipText={t(`subscribe-text`)}
-                    icon={Envelope}
-                    popupPosition={popupPosition}
-                    buttonExtraProps={{
-                        'aria-expanded': isPopupVisible,
-                    }}
-                />
+                    className={b('control', {view})}
+                >
+                    <Button.Icon>
+                        <Envelope width={16} height={16} />
+                    </Button.Icon>
+                    {t<string>('button-Subscribe-text')}
+                </Button>
             );
-        },
-    ),
+        }
+
+        return (
+            <Control
+                ref={ref}
+                onClick={onChangeSubscribe}
+                size={controlSize}
+                className={b('control', {view}, controlClassName)}
+                isVerticalView={isVerticalView}
+                tooltipText={t(`subscribe-text`)}
+                icon={Envelope}
+                popupPosition={popupPosition}
+            />
+        );
+    }),
 );
 
 SubscribeControl.displayName = 'SubscribeControl';
@@ -113,8 +107,6 @@ const Subscribe = memo<SubscribeProps>((props) => {
         successPopup.open();
     }, [successPopup, variantsPopup]);
 
-    const isPopupVisible = successPopup.visible || variantsPopup.visible;
-
     return (
         <React.Fragment>
             <SubscribeControlsLayout view={view}>
@@ -122,7 +114,6 @@ const Subscribe = memo<SubscribeProps>((props) => {
                     ref={subscribeControlRef}
                     view={view}
                     onChangeSubscribe={onChangeSubscribe}
-                    isPopupVisible={isPopupVisible}
                 />
             </SubscribeControlsLayout>
             {successPopup.visible && subscribeControlRef.current && (