From 053520de2ed80972541c27fcbb6e5ab8417f193d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Wed, 11 Sep 2024 22:20:05 +0200 Subject: [PATCH] pl-fe: improve keyboard navigation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- packages/pl-fe/package.json | 2 +- packages/pl-fe/src/components/status-list.tsx | 8 ++++++-- .../conversations/components/conversations-list.tsx | 11 ++++++----- .../pl-fe/src/features/event/event-discussion.tsx | 11 ++++++----- packages/pl-fe/src/features/notifications/index.tsx | 12 ++++++------ .../features/search/components/search-results.tsx | 8 ++++++-- .../pl-fe/src/features/status/components/thread.tsx | 8 +++++++- packages/pl-fe/yarn.lock | 8 ++++---- 8 files changed, 42 insertions(+), 26 deletions(-) diff --git a/packages/pl-fe/package.json b/packages/pl-fe/package.json index f963db07d..79ce79371 100644 --- a/packages/pl-fe/package.json +++ b/packages/pl-fe/package.json @@ -160,7 +160,7 @@ "react-sparklines": "^1.7.0", "react-sticky-box": "^2.0.0", "react-swipeable-views": "^0.14.0", - "react-virtuoso": "^4.10.2", + "react-virtuoso": "^4.10.4", "redux": "^5.0.0", "redux-immutable": "^4.0.0", "redux-thunk": "^3.1.0", diff --git a/packages/pl-fe/src/components/status-list.tsx b/packages/pl-fe/src/components/status-list.tsx index 76f4095d5..d21374fab 100644 --- a/packages/pl-fe/src/components/status-list.tsx +++ b/packages/pl-fe/src/components/status-list.tsx @@ -92,12 +92,16 @@ const StatusList: React.FC = ({ }, 300, { leading: true }), [onLoadMore, lastStatusId, statusIds.last()]); const selectChild = (index: number) => { + const selector = `#status-list [data-index="${index}"] .focusable`; + const element = document.querySelector(selector); + + if (element) element.focus(); + node.current?.scrollIntoView({ index, behavior: 'smooth', done: () => { - const element = document.querySelector(`#status-list [data-index="${index}"] .focusable`); - element?.focus(); + if (!element) document.querySelector(selector)?.focus(); }, }); }; diff --git a/packages/pl-fe/src/features/conversations/components/conversations-list.tsx b/packages/pl-fe/src/features/conversations/components/conversations-list.tsx index 7b3b96cdf..34127d49a 100644 --- a/packages/pl-fe/src/features/conversations/components/conversations-list.tsx +++ b/packages/pl-fe/src/features/conversations/components/conversations-list.tsx @@ -31,15 +31,16 @@ const ConversationsList: React.FC = () => { }; const selectChild = (index: number) => { + const selector = `#direct-list [data-index="${index}"] .focusable`; + const element = document.querySelector(selector); + + if (element) element.focus(); + ref.current?.scrollIntoView({ index, behavior: 'smooth', done: () => { - const element = document.querySelector(`#direct-list [data-index="${index}"] .focusable`); - - if (element) { - element.focus(); - } + if (!element) document.querySelector(selector)?.focus(); }, }); }; diff --git a/packages/pl-fe/src/features/event/event-discussion.tsx b/packages/pl-fe/src/features/event/event-discussion.tsx index f2390cfa3..039fb9327 100644 --- a/packages/pl-fe/src/features/event/event-discussion.tsx +++ b/packages/pl-fe/src/features/event/event-discussion.tsx @@ -83,15 +83,16 @@ const EventDiscussion: React.FC = (props) => { }; const _selectChild = (index: number) => { + const selector = `#thread [data-index="${index}"] .focusable`; + const element = document.querySelector(selector); + + if (element) element.focus(); + scroller.current?.scrollIntoView({ index, behavior: 'smooth', done: () => { - const element = document.querySelector(`#thread [data-index="${index}"] .focusable`); - - if (element) { - element.focus(); - } + if (!element) document.querySelector(selector)?.focus(); }, }); }; diff --git a/packages/pl-fe/src/features/notifications/index.tsx b/packages/pl-fe/src/features/notifications/index.tsx index 0544e29ab..31f7802f9 100644 --- a/packages/pl-fe/src/features/notifications/index.tsx +++ b/packages/pl-fe/src/features/notifications/index.tsx @@ -77,16 +77,16 @@ const Notifications = () => { }; const _selectChild = (index: number) => { + const selector = `[data-index="${index}"] .focusable`; + const element = document.querySelector(selector); + + if (element) element.focus(); + node.current?.scrollIntoView({ index, behavior: 'smooth', done: () => { - const container = column.current; - const element = container?.querySelector(`[data-index="${index}"] .focusable`); - - if (element) { - (element as HTMLDivElement).focus(); - } + if (!element) document.querySelector(selector)?.focus(); }, }); }; diff --git a/packages/pl-fe/src/features/search/components/search-results.tsx b/packages/pl-fe/src/features/search/components/search-results.tsx index 73c6a5ce4..34891951f 100644 --- a/packages/pl-fe/src/features/search/components/search-results.tsx +++ b/packages/pl-fe/src/features/search/components/search-results.tsx @@ -100,12 +100,16 @@ const SearchResults = () => { }; const selectChild = (index: number) => { + const selector = `#search-results [data-index="${index}"] .focusable`; + const element = document.querySelector(selector); + + if (element) element.focus(); + node.current?.scrollIntoView({ index, behavior: 'smooth', done: () => { - const element = document.querySelector(`#search-results [data-index="${index}"] .focusable`); - element?.focus(); + if (!element) document.querySelector(selector)?.focus(); }, }); }; diff --git a/packages/pl-fe/src/features/status/components/thread.tsx b/packages/pl-fe/src/features/status/components/thread.tsx index 27512c263..e03ce37c3 100644 --- a/packages/pl-fe/src/features/status/components/thread.tsx +++ b/packages/pl-fe/src/features/status/components/thread.tsx @@ -233,11 +233,17 @@ const Thread: React.FC = ({ const _selectChild = (index: number) => { if (!useWindowScroll) index = index + 1; + + const selector = `[data-index="${index}"] .focusable`; + const element = node.current?.querySelector(selector); + + if (element) element.focus(); + scroller.current?.scrollIntoView({ index, behavior: 'smooth', done: () => { - node.current?.querySelector(`[data-index="${index}"] .focusable`)?.focus(); + if (!element) node.current?.querySelector(selector)?.focus(); }, }); }; diff --git a/packages/pl-fe/yarn.lock b/packages/pl-fe/yarn.lock index 4b72fd541..c873f7d1e 100644 --- a/packages/pl-fe/yarn.lock +++ b/packages/pl-fe/yarn.lock @@ -9054,10 +9054,10 @@ react-transition-group@^2.2.1: prop-types "^15.6.2" react-lifecycles-compat "^3.0.4" -react-virtuoso@^4.10.2: - version "4.10.2" - resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-4.10.2.tgz#a27308a3c4cfeb24722032acc0b6a46055c26967" - integrity sha512-os6n9QKeKRF+8mnQR/vGy/xrFf6vXIzuaAVL54q5k2st2d5QIEwI+KDKaflMUmMvnDbPxf68bs+CF5bY3YI7qA== +react-virtuoso@^4.10.4: + version "4.10.4" + resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-4.10.4.tgz#856ed415d7071db0c666ce84809bab8bb834f45c" + integrity sha512-G/gprhTbK+lzMxoo/iStcZxVEGph/cIhc3WANEpt92RuMw+LiCZOmBfKoeoZOHlm/iyftTrDJhGaTCpxyucnkQ== react@^18.0.0: version "18.2.0"