[DTRA] / Kate / DTRA-476 / [Code refactoring]: SonarCloud accessibili…

…ty issues (#11218) * refactor: improve accessibility for trade description section * refactor: replace div with button in mobile widget file * refactor: replace clickable div with buttons * refactor: add keydown listeners * refactor: create a css class instead of tag selector * refactor: rename constant * fix: revert some changes with button tags * refactor: create function handler
binary-com · Nov 17, 2023 · 6b488f9 · 6b488f9 · vercel · Nov 17, 2023
1 parent d35ceb9
commit 6b488f9
Show file tree

Hide file tree

Showing 11 changed files with 191 additions and 48 deletions.
diff --git a/packages/shared/src/utils/contract/contract.tsx b/packages/shared/src/utils/contract/contract.tsx
@@ -254,3 +254,17 @@ export const getLocalizedTurbosSubtype = (contract_type = '') => {
         <Localize i18n_default_text='Short' />
     );
 };
+
+export const clickAndKeyEventHandler = (
+    callback: () => void,
+    e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+) => {
+    if (e) {
+        e.preventDefault();
+        if (e.type !== 'keydown' || (e.type === 'keydown' && (e as React.KeyboardEvent).key === 'Enter')) {
+            callback();
+        }
+    } else {
+        callback();
+    }
+};
diff --git a/packages/trader/src/Assets/Trading/Categories/Description/accumulator-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/accumulator-trade-description.tsx
@@ -2,26 +2,58 @@ import React from 'react';
 import { Localize } from '@deriv/translations';
 import { Text } from '@deriv/components';
 
