From 5808cd3adadb135f9f0d5dbcf1894d3e7bce122a Mon Sep 17 00:00:00 2001 From: Yurii Date: Fri, 15 Oct 2021 22:19:39 -0700 Subject: [PATCH 01/13] Add CSS boarder when chair is in focus. Add new atributes isFocusActive and tabIndex to all chairs. Add tabIndex as a variable to IChair interface. --- src/Containers/Chair/Chair.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/Containers/Chair/Chair.tsx b/src/Containers/Chair/Chair.tsx index 1050a6bc..d6c44f5c 100644 --- a/src/Containers/Chair/Chair.tsx +++ b/src/Containers/Chair/Chair.tsx @@ -70,6 +70,8 @@ export interface IChair { chairIndex: number, selectedIndex: number, ) => void; + + tabIndex: number; } /** @@ -86,6 +88,7 @@ export const Chair: React.FC = ({ tableIndex = -1, chairIndex = -1, selectedIndex = -1, + tabIndex= 1, onChairClick, ...props }) => { @@ -101,6 +104,7 @@ export const Chair: React.FC = ({ isSeated={isSeated} tableUse={tableUse} isVisible={isVisible} + isFocusActive = {true} > {getChairText()} @@ -120,6 +124,8 @@ export const Chair: React.FC = ({ position={position} tableUse={tableUse} isVisible={isVisible} + isFocusActive = {true} + tabIndex={1} > {getChairText()} @@ -399,6 +405,7 @@ interface IBaseChair { isSeated: boolean; tableUse: tableUseTypes; isVisible: boolean; + isFocusActive: boolean; } const BaseChair = styled.div` @@ -407,6 +414,10 @@ const BaseChair = styled.div` isVisible, )}; background-color: ${getChairColor(isSeated, tableUse, isVisible)};`} + cursor: pointer; + &:focus { + box-shadow: ${({ isFocusActive }) => (isFocusActive ? '0 0 0 2px' : '')}; + } `; const RoundChair = styled(BaseChair)>` From e8201433bba54cb0f3a28367d55f4830abe218e0 Mon Sep 17 00:00:00 2001 From: Yurii Date: Fri, 15 Oct 2021 22:27:25 -0700 Subject: [PATCH 02/13] Fix bag and add comment --- src/Containers/Chair/Chair.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/Containers/Chair/Chair.tsx b/src/Containers/Chair/Chair.tsx index d6c44f5c..c66c7ded 100644 --- a/src/Containers/Chair/Chair.tsx +++ b/src/Containers/Chair/Chair.tsx @@ -71,6 +71,9 @@ export interface IChair { selectedIndex: number, ) => void; + /** + * Number for atribute tabindex to make possible to focus on the chair + */ tabIndex: number; } @@ -104,7 +107,8 @@ export const Chair: React.FC = ({ isSeated={isSeated} tableUse={tableUse} isVisible={isVisible} - isFocusActive = {true} + isFocusActive={true} + tabIndex={1} > {getChairText()} @@ -124,7 +128,7 @@ export const Chair: React.FC = ({ position={position} tableUse={tableUse} isVisible={isVisible} - isFocusActive = {true} + isFocusActive={true} tabIndex={1} > {getChairText()} From 653914d46e8c2b61680bad65e499bdf0c943f304 Mon Sep 17 00:00:00 2001 From: Yurii Date: Fri, 15 Oct 2021 22:32:03 -0700 Subject: [PATCH 03/13] Since new parameter tabIndex was added to the IChair interface, modify files to accept tabIndex --- .../CircleTable/CircleTable.stories.tsx | 15 +++++++++++ src/Containers/CircleTable/CircleTable.tsx | 1 + .../SquareTable/SquareTable.stories.tsx | 26 +++++++++++++++++++ src/Containers/SquareTable/SquareTable.tsx | 1 + 4 files changed, 43 insertions(+) diff --git a/src/Containers/CircleTable/CircleTable.stories.tsx b/src/Containers/CircleTable/CircleTable.stories.tsx index 16f890b8..40300185 100644 --- a/src/Containers/CircleTable/CircleTable.stories.tsx +++ b/src/Containers/CircleTable/CircleTable.stories.tsx @@ -55,6 +55,7 @@ FourTopTable.args = { chairIndex: 0, tableIndex: 0, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -68,6 +69,7 @@ FourTopTable.args = { chairIndex: 0, tableIndex: 0, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -81,6 +83,7 @@ FourTopTable.args = { chairIndex: 0, tableIndex: 0, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -94,6 +97,7 @@ FourTopTable.args = { chairIndex: 0, tableIndex: 0, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -107,6 +111,7 @@ FourTopTable.args = { chairIndex: 0, tableIndex: 0, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -120,6 +125,7 @@ FourTopTable.args = { chairIndex: 0, tableIndex: 0, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -133,6 +139,7 @@ FourTopTable.args = { chairIndex: 0, tableIndex: 0, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -146,6 +153,7 @@ FourTopTable.args = { chairIndex: 0, tableIndex: 0, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -159,6 +167,7 @@ FourTopTable.args = { chairIndex: 0, tableIndex: 0, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, ], @@ -188,6 +197,7 @@ TableForEditDraggableCanvas.args = { chairIndex: 1, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -201,6 +211,7 @@ TableForEditDraggableCanvas.args = { chairIndex: 1, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -214,6 +225,7 @@ TableForEditDraggableCanvas.args = { chairIndex: 2, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -227,6 +239,7 @@ TableForEditDraggableCanvas.args = { chairIndex: 3, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -240,6 +253,7 @@ TableForEditDraggableCanvas.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -253,6 +267,7 @@ TableForEditDraggableCanvas.args = { chairIndex: 5, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, ], diff --git a/src/Containers/CircleTable/CircleTable.tsx b/src/Containers/CircleTable/CircleTable.tsx index 39d7a9e1..e75e9737 100644 --- a/src/Containers/CircleTable/CircleTable.tsx +++ b/src/Containers/CircleTable/CircleTable.tsx @@ -141,6 +141,7 @@ export const CircleTable: React.FC = ({ chairIndex={index} selectedIndex={selectedIndex} onChairClick={onChairClick} + tabIndex={1} /> )); diff --git a/src/Containers/SquareTable/SquareTable.stories.tsx b/src/Containers/SquareTable/SquareTable.stories.tsx index dd3ef5a9..48c0d0de 100644 --- a/src/Containers/SquareTable/SquareTable.stories.tsx +++ b/src/Containers/SquareTable/SquareTable.stories.tsx @@ -54,6 +54,7 @@ SevenTopSquareTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -66,6 +67,7 @@ SevenTopSquareTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -78,6 +80,7 @@ SevenTopSquareTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -90,6 +93,7 @@ SevenTopSquareTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -102,6 +106,7 @@ SevenTopSquareTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -114,6 +119,7 @@ SevenTopSquareTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -126,6 +132,7 @@ SevenTopSquareTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -138,6 +145,7 @@ SevenTopSquareTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, ], @@ -167,6 +175,7 @@ EightTopVertRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -179,6 +188,7 @@ EightTopVertRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -191,6 +201,7 @@ EightTopVertRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -203,6 +214,7 @@ EightTopVertRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -215,6 +227,7 @@ EightTopVertRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -227,6 +240,7 @@ EightTopVertRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -239,6 +253,7 @@ EightTopVertRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -251,6 +266,7 @@ EightTopVertRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, ], @@ -280,6 +296,7 @@ SixTopHorizontalRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -292,6 +309,7 @@ SixTopHorizontalRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -304,6 +322,7 @@ SixTopHorizontalRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -316,6 +335,7 @@ SixTopHorizontalRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -328,6 +348,7 @@ SixTopHorizontalRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -340,6 +361,7 @@ SixTopHorizontalRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, ], @@ -369,6 +391,7 @@ SquareTableEditPage.args = { chairIndex: 0, tableIndex: 3, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -381,6 +404,7 @@ SquareTableEditPage.args = { chairIndex: 1, tableIndex: 3, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -393,6 +417,7 @@ SquareTableEditPage.args = { chairIndex: 5, tableIndex: 3, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -405,6 +430,7 @@ SquareTableEditPage.args = { chairIndex: 5, tableIndex: 3, selectedIndex: 3, + tabIndex: 1, onChairClick: handleOnChairClick, }, ], diff --git a/src/Containers/SquareTable/SquareTable.tsx b/src/Containers/SquareTable/SquareTable.tsx index b0637778..59851de5 100644 --- a/src/Containers/SquareTable/SquareTable.tsx +++ b/src/Containers/SquareTable/SquareTable.tsx @@ -243,6 +243,7 @@ export const SquareTable: React.FC = ({ tableIndex: arrayIndex, selectedIndex, onChairClick, + tabIndex: 1, }); } }; From f26beeb3f76a38df8f3ec92d9cab48a00a3de29b Mon Sep 17 00:00:00 2001 From: Yurii Date: Sat, 16 Oct 2021 14:28:20 -0700 Subject: [PATCH 04/13] Move CSS :focus from BaseChair to the Props passed to Modify the CSS --- src/Containers/Chair/Chair.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/Containers/Chair/Chair.tsx b/src/Containers/Chair/Chair.tsx index c66c7ded..f0c68887 100644 --- a/src/Containers/Chair/Chair.tsx +++ b/src/Containers/Chair/Chair.tsx @@ -418,10 +418,6 @@ const BaseChair = styled.div` isVisible, )}; background-color: ${getChairColor(isSeated, tableUse, isVisible)};`} - cursor: pointer; - &:focus { - box-shadow: ${({ isFocusActive }) => (isFocusActive ? '0 0 0 2px' : '')}; - } `; const RoundChair = styled(BaseChair)>` @@ -437,6 +433,9 @@ const RoundChair = styled(BaseChair)>` relativeSize * BASE_BORDER_WIDTH_FOR_ROUND_CHAIR }px solid black;`; }} + &:focus { + box-shadow: ${({ isFocusActive }) => (isFocusActive ? '0 0 0 2px' : '')}; + } `; const RectangleChair = styled(BaseChair)< @@ -449,6 +448,9 @@ const RectangleChair = styled(BaseChair)< left: VerticalChairStyle, right: VerticalChairStyle, }[position])}; + &:focus { + box-shadow: ${({ isFocusActive }) => (isFocusActive ? '0 0 0 2px' : '')}; + } `; const RectangleChairText = styled.div< From 9f65e2100793ec400dd22afcd65fa3ac18454bc3 Mon Sep 17 00:00:00 2001 From: Yurii Date: Sat, 16 Oct 2021 14:43:23 -0700 Subject: [PATCH 05/13] In IChair interface rename tabIndex variable to ChairTabIndexAtribute --- src/Containers/Chair/Chair.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Containers/Chair/Chair.tsx b/src/Containers/Chair/Chair.tsx index f0c68887..56888841 100644 --- a/src/Containers/Chair/Chair.tsx +++ b/src/Containers/Chair/Chair.tsx @@ -72,9 +72,9 @@ export interface IChair { ) => void; /** - * Number for atribute tabindex to make possible to focus on the chair + * Number for Chair global atribute which indicates that its element can be focused */ - tabIndex: number; + ChairTabIndexAtribute: number; } /** @@ -91,7 +91,7 @@ export const Chair: React.FC = ({ tableIndex = -1, chairIndex = -1, selectedIndex = -1, - tabIndex= 1, + ChairTabIndexAtribute= 0, onChairClick, ...props }) => { @@ -108,7 +108,7 @@ export const Chair: React.FC = ({ tableUse={tableUse} isVisible={isVisible} isFocusActive={true} - tabIndex={1} + tabIndex={ChairTabIndexAtribute} > {getChairText()} @@ -129,7 +129,7 @@ export const Chair: React.FC = ({ tableUse={tableUse} isVisible={isVisible} isFocusActive={true} - tabIndex={1} + tabIndex={ChairTabIndexAtribute} > {getChairText()} @@ -199,7 +199,7 @@ export const Chair: React.FC = ({ onClick={onHandleClick} onKeyPress={onHandleClick} role="button" - tabIndex={0} + tabIndex={ChairTabIndexAtribute} > {isRound ? getRoundChair() : getPositionChair()} From daddd93e8f26768f6651e556e0b191dd4df61b67 Mon Sep 17 00:00:00 2001 From: Yurii Date: Sat, 16 Oct 2021 14:49:09 -0700 Subject: [PATCH 06/13] Make ChairTabIndexAtribute lowercase --- src/Containers/Chair/Chair.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/Containers/Chair/Chair.tsx b/src/Containers/Chair/Chair.tsx index 56888841..fd01220a 100644 --- a/src/Containers/Chair/Chair.tsx +++ b/src/Containers/Chair/Chair.tsx @@ -74,7 +74,7 @@ export interface IChair { /** * Number for Chair global atribute which indicates that its element can be focused */ - ChairTabIndexAtribute: number; + chairTabIndexAtribute: number; } /** @@ -91,7 +91,7 @@ export const Chair: React.FC = ({ tableIndex = -1, chairIndex = -1, selectedIndex = -1, - ChairTabIndexAtribute= 0, + chairTabIndexAtribute= 0, onChairClick, ...props }) => { @@ -108,7 +108,7 @@ export const Chair: React.FC = ({ tableUse={tableUse} isVisible={isVisible} isFocusActive={true} - tabIndex={ChairTabIndexAtribute} + tabIndex={chairTabIndexAtribute} > {getChairText()} @@ -129,7 +129,7 @@ export const Chair: React.FC = ({ tableUse={tableUse} isVisible={isVisible} isFocusActive={true} - tabIndex={ChairTabIndexAtribute} + tabIndex={chairTabIndexAtribute} > {getChairText()} @@ -199,7 +199,7 @@ export const Chair: React.FC = ({ onClick={onHandleClick} onKeyPress={onHandleClick} role="button" - tabIndex={ChairTabIndexAtribute} + tabIndex={chairTabIndexAtribute} > {isRound ? getRoundChair() : getPositionChair()} From 82a423837e4af0a070c681609cbdf92feb3b30d0 Mon Sep 17 00:00:00 2001 From: Yurii Date: Sat, 16 Oct 2021 14:53:59 -0700 Subject: [PATCH 07/13] Set chairTabIndexAtribute=0 instead 1 --- src/Containers/SquareTable/SquareTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Containers/SquareTable/SquareTable.tsx b/src/Containers/SquareTable/SquareTable.tsx index 59851de5..1f41bcb0 100644 --- a/src/Containers/SquareTable/SquareTable.tsx +++ b/src/Containers/SquareTable/SquareTable.tsx @@ -243,7 +243,7 @@ export const SquareTable: React.FC = ({ tableIndex: arrayIndex, selectedIndex, onChairClick, - tabIndex: 1, + chairTabIndexAtribute: 0, }); } }; From eecaf5a544ba371d5f303973baebfd7ba08df7ac Mon Sep 17 00:00:00 2001 From: Yurii Date: Sat, 16 Oct 2021 15:01:42 -0700 Subject: [PATCH 08/13] Change the name tabIndex to chairTabIndexAtribute while creating chair element. --- src/Containers/CircleTable/CircleTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Containers/CircleTable/CircleTable.tsx b/src/Containers/CircleTable/CircleTable.tsx index e75e9737..de7c2a30 100644 --- a/src/Containers/CircleTable/CircleTable.tsx +++ b/src/Containers/CircleTable/CircleTable.tsx @@ -141,7 +141,7 @@ export const CircleTable: React.FC = ({ chairIndex={index} selectedIndex={selectedIndex} onChairClick={onChairClick} - tabIndex={1} + chairTabIndexAtribute={item.chairTabIndexAtribute} /> )); From 8fa0b37bf6a4939e7b05a4075988cae1a1b84e81 Mon Sep 17 00:00:00 2001 From: Yurii Date: Tue, 19 Oct 2021 17:59:56 -0700 Subject: [PATCH 09/13] Remove isFocusActive and parameter and chairTabIndexAtribute as redunant. Set tabindex of the chair to be initialy 0 (to make chair clickable). Remove conditional statment in styles as redundand. --- src/Containers/Chair/Chair.tsx | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/src/Containers/Chair/Chair.tsx b/src/Containers/Chair/Chair.tsx index fd01220a..503005ec 100644 --- a/src/Containers/Chair/Chair.tsx +++ b/src/Containers/Chair/Chair.tsx @@ -71,10 +71,7 @@ export interface IChair { selectedIndex: number, ) => void; - /** - * Number for Chair global atribute which indicates that its element can be focused - */ - chairTabIndexAtribute: number; + } /** @@ -91,7 +88,7 @@ export const Chair: React.FC = ({ tableIndex = -1, chairIndex = -1, selectedIndex = -1, - chairTabIndexAtribute= 0, + onChairClick, ...props }) => { @@ -107,8 +104,7 @@ export const Chair: React.FC = ({ isSeated={isSeated} tableUse={tableUse} isVisible={isVisible} - isFocusActive={true} - tabIndex={chairTabIndexAtribute} + tabIndex={0} > {getChairText()} @@ -128,8 +124,7 @@ export const Chair: React.FC = ({ position={position} tableUse={tableUse} isVisible={isVisible} - isFocusActive={true} - tabIndex={chairTabIndexAtribute} + tabIndex={0} > {getChairText()} @@ -199,7 +194,7 @@ export const Chair: React.FC = ({ onClick={onHandleClick} onKeyPress={onHandleClick} role="button" - tabIndex={chairTabIndexAtribute} + tabIndex={0} > {isRound ? getRoundChair() : getPositionChair()} @@ -409,7 +404,7 @@ interface IBaseChair { isSeated: boolean; tableUse: tableUseTypes; isVisible: boolean; - isFocusActive: boolean; + } const BaseChair = styled.div` @@ -434,7 +429,7 @@ const RoundChair = styled(BaseChair)>` }px solid black;`; }} &:focus { - box-shadow: ${({ isFocusActive }) => (isFocusActive ? '0 0 0 2px' : '')}; + box-shadow: 0 0 0 2px; } `; @@ -449,7 +444,7 @@ const RectangleChair = styled(BaseChair)< right: VerticalChairStyle, }[position])}; &:focus { - box-shadow: ${({ isFocusActive }) => (isFocusActive ? '0 0 0 2px' : '')}; + box-shadow: 0 0 0 2px; } `; From df51d3821d9d1ddc6c27fa6af06260f6769e3feb Mon Sep 17 00:00:00 2001 From: Yurii Date: Tue, 19 Oct 2021 18:02:58 -0700 Subject: [PATCH 10/13] Remove setting chairTabIndexAtribute for each chair, since such parameter was removed from chair object as redundsnt. --- .../CircleTable/CircleTable.stories.tsx | 15 ----------- .../SquareTable/SquareTable.stories.tsx | 26 ------------------- 2 files changed, 41 deletions(-) diff --git a/src/Containers/CircleTable/CircleTable.stories.tsx b/src/Containers/CircleTable/CircleTable.stories.tsx index 40300185..16f890b8 100644 --- a/src/Containers/CircleTable/CircleTable.stories.tsx +++ b/src/Containers/CircleTable/CircleTable.stories.tsx @@ -55,7 +55,6 @@ FourTopTable.args = { chairIndex: 0, tableIndex: 0, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -69,7 +68,6 @@ FourTopTable.args = { chairIndex: 0, tableIndex: 0, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -83,7 +81,6 @@ FourTopTable.args = { chairIndex: 0, tableIndex: 0, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -97,7 +94,6 @@ FourTopTable.args = { chairIndex: 0, tableIndex: 0, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -111,7 +107,6 @@ FourTopTable.args = { chairIndex: 0, tableIndex: 0, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -125,7 +120,6 @@ FourTopTable.args = { chairIndex: 0, tableIndex: 0, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -139,7 +133,6 @@ FourTopTable.args = { chairIndex: 0, tableIndex: 0, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -153,7 +146,6 @@ FourTopTable.args = { chairIndex: 0, tableIndex: 0, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -167,7 +159,6 @@ FourTopTable.args = { chairIndex: 0, tableIndex: 0, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, ], @@ -197,7 +188,6 @@ TableForEditDraggableCanvas.args = { chairIndex: 1, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -211,7 +201,6 @@ TableForEditDraggableCanvas.args = { chairIndex: 1, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -225,7 +214,6 @@ TableForEditDraggableCanvas.args = { chairIndex: 2, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -239,7 +227,6 @@ TableForEditDraggableCanvas.args = { chairIndex: 3, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -253,7 +240,6 @@ TableForEditDraggableCanvas.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -267,7 +253,6 @@ TableForEditDraggableCanvas.args = { chairIndex: 5, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, ], diff --git a/src/Containers/SquareTable/SquareTable.stories.tsx b/src/Containers/SquareTable/SquareTable.stories.tsx index 48c0d0de..dd3ef5a9 100644 --- a/src/Containers/SquareTable/SquareTable.stories.tsx +++ b/src/Containers/SquareTable/SquareTable.stories.tsx @@ -54,7 +54,6 @@ SevenTopSquareTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -67,7 +66,6 @@ SevenTopSquareTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -80,7 +78,6 @@ SevenTopSquareTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -93,7 +90,6 @@ SevenTopSquareTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -106,7 +102,6 @@ SevenTopSquareTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -119,7 +114,6 @@ SevenTopSquareTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -132,7 +126,6 @@ SevenTopSquareTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -145,7 +138,6 @@ SevenTopSquareTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, ], @@ -175,7 +167,6 @@ EightTopVertRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -188,7 +179,6 @@ EightTopVertRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -201,7 +191,6 @@ EightTopVertRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -214,7 +203,6 @@ EightTopVertRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -227,7 +215,6 @@ EightTopVertRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -240,7 +227,6 @@ EightTopVertRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -253,7 +239,6 @@ EightTopVertRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -266,7 +251,6 @@ EightTopVertRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, ], @@ -296,7 +280,6 @@ SixTopHorizontalRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -309,7 +292,6 @@ SixTopHorizontalRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -322,7 +304,6 @@ SixTopHorizontalRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -335,7 +316,6 @@ SixTopHorizontalRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -348,7 +328,6 @@ SixTopHorizontalRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -361,7 +340,6 @@ SixTopHorizontalRectangleTable.args = { chairIndex: 4, tableIndex: 2, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, ], @@ -391,7 +369,6 @@ SquareTableEditPage.args = { chairIndex: 0, tableIndex: 3, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -404,7 +381,6 @@ SquareTableEditPage.args = { chairIndex: 1, tableIndex: 3, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -417,7 +393,6 @@ SquareTableEditPage.args = { chairIndex: 5, tableIndex: 3, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, { @@ -430,7 +405,6 @@ SquareTableEditPage.args = { chairIndex: 5, tableIndex: 3, selectedIndex: 3, - tabIndex: 1, onChairClick: handleOnChairClick, }, ], From e4ff32da4cd730133208f05d1d996e682d9f2b3f Mon Sep 17 00:00:00 2001 From: Yurii Date: Sat, 23 Oct 2021 14:48:13 -0700 Subject: [PATCH 11/13] Use useState instead of CSS property focus to highlight the chair --- src/Containers/Chair/Chair.tsx | 60 +++++++++++++++++++++------------- 1 file changed, 38 insertions(+), 22 deletions(-) diff --git a/src/Containers/Chair/Chair.tsx b/src/Containers/Chair/Chair.tsx index 503005ec..ba3a8159 100644 --- a/src/Containers/Chair/Chair.tsx +++ b/src/Containers/Chair/Chair.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import styled, { css, useTheme } from 'styled-components'; import { Eye, EyeSlash } from '@styled-icons/bootstrap'; @@ -89,9 +89,20 @@ export const Chair: React.FC = ({ chairIndex = -1, selectedIndex = -1, + onChairClick, ...props -}) => { +}):React.ReactElement => { + /** + * Use useState to change state of isFocusedActive and highlite + * the chair. + */ + const [isFocusedActive, setIsFocusedActive] = useState(false); + + onChairClick =() => { + setIsFocusedActive(true) + } + /** * Returns a JSX.Element for the Chair with RoundChair styles * @returns {JSX.Element} @@ -105,6 +116,7 @@ export const Chair: React.FC = ({ tableUse={tableUse} isVisible={isVisible} tabIndex={0} + isFocusedActive={isFocusedActive} > {getChairText()} @@ -114,7 +126,6 @@ export const Chair: React.FC = ({ /** * Returns a JSX.Element for the Chair with the correct styles based on position * @returns {JSX.Element} - * */ const getPositionChair: getPositionChairType = () => (
@@ -125,6 +136,7 @@ export const Chair: React.FC = ({ tableUse={tableUse} isVisible={isVisible} tabIndex={0} + isFocusedActive={isFocusedActive} > {getChairText()} @@ -188,18 +200,18 @@ export const Chair: React.FC = ({ onChairClick(tableIndex, chairIndex, selectedIndex); }; - if (tableUse === 'TableForEditCanvas') { - return ( - - {isRound ? getRoundChair() : getPositionChair()} - - ); - } + + return ( + + {isRound ? getRoundChair() : getPositionChair()} + + ); + return isRound ? getRoundChair() : getPositionChair(); }; @@ -404,7 +416,7 @@ interface IBaseChair { isSeated: boolean; tableUse: tableUseTypes; isVisible: boolean; - + isFocusedActive: boolean; } const BaseChair = styled.div` @@ -428,9 +440,12 @@ const RoundChair = styled(BaseChair)>` relativeSize * BASE_BORDER_WIDTH_FOR_ROUND_CHAIR }px solid black;`; }} - &:focus { - box-shadow: 0 0 0 2px; - } + //&:focus { + // box-shadow: 0 0 0 2px; + //} + box-shadow: ${({ isFocusedActive + }) => (isFocusedActive && + '0 0 0 2px')}; `; const RectangleChair = styled(BaseChair)< @@ -443,9 +458,10 @@ const RectangleChair = styled(BaseChair)< left: VerticalChairStyle, right: VerticalChairStyle, }[position])}; - &:focus { - box-shadow: 0 0 0 2px; - } + + box-shadow: ${({ isFocusedActive + }) => (isFocusedActive && + '0 0 0 2px')}; `; const RectangleChairText = styled.div< From 7c47d6015cfc5c30188a38e3c1e31cdd7af4276e Mon Sep 17 00:00:00 2001 From: Yurii Date: Sat, 23 Oct 2021 14:53:11 -0700 Subject: [PATCH 12/13] delete chairTabIndexAtribute from Chair parameters --- src/Containers/CircleTable/CircleTable.tsx | 1 - src/Containers/SquareTable/SquareTable.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/src/Containers/CircleTable/CircleTable.tsx b/src/Containers/CircleTable/CircleTable.tsx index de7c2a30..39d7a9e1 100644 --- a/src/Containers/CircleTable/CircleTable.tsx +++ b/src/Containers/CircleTable/CircleTable.tsx @@ -141,7 +141,6 @@ export const CircleTable: React.FC = ({ chairIndex={index} selectedIndex={selectedIndex} onChairClick={onChairClick} - chairTabIndexAtribute={item.chairTabIndexAtribute} /> )); diff --git a/src/Containers/SquareTable/SquareTable.tsx b/src/Containers/SquareTable/SquareTable.tsx index 1f41bcb0..b0637778 100644 --- a/src/Containers/SquareTable/SquareTable.tsx +++ b/src/Containers/SquareTable/SquareTable.tsx @@ -243,7 +243,6 @@ export const SquareTable: React.FC = ({ tableIndex: arrayIndex, selectedIndex, onChairClick, - chairTabIndexAtribute: 0, }); } }; From 39b65eb8b363930e85fe94d50bcafdb5b78ac173 Mon Sep 17 00:00:00 2001 From: Yurii Date: Sat, 23 Oct 2021 15:03:24 -0700 Subject: [PATCH 13/13] Delete comented (unused) code --- src/Containers/Chair/Chair.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Containers/Chair/Chair.tsx b/src/Containers/Chair/Chair.tsx index ba3a8159..623a3917 100644 --- a/src/Containers/Chair/Chair.tsx +++ b/src/Containers/Chair/Chair.tsx @@ -440,9 +440,7 @@ const RoundChair = styled(BaseChair)>` relativeSize * BASE_BORDER_WIDTH_FOR_ROUND_CHAIR }px solid black;`; }} - //&:focus { - // box-shadow: 0 0 0 2px; - //} + box-shadow: ${({ isFocusedActive }) => (isFocusedActive && '0 0 0 2px')};