Skip to content

Commit

Permalink
fix: settings a11y - delete unnecessary aria-expanded (#281)
Browse files Browse the repository at this point in the history 
* fix: settings a11y

* lint
  • Loading branch information
@martyanovandrey
martyanovandrey authored Aug 30, 2024
1 parent 111e03f commit d74fbd4
Show file tree
Hide file tree
Showing 6 changed files with 102 additions and 125 deletions.
3 changes: 0 additions & 3 deletions src/components/Controls/single-controls/LangControl/LangControl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
23 changes: 17 additions & 6 deletions src/components/Controls/single-controls/SettingsControl/SettingsControl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -104,6 +110,7 @@ const SettingsControl = (props: ControlProps) => {
),
control: (
<Switch
title={t('label_show_mini_toc')}
disabled={showMiniTocDisabled}
checked={showMiniToc}
onChange={_onChangeShowMiniToc}
Expand All @@ -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
Expand All @@ -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>
))}
Expand Down Expand Up @@ -218,9 +232,6 @@ const SettingsControl = (props: ControlProps) => {
tooltipText={t('settings-text')}
popupPosition={popupPosition}
icon={Gear}
buttonExtraProps={{
'aria-expanded': isVisiblePopup,
}}
isTooltipHidden={isVisiblePopup}
/>
</Popover>
Expand Down
4 changes: 0 additions & 4 deletions src/components/Feedback/Feedback.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -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 && (
Expand Down
61 changes: 25 additions & 36 deletions src/components/Feedback/controls/DislikeControl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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';
Expand Down
69 changes: 31 additions & 38 deletions src/components/Feedback/controls/LikeControl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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';
Expand Down
67 changes: 29 additions & 38 deletions src/components/Subscribe/Subscribe.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -113,16 +107,13 @@ const Subscribe = memo<SubscribeProps>((props) => {
successPopup.open();
}, [successPopup, variantsPopup]);

const isPopupVisible = successPopup.visible || variantsPopup.visible;

return (
<React.Fragment>
<SubscribeControlsLayout view={view}>
<SubscribeControl
ref={subscribeControlRef}
view={view}
onChangeSubscribe={onChangeSubscribe}
isPopupVisible={isPopupVisible}
/>
</SubscribeControlsLayout>
{successPopup.visible && subscribeControlRef.current && (
Expand Down

0 comments on commit d74fbd4

Please sign in to comment.