-const AccumulatorTradeDescription = ({ onClick }: { onClick: React.MouseEventHandler<HTMLSpanElement> }) => {
+const AccumulatorTradeDescription = ({
+    onClick,
+}: {
+    onClick: (e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+}) => {
     const content = [
         <Localize
             i18n_default_text='Accumulators allow you to express a view on the range of movement of an index and grow your stake exponentially at a fixed <0>growth rate</0>.'
-            components={[<span className='contract-type-info__content-definition' onClick={onClick} key={0} />]}
+            components={[
+                <span
+                    className='contract-type-info__content-definition'
+                    onClick={onClick}
+                    onKeyDown={onClick}
+                    key={0}
+                />,
+            ]}
             key='1'
         />,
         <Localize
             i18n_default_text='Your <0>payout</0> is the sum of your initial stake and profit.'
-            components={[<span className='contract-type-info__content-definition' onClick={onClick} key={0} />]}
+            components={[
+                <span
+                    className='contract-type-info__content-definition'
+                    onClick={onClick}
+                    onKeyDown={onClick}
+                    key={0}
+                />,
+            ]}
             key='2'
         />,
         <Localize
             i18n_default_text='Your stake will continue to grow as long as the current spot price remains within a specified <0>range</0> from the <0>previous spot price</0>. Otherwise, you lose your stake and the trade is terminated.'
-            components={[<span className='contract-type-info__content-definition' onClick={onClick} key={0} />]}
+            components={[
+                <span
+                    className='contract-type-info__content-definition'
+                    onClick={onClick}
+                    onKeyDown={onClick}
+                    key={0}
+                />,
+            ]}
             key='3'
         />,
         <Localize
             i18n_default_text='You can close your trade anytime. However, be aware of <0>slippage risk</0>.'
-            components={[<span className='contract-type-info__content-definition' onClick={onClick} key={0} />]}
+            components={[
+                <span
+                    className='contract-type-info__content-definition'
+                    onClick={onClick}
+                    onKeyDown={onClick}
+                    key={0}
+                />,
+            ]}
             key='4'
         />,
     ];

diff --git a/packages/trader/src/Assets/Trading/Categories/Description/multiplier-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/multiplier-trade-description.tsx
@@ -7,7 +7,7 @@ const MultiplierTradeDescription = ({
     onClick,
 }: {
     is_multiplier_fx?: boolean;
-    onClick: React.MouseEventHandler<HTMLSpanElement>;
+    onClick: (e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
 }) => {
     const content = [
         <Localize
@@ -26,27 +26,55 @@ const MultiplierTradeDescription = ({
         />,
         <Localize
             i18n_default_text='Your contract will be closed when the <0>stop out</0> level is reached.'
-            components={[<span className='contract-type-info__content-definition' onClick={onClick} key={0} />]}
+            components={[
+                <span
+                    className='contract-type-info__content-definition'
+                    onClick={onClick}
+                    onKeyDown={onClick}
+                    key={0}
+                />,
+            ]}
             key='4'
         />,
         {
             content: is_multiplier_fx ? (
                 <Localize
                     i18n_default_text='Additional features are available to manage your positions: “<0>Take profit</0>” and “<0>Stop loss</0>” allow you to adjust your level of risk aversion.'
-                    components={[<span className='contract-type-info__content-definition' onClick={onClick} key={0} />]}
+                    components={[
+                        <span
+                            className='contract-type-info__content-definition'
+                            onClick={onClick}
+                            onKeyDown={onClick}
+                            key={0}
+                        />,
+                    ]}
                     key='5'
                 />
             ) : (
                 <Localize
                     i18n_default_text='Additional features are available to manage your positions: “<0>Take profit</0>”, “<0>Stop loss</0>” and “<0>Deal cancellation</0>” allow you to adjust your level of risk aversion.'
-                    components={[<span className='contract-type-info__content-definition' onClick={onClick} key={0} />]}
+                    components={[
+                        <span
+                            className='contract-type-info__content-definition'
+                            onClick={onClick}
+                            onKeyDown={onClick}
+                            key={0}
+                        />,
+                    ]}
                     key='5'
                 />
             ),
         },
         <Localize
             i18n_default_text='You can close your trade anytime. However, be aware of <0>slippage risk</0>.'
-            components={[<span className='contract-type-info__content-definition' onClick={onClick} key={0} />]}
+            components={[
+                <span
+                    className='contract-type-info__content-definition'
+                    onClick={onClick}
+                    onKeyDown={onClick}
+                    key={0}
+                />,
+            ]}
             key='6'
         />,
     ] as Array<JSX.Element & { content: JSX.Element }>;

diff --git a/packages/trader/src/Assets/Trading/Categories/Description/turbos-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/turbos-trade-description.tsx
@@ -2,7 +2,11 @@ import React from 'react';
 import { Localize } from '@deriv/translations';
 import { Text } from '@deriv/components';
 
-const TurbosTradeDescription = ({ onClick }: { onClick: React.MouseEventHandler<HTMLSpanElement> }) => {
+const TurbosTradeDescription = ({
+    onClick,
+}: {
+    onClick: (e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+}) => {
     const content = [
         {
             text: (
@@ -13,7 +17,14 @@ const TurbosTradeDescription = ({ onClick }: { onClick: React.MouseEventHandler<
             text: (
                 <Localize
                     i18n_default_text='You receive a <0>payout</0> at <0>expiry</0> if the spot price never touches or breaches the <0>barrier</0> during the contract period. If it does, your contract will be terminated early.'
-                    components={[<span className='contract-type-info__content-definition' onClick={onClick} key={0} />]}
+                    components={[
+                        <span
+                            className='contract-type-info__content-definition'
+                            onClick={onClick}
+                            onKeyDown={onClick}
+                            key={0}
+                        />,
+                    ]}
                 />
             ),
         },
@@ -29,15 +40,29 @@ const TurbosTradeDescription = ({ onClick }: { onClick: React.MouseEventHandler<
             text: (
                 <Localize
                     i18n_default_text='Your payout is equal to the <0>payout per point</0> multiplied by the difference between the <0>final price</0> and the barrier. You will only earn a profit if your payout is higher than your initial stake.'
-                    components={[<span className='contract-type-info__content-definition' onClick={onClick} key={0} />]}
+                    components={[
+                        <span
+                            className='contract-type-info__content-definition'
+                            onClick={onClick}
+                            onKeyDown={onClick}
+                            key={0}
+                        />,
+                    ]}
                 />
             ),
         },
         {
             text: (
                 <Localize
                     i18n_default_text='You may sell the contract up to 15 seconds before expiry. If you do, we’ll pay you the <0>contract value</0>.'
-                    components={[<span className='contract-type-info__content-definition' onClick={onClick} key={0} />]}
+                    components={[
+                        <span
+                            className='contract-type-info__content-definition'
+                            onClick={onClick}
+                            onKeyDown={onClick}
+                            key={0}
+                        />,
+                    ]}
                 />
             ),
         },

diff --git a/packages/trader/src/Assets/Trading/Categories/Description/vanilla-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/vanilla-trade-description.tsx
@@ -7,7 +7,7 @@ const VanillaTradeDescription = ({
     onClick,
 }: {
     is_vanilla_fx?: boolean;
-    onClick: React.MouseEventHandler<HTMLSpanElement>;
+    onClick: (e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
 }) => {
     const content = [
         <Localize
@@ -18,7 +18,12 @@ const VanillaTradeDescription = ({
             i18n_default_text='If you select <0>"Call"</0>, you’ll earn a <1>payout</1> if the <1>final price</1> is above the <1>strike price</1> at <1>expiry</1>. Otherwise, you won’t receive a payout.'
             components={[
                 <strong key={0} />,
-                <span className='contract-type-info__content-definition' onClick={onClick} key={1} />,
+                <span
+                    className='contract-type-info__content-definition'
+                    onClick={onClick}
+                    onKeyDown={onClick}
+                    key={1}
+                />,
             ]}
             key='2'
         />,
@@ -32,15 +37,27 @@ const VanillaTradeDescription = ({
                 <Localize
                     i18n_default_text='Your payout is equal to the <0>payout per pip</0> multiplied by the difference, <1>in pips</1>, between the final price and the strike price. You will only earn a profit if your payout is higher than your initial stake.'
                     components={[
-                        <span className='contract-type-info__content-definition' onClick={onClick} key={0} />,
+                        <span
+                            className='contract-type-info__content-definition'
+                            onClick={onClick}
+                            onKeyDown={onClick}
+                            key={0}
+                        />,
                         <strong key={0} />,
                     ]}
                     key='4'
                 />
             ) : (
                 <Localize
                     i18n_default_text='Your payout is equal to the <0>payout per point</0> multiplied by the difference between the final price and the strike price. You will only earn a profit if your payout is higher than your initial stake.'
-                    components={[<span className='contract-type-info__content-definition' onClick={onClick} key={0} />]}
+                    components={[
+                        <span
+                            className='contract-type-info__content-definition'
+                            onClick={onClick}
+                            onKeyDown={onClick}
+                            key={0}
+                        />,
+                    ]}
                     key='4'
                 />
             ),
@@ -49,13 +66,27 @@ const VanillaTradeDescription = ({
             content: is_vanilla_fx ? (
                 <Localize
                     i18n_default_text='You may sell the contract up to 24 hours before expiry. If you do, we’ll pay you the <0>contract value</0>.'
-                    components={[<span className='contract-type-info__content-definition' onClick={onClick} key={0} />]}
+                    components={[
+                        <span
+                            className='contract-type-info__content-definition'
+                            onClick={onClick}
+                            onKeyDown={onClick}
+                            key={0}
+                        />,
+                    ]}
                     key='5'
                 />
             ) : (
                 <Localize
                     i18n_default_text='You may sell the contract up until 60 seconds before expiry. If you do, we’ll pay you the <0>contract value</0>.'
-                    components={[<span className='contract-type-info__content-definition' onClick={onClick} key={0} />]}
+                    components={[
+                        <span
+                            className='contract-type-info__content-definition'
+                            onClick={onClick}
+                            onKeyDown={onClick}
+                            key={0}
+                        />,
+                    ]}
                     key='5'
                 />
             ),

diff --git a/packages/trader/src/Assets/Trading/Categories/trade-categories.tsx b/packages/trader/src/Assets/Trading/Categories/trade-categories.tsx
@@ -30,7 +30,7 @@ const TradeCategories = ({
     is_multiplier_fx = false,
 }: {
     category?: string;
-    onClick: React.MouseEventHandler<HTMLSpanElement>;
+    onClick: (e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
     is_vanilla_fx?: boolean;
     is_multiplier_fx?: boolean;
 }) => {

diff --git a/packages/trader/src/Modules/Trading/Components/Elements/mobile-widget.tsx b/packages/trader/src/Modules/Trading/Components/Elements/mobile-widget.tsx
@@ -80,15 +80,15 @@ const MobileWidget = observer(() => {
                 <MultiplierAmountWidget />
             ) : (
                 <div id='duration_amount_selector' className='mobile-widget duration_amount_selector'>
-                    <div className='mobile-widget__duration' onClick={() => toggleWidget(0)}>
+                    <button className='mobile-widget__duration mobile-widget__button' onClick={() => toggleWidget(0)}>
                         {getHumanReadableDuration()}
-                    </div>
-                    <div className='mobile-widget__amount' onClick={() => toggleWidget(1)}>
+                    </button>
+                    <button className='mobile-widget__amount mobile-widget__button' onClick={() => toggleWidget(1)}>
                         <Money amount={amount} currency={currency} show_currency />
-                    </div>
-                    <div className='mobile-widget__type' onClick={() => toggleWidget(1)}>
+                    </button>
+                    <button className='mobile-widget__type mobile-widget__button' onClick={() => toggleWidget(1)}>
                         {stakeOrPayout()}
-                    </div>
+                    </button>
                 </div>
             )}
             <TradeParamsModal is_open={is_open} toggleModal={() => toggleWidget(tab_index)} tab_index={tab_index} />

diff --git a/.../src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.tsx b/.../src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, ThemedScrollbars, ButtonToggle } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
-import { TURBOS, VANILLALONG } from '@deriv/shared';
+import { clickAndKeyEventHandler, TURBOS, VANILLALONG } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { Analytics } from '@deriv/analytics';
 import TradeCategories from 'Assets/Trading/Categories/trade-categories';
@@ -48,7 +48,9 @@ const Info = observer(({ handleSelect, item, list }: TInfo) => {
     const is_glossary_tab_selected = selected_tab === TABS.GLOSSARY;
     const width = is_mobile ? '328' : '528';
     const scroll_bar_height = has_toggle_buttons ? '464px' : '560px';
-    const onClickGlossary = () => setSelectedTab(TABS.GLOSSARY);
+    const onClickGlossary = (e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
+        clickAndKeyEventHandler(() => setSelectedTab(TABS.GLOSSARY), e);
+    };
 
     React.useEffect(() => {
         return () => {