From 4bc3a0c7dc08b2fa6ad2f7cb699065d29f986163 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Tue, 26 Oct 2021 11:26:58 +0200 Subject: [PATCH 1/3] Styles, set focus to sidebar on open MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/sidebar_menu.js | 4 ++++ app/styles/components/account-header.scss | 3 ++- app/styles/loading.scss | 3 ++- app/styles/navigation.scss | 5 +++++ 4 files changed, 13 insertions(+), 2 deletions(-) diff --git a/app/soapbox/components/sidebar_menu.js b/app/soapbox/components/sidebar_menu.js index 86d8af697..b5b90fdd1 100644 --- a/app/soapbox/components/sidebar_menu.js +++ b/app/soapbox/components/sidebar_menu.js @@ -141,6 +141,10 @@ class SidebarMenu extends ImmutablePureComponent { if (accountChanged || otherAccountsChanged) { this.fetchOwnAccounts(); } + + if (this.props.sidebarOpen && !prevProps.sidebarOpen) { + document.querySelector('.sidebar-menu__close').focus(); + } } renderAccount = account => { diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss index 69902227c..b09ec1c65 100644 --- a/app/styles/components/account-header.scss +++ b/app/styles/components/account-header.scss @@ -202,7 +202,8 @@ padding: 7px; opacity: 0.6; - &:hover { + &:hover, + &:focus { opacity: 1; } diff --git a/app/styles/loading.scss b/app/styles/loading.scss index be819b892..32000e89e 100644 --- a/app/styles/loading.scss +++ b/app/styles/loading.scss @@ -173,7 +173,8 @@ clear: both; text-decoration: none; - &:hover { + &:hover, + &:focus { background: var(--brand-color--faint); } } diff --git a/app/styles/navigation.scss b/app/styles/navigation.scss index d4042d052..623f59de2 100644 --- a/app/styles/navigation.scss +++ b/app/styles/navigation.scss @@ -154,6 +154,11 @@ justify-content: center; color: var(--primary-text-color--faint); + &:hover, + &:focus { + color: var(--primary-text-color); + } + .svg-icon { margin-right: 7px; width: 22px; From 1796a35951f2bd7ca2a391d016ad5e706288dff2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Tue, 26 Oct 2021 17:38:49 +0200 Subject: [PATCH 2/3] Partially fix post navigation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/column.js | 5 + app/soapbox/components/material_status.js | 6 +- app/soapbox/components/status.js | 135 +++++++++++----------- app/soapbox/components/status_list.js | 9 +- app/soapbox/features/status/index.js | 10 +- 5 files changed, 90 insertions(+), 75 deletions(-) diff --git a/app/soapbox/components/column.js b/app/soapbox/components/column.js index a8aec1542..1b5fabb05 100644 --- a/app/soapbox/components/column.js +++ b/app/soapbox/components/column.js @@ -11,6 +11,10 @@ export default class Column extends React.PureComponent { label: PropTypes.string, }; + setRef = c => { + this.node = c; + } + render() { const { className, label, children, transparent, ...rest } = this.props; @@ -20,6 +24,7 @@ export default class Column extends React.PureComponent { aria-label={label} className={classNames('column', className, { 'column--transparent': transparent })} {...rest} + ref={this.setRef} > {children} diff --git a/app/soapbox/components/material_status.js b/app/soapbox/components/material_status.js index 6454497c5..9ff242507 100644 --- a/app/soapbox/components/material_status.js +++ b/app/soapbox/components/material_status.js @@ -4,24 +4,24 @@ import React from 'react'; import PropTypes from 'prop-types'; -import StatusContainer from 'soapbox/containers/status_container'; export default class MaterialStatus extends React.Component { static propTypes = { + children: PropTypes.node, hidden: PropTypes.bool, } render() { // Performance: when hidden, don't render the wrapper divs if (this.props.hidden) { - return ; + return this.props.children; } return (
- + {this.props.children}
); diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js index de7a330ca..c13a4d6a1 100644 --- a/app/soapbox/components/status.js +++ b/app/soapbox/components/status.js @@ -95,6 +95,7 @@ class Status extends ImmutablePureComponent { displayMedia: PropTypes.string, allowedEmoji: ImmutablePropTypes.list, focusable: PropTypes.bool, + component: PropTypes.func, }; static defaultProps = { @@ -316,7 +317,7 @@ class Status extends ImmutablePureComponent { const poll = null; let statusAvatar, prepend, rebloggedByText, reblogContent; - const { intl, hidden, featured, otherAccounts, unread, showThread, group } = this.props; + const { intl, hidden, featured, otherAccounts, unread, showThread, group, wrapperComponent: WrapperComponent } = this.props; // FIXME: why does this need to reassign status and account?? let { status, account, ...other } = this.props; // eslint-disable-line prefer-const @@ -494,72 +495,76 @@ class Status extends ImmutablePureComponent { const favicon = status.getIn(['account', 'pleroma', 'favicon']); const domain = getDomain(status.get('account')); + const wrappedStatus = ( +
+ {prepend} + +
+
+
+ + + + + {favicon && +
+ + + +
} + +
+
+ + + {statusAvatar} + + +
+ + + +
+
+ + {!group && status.get('group') && ( +
+ Posted in {status.getIn(['group', 'title'])} +
+ )} + + + + {media} + {poll} + + {showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && ( + + )} + + +
+
+ ); + return ( -
- {prepend} - -
-
-
- - - - - {favicon && -
- - - -
} - -
-
- - - {statusAvatar} - - -
- - - -
-
- - {!group && status.get('group') && ( -
- Posted in {status.getIn(['group', 'title'])} -
- )} - - - - {media} - {poll} - - {showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && ( - - )} - - -
-
+ {WrapperComponent ? {wrappedStatus} : wrappedStatus} ); } diff --git a/app/soapbox/components/status_list.js b/app/soapbox/components/status_list.js index a186a8073..a48f63e74 100644 --- a/app/soapbox/components/status_list.js +++ b/app/soapbox/components/status_list.js @@ -3,6 +3,7 @@ import React from 'react'; import { FormattedMessage, defineMessages } from 'react-intl'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; +import StatusContainer from 'soapbox/containers/status_container'; import MaterialStatus from 'soapbox/components/material_status'; import PendingStatus from 'soapbox/features/ui/components/pending_status'; import ImmutablePureComponent from 'react-immutable-pure-component'; @@ -110,7 +111,7 @@ export default class StatusList extends ImmutablePureComponent { const { timelineId, withGroupAdmin, group } = this.props; return ( - ); } @@ -150,7 +153,7 @@ export default class StatusList extends ImmutablePureComponent { if (!featuredStatusIds) return null; return featuredStatusIds.map(statusId => ( - )); } diff --git a/app/soapbox/features/status/index.js b/app/soapbox/features/status/index.js index 79c5d32d1..9a3bcbb5c 100644 --- a/app/soapbox/features/status/index.js +++ b/app/soapbox/features/status/index.js @@ -1,4 +1,4 @@ -import { OrderedSet as ImmutableOrderedSet } from 'immutable'; +import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable'; import React from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; @@ -410,10 +410,10 @@ class Status extends ImmutablePureComponent { if (id === status.get('id')) { this._selectChild(ancestorsIds.size - 1, true); } else { - let index = ancestorsIds.indexOf(id); + let index = ImmutableList(ancestorsIds).indexOf(id); if (index === -1) { - index = descendantsIds.indexOf(id); + index = ImmutableList(descendantsIds).indexOf(id); this._selectChild(ancestorsIds.size + index, true); } else { this._selectChild(index - 1, true); @@ -427,10 +427,10 @@ class Status extends ImmutablePureComponent { if (id === status.get('id')) { this._selectChild(ancestorsIds.size + 1, false); } else { - let index = ancestorsIds.indexOf(id); + let index = ImmutableList(ancestorsIds).indexOf(id); if (index === -1) { - index = descendantsIds.indexOf(id); + index = ImmutableList(descendantsIds).indexOf(id); this._selectChild(ancestorsIds.size + index + 2, false); } else { this._selectChild(index + 1, false); From 187d579be0f4f4d84083ab7bc9c81bc124d5e11d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sat, 6 Nov 2021 11:26:50 +0100 Subject: [PATCH 3/3] Key navigation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/scrollable_list.js | 2 +- .../notifications/components/notification.js | 2 +- app/styles/components/status.scss | 15 +++++++-------- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/app/soapbox/components/scrollable_list.js b/app/soapbox/components/scrollable_list.js index 04ceab234..9c7da2f31 100644 --- a/app/soapbox/components/scrollable_list.js +++ b/app/soapbox/components/scrollable_list.js @@ -20,7 +20,7 @@ const mapStateToProps = state => { }; }; -export default @connect(mapStateToProps) +export default @connect(mapStateToProps, null, null, { forwardRef: true }) class ScrollableList extends PureComponent { static contextTypes = { diff --git a/app/soapbox/features/notifications/components/notification.js b/app/soapbox/features/notifications/components/notification.js index 18d24cd04..9fc3300a8 100644 --- a/app/soapbox/features/notifications/components/notification.js +++ b/app/soapbox/features/notifications/components/notification.js @@ -174,7 +174,7 @@ class Notification extends ImmutablePureComponent { renderMention(notification) { return ( -
+