Birthdays: Accessibility improvements/fixes

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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 (
       <HotKeys handlers={this.getHandlers()}>
-        <div className='notification notification-birthday'>
+        <div className='notification notification-birthday focusable' tabIndex='0' title={this.renderMessageForScreenReader()}>
           <div className='notification__message'>
             <div className='notification__icon-wrapper'>
               <Icon src={require('@tabler/icons/icons/ballon.svg')} />

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(<BirthdayReminders key='birthdays' />);
+      if (showBirthdayReminders) scrollableContent = scrollableContent.unshift(
+        <BirthdayReminders
+          key='birthdays'
+          onMoveDown={this.handleMoveBelowBirthdays}
+        />,
+      );
     } else {
       scrollableContent = null;
     }