nicolium: some mostly a11y-related changes

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

packages/pl-fe/src/features/compose/components/compose-form.tsx

@@ -121,7 +121,7 @@ const ComposeButton: React.FC<IComposeButton> = ({
           className='⁂-compose-form__button__actions'
           title={intl.formatMessage(messages.more)}
         >
-          <SvgIcon src={require('@phosphor-icons/core/regular/caret-down.svg')} />
+          <SvgIcon src={require('@phosphor-icons/core/regular/caret-down.svg')} aria-hidden />
         </button>
       </DropdownMenu>
     </div>

packages/pl-fe/src/features/compose/components/polls/duration-selector.tsx

@@ -4,18 +4,21 @@ import { defineMessages, useIntl } from 'react-intl';
 import Select from '@/components/ui/select';
 
 const messages = defineMessages({
-  minutes: {
-    id: 'intervals.full.minutes',
-    defaultMessage: '{number, plural, one {# minute} other {# minutes}}',
+  days: {
+    id: 'intervals.full.days',
+    defaultMessage: '{number, plural, one {# day} other {# days}}',
   },
   hours: {
     id: 'intervals.full.hours',
     defaultMessage: '{number, plural, one {# hour} other {# hours}}',
   },
-  days: {
-    id: 'intervals.full.days',
-    defaultMessage: '{number, plural, one {# day} other {# days}}',
+  minutes: {
+    id: 'intervals.full.minutes',
+    defaultMessage: '{number, plural, one {# minute} other {# minutes}}',
   },
+  daysTitle: { id: 'compose_form.poll.duration.days', defaultMessage: 'Days' },
+  hoursTitle: { id: 'compose_form.poll.duration.hours', defaultMessage: 'Hours' },
+  minutesTitle: { id: 'compose_form.poll.duration.minutes', defaultMessage: 'Minutes' },
 });
 
 interface IDurationSelector {
@@ -52,6 +55,7 @@ const DurationSelector = ({ onDurationChange, value }: IDurationSelector) => {
             setDays(Number(event.target.value));
           }}
           data-testid='duration-selector-days'
+          title={intl.formatMessage(messages.daysTitle)}
         >
           {[...Array(8).fill(undefined)].map((_, number) => (
             <option value={number} key={number}>
@@ -69,6 +73,7 @@ const DurationSelector = ({ onDurationChange, value }: IDurationSelector) => {
           }}
           disabled={days === 7}
           data-testid='duration-selector-hours'
+          title={intl.formatMessage(messages.hoursTitle)}
         >
           {[...Array(24).fill(undefined)].map((_, number) => (
             <option value={number} key={number}>
@@ -86,6 +91,7 @@ const DurationSelector = ({ onDurationChange, value }: IDurationSelector) => {
           }}
           disabled={days === 7}
           data-testid='duration-selector-minutes'
+          title={intl.formatMessage(messages.minutesTitle)}
         >
           {[0, 15, 30, 45].map((number) => (
             <option value={number} key={number}>

packages/pl-fe/src/features/compose/components/polls/poll-form.tsx

@@ -42,19 +42,7 @@ const messages = defineMessages({
     id: 'compose_form.poll.switch_to_single',
     defaultMessage: 'Change poll to allow for a single answer',
   },
-  minutes: {
-    id: 'intervals.full.minutes',
-    defaultMessage: '{number, plural, one {# minute} other {# minutes}}',
-  },
-  hours: {
-    id: 'intervals.full.hours',
-    defaultMessage: '{number, plural, one {# hour} other {# hours}}',
-  },
-  days: {
-    id: 'intervals.full.days',
-    defaultMessage: '{number, plural, one {# day} other {# days}}',
-  },
-  multiSelect: { id: 'compose_form.poll.multiselect', defaultMessage: 'Multi-Select' },
+  multiSelect: { id: 'compose_form.poll.multiselect', defaultMessage: 'Multi-select' },
   multiSelectDetail: {
     id: 'compose_form.poll.multiselect_detail',
     defaultMessage: 'Allow users to select multiple answers',
@@ -219,7 +207,7 @@ const PollForm: React.FC<IPollForm> = ({ composeId }) => {
 
       <Divider />
 
-      <button type='button' onClick={handleToggleMultiple} className='text-start'>
+      <label className='text-start'>
         <HStack alignItems='center' justifyContent='between'>
           <Stack>
             <Text weight='medium'>{intl.formatMessage(messages.multiSelect)}</Text>
@@ -231,7 +219,7 @@ const PollForm: React.FC<IPollForm> = ({ composeId }) => {
 
           <Toggle checked={isMultiple} onChange={handleToggleMultiple} />
         </HStack>
-      </button>
+      </label>
 
       <Divider />
 

packages/pl-fe/src/locales/en.json

@@ -591,7 +591,10 @@
   "compose_form.placeholder": "What's on your mind?",
   "compose_form.poll.add_option": "Add an answer",
   "compose_form.poll.duration": "Poll duration",
-  "compose_form.poll.multiselect": "Multi-Select",
+  "compose_form.poll.duration.days": "Days",
+  "compose_form.poll.duration.hours": "Hours",
+  "compose_form.poll.duration.minutes": "Minutes",
+  "compose_form.poll.multiselect": "Multi-select",
   "compose_form.poll.multiselect_detail": "Allow users to select multiple answers",
   "compose_form.poll.option_placeholder": "Answer #{number}",
   "compose_form.poll.remove": "Remove poll",