nicolium: random a11y improvements

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/components/account.tsx

@@ -65,7 +65,14 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
   const className = 'size-4 flex-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2';
 
   if (disabled) {
-    return <img src={account.favicon} alt='' title={account.domain} className={className} />;
+    return (
+      <img
+        src={account.favicon}
+        alt={account.domain}
+        title={account.domain}
+        className={className}
+      />
+    );
   }
 
   return (
@@ -75,7 +82,12 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
       disabled={disabled}
       title={intl.formatMessage(messages.timeline, { domain: account.domain })}
     >
-      <img src={account.favicon} alt='' title={account.domain} className='max-h-full w-full' />
+      <img
+        src={account.favicon}
+        alt={account.domain}
+        title={account.domain}
+        className='max-h-full w-full'
+      />
     </button>
   );
 };

packages/pl-fe/src/components/authorize-reject-buttons.tsx

@@ -1,11 +1,16 @@
 import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import HStack from '@/components/ui/hstack';
 import IconButton from '@/components/ui/icon-button';
 import Text from '@/components/ui/text';
 
+const messages = defineMessages({
+  authorize: { id: 'authorize.action', defaultMessage: 'Approve' },
+  reject: { id: 'reject.action', defaultMessage: 'Reject' },
+});
+
 interface IAuthorizeRejectButtons {
   onAuthorize(): Promise<unknown> | unknown;
   onReject(): Promise<unknown> | unknown;
@@ -18,6 +23,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({
   onReject,
   countdown,
 }) => {
+  const intl = useIntl();
   const [state, setState] = useState<
     'authorizing' | 'rejecting' | 'authorized' | 'rejected' | 'pending'
   >('pending');
@@ -129,6 +135,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({
             isLoading={state === 'rejecting'}
             disabled={state === 'authorizing'}
             style={renderStyle('rejecting')}
+            title={intl.formatMessage(messages.reject)}
           />
           <AuthorizeRejectButton
             theme='primary'
@@ -137,6 +144,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({
             isLoading={state === 'authorizing'}
             disabled={state === 'rejecting'}
             style={renderStyle('authorizing')}
+            title={intl.formatMessage(messages.authorize)}
           />
         </HStack>
       );
@@ -162,6 +170,7 @@ interface IAuthorizeRejectButton {
   isLoading?: boolean;
   disabled?: boolean;
   style: React.CSSProperties;
+  title?: string;
 }
 
 const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({
@@ -171,6 +180,7 @@ const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({
   isLoading,
   style,
   disabled,
+  title,
 }) => (
   <div className='relative'>
     <div
@@ -191,6 +201,7 @@ const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({
           'text-danger-600': theme === 'danger',
         })}
         disabled={disabled}
+        title={title}
       />
     </div>
   </div>

packages/pl-fe/src/components/preview-card.tsx

@@ -7,7 +7,7 @@ import {
   mediaAttachmentSchema,
 } from 'pl-api';
 import React, { useState, useEffect } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import * as v from 'valibot';
 
 import Blurhash from '@/components/blurhash';
@@ -23,6 +23,12 @@ import Purify from '@/utils/url-purify';
 import HoverAccountWrapper from './hover-account-wrapper';
 import Avatar from './ui/avatar';
 
+const messages = defineMessages({
+  play: { id: 'preview_card.play', defaultMessage: 'Play' },
+  expand: { id: 'preview_card.expand', defaultMessage: 'Enlarge image' },
+  externalLink: { id: 'preview_card.external_link', defaultMessage: 'Open in new tab' },
+});
+
 const domParser = new DOMParser();
 
 const handleIframeUrl = (html: string, url: string, providerName: string) => {
@@ -106,6 +112,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
   cacheWidth,
   onOpenMedia,
 }): React.JSX.Element => {
+  const intl = useIntl();
   const {
     urlPrivacy: { clearLinksInContent, redirectLinksMode },
   } = useSettings();
@@ -253,6 +260,9 @@ const PreviewCard: React.FC<IPreviewCard> = ({
                 <button
                   onClick={handleEmbedClick}
                   className='appearance-none text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100'
+                  title={intl.formatMessage(
+                    card.type === 'photo' ? messages.expand : messages.play,
+                  )}
                 >
                   <Icon src={iconVariant} className='size-6 text-inherit' />
                 </button>
@@ -266,6 +276,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
                     target='_blank'
                     rel='noopener'
                     className='text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100'
+                    title={intl.formatMessage(messages.externalLink)}
                   >
                     <Icon
                       src={require('@phosphor-icons/core/regular/arrow-square-out.svg')}