diff --git a/app/soapbox/components/birthday_reminders.js b/app/soapbox/components/birthday_reminders.js index 8c1896bf7..9a14f1f55 100644 --- a/app/soapbox/components/birthday_reminders.js +++ b/app/soapbox/components/birthday_reminders.js @@ -39,6 +39,7 @@ class BirthdayReminders extends ImmutablePureComponent { birthdays: ImmutablePropTypes.orderedSet, intl: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, + onMoveDown: PropTypes.func, }; componentDidMount() { @@ -55,6 +56,7 @@ class BirthdayReminders extends ImmutablePureComponent { getHandlers() { return { open: this.handleOpenBirthdaysModal, + moveDown: this.props.onMoveDown, }; } @@ -102,6 +104,31 @@ class BirthdayReminders extends ImmutablePureComponent { ); } + renderMessageForScreenReader = () => { + const { intl, birthdays, account } = this.props; + + if (birthdays.size === 1) { + return intl.formatMessage({ id: 'notification.birthday', defaultMessage: '{name} has birthday today' }, { name: account.get('display_name') }); + } + + return intl.formatMessage( + { + id: 'notification.birthday_plural', + defaultMessage: '{name} and {more} have birthday today', + }, + { + name: account.get('display_name'), + more: intl.formatMessage( + { + id: 'notification.birthday.more', + defaultMessage: '{count} more {count, plural, one {friend} other {friends}}', + }, + { count: birthdays.size - 1 }, + ), + }, + ); + } + render() { const { birthdays } = this.props; @@ -109,7 +136,7 @@ class BirthdayReminders extends ImmutablePureComponent { return ( -
+
diff --git a/app/soapbox/features/notifications/index.js b/app/soapbox/features/notifications/index.js index 57edf8315..29434fa65 100644 --- a/app/soapbox/features/notifications/index.js +++ b/app/soapbox/features/notifications/index.js @@ -51,6 +51,8 @@ const mapStateToProps = state => { const settings = getSettings(state); const instance = state.get('instance'); const features = getFeatures(instance); + const showBirthdayReminders = settings.getIn(['notifications', 'birthdays', 'show']) && settings.getIn(['notifications', 'quickFilter', 'active']) === 'all' && features.birthDates; + const birthdays = showBirthdayReminders && state.getIn(['user_lists', 'birthday_reminders', state.get('me')]); return { showFilterBar: settings.getIn(['notifications', 'quickFilter', 'show']), @@ -59,7 +61,8 @@ const mapStateToProps = state => { isUnread: state.getIn(['notifications', 'unread']) > 0, hasMore: state.getIn(['notifications', 'hasMore']), totalQueuedNotificationsCount: state.getIn(['notifications', 'totalQueuedNotificationsCount'], 0), - showBirthdayReminders: settings.getIn(['notifications', 'birthdays', 'show']) && settings.getIn(['notifications', 'quickFilter', 'active']) === 'all' && features.birthDates, + showBirthdayReminders, + hasBirthdays: !!birthdays, }; }; @@ -78,6 +81,7 @@ class Notifications extends React.PureComponent { dequeueNotifications: PropTypes.func, totalQueuedNotificationsCount: PropTypes.number, showBirthdayReminders: PropTypes.bool, + hasBirthdays: PropTypes.bool, }; componentWillUnmount() { @@ -114,15 +118,25 @@ class Notifications extends React.PureComponent { } handleMoveUp = id => { - const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) - 1; + const { hasBirthdays } = this.props; + + let elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) - 1; + if (hasBirthdays) elementIndex++; this._selectChild(elementIndex, true); } handleMoveDown = id => { - const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) + 1; + const { hasBirthdays } = this.props; + + let elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) + 1; + if (hasBirthdays) elementIndex++; this._selectChild(elementIndex, false); } + handleMoveBelowBirthdays = () => { + this._selectChild(1, false); + } + _selectChild(index, align_top) { const container = this.column.node; const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`); @@ -175,7 +189,12 @@ class Notifications extends React.PureComponent { /> )); - if (showBirthdayReminders) scrollableContent = scrollableContent.unshift(); + if (showBirthdayReminders) scrollableContent = scrollableContent.unshift( + , + ); } else { scrollableContent = null; }