nicolium: event create page a11y

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

packages/pl-fe/src/components/location-search.tsx

@@ -17,10 +17,11 @@ const messages = defineMessages({
 });
 
 interface ILocationSearch {
+  id?: string;
   onSelected: (location: Location) => void;
 }
 
-const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
+const LocationSearch: React.FC<ILocationSearch> = ({ id, onSelected }) => {
   const intl = useIntl();
 
   const [value, setValue] = useState('');
@@ -60,6 +61,7 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
   return (
     <div className='relative'>
       <AutosuggestInput
+        id={id}
         className='rounded-full'
         placeholder={intl.formatMessage(messages.placeholder)}
         value={value}

packages/pl-fe/src/components/ui/text.tsx

@@ -70,7 +70,7 @@ type Directions = 'ltr' | 'rtl';
 
 interface IText extends Pick<
   React.HTMLAttributes<HTMLParagraphElement>,
-  'dangerouslySetInnerHTML' | 'tabIndex' | 'lang' | 'onClick' | 'role'
+  'dangerouslySetInnerHTML' | 'tabIndex' | 'lang' | 'onClick' | 'role' | 'id'
 > {
   /** Text content. */
   children?: React.ReactNode;

packages/pl-fe/src/features/compose-event/tabs/edit-event.tsx

@@ -338,8 +338,8 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
         />
       </FormGroup>
       <HStack alignItems='center' space={2}>
-        <Toggle checked={!!endTime} onChange={onChangeHasEndTime} />
-        <Text tag='span' theme='muted'>
+        <Toggle checked={!!endTime} onChange={onChangeHasEndTime} id='has-end-time-toggle' />
+        <Text htmlFor='has-end-time-toggle' tag='label' theme='muted'>
           <FormattedMessage
             id='compose_event.fields.has_end_time'
             defaultMessage='This event has an end date'
@@ -369,8 +369,12 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
       )}
       {!statusId && (
         <HStack alignItems='center' space={2}>
-          <Toggle checked={approvalRequired} onChange={onChangeApprovalRequired} />
-          <Text tag='span' theme='muted'>
+          <Toggle
+            checked={approvalRequired}
+            onChange={onChangeApprovalRequired}
+            id='approval-required-toggle'
+          />
+          <Text htmlFor='approval-required-toggle' tag='label' theme='muted'>
             <FormattedMessage
               id='compose_event.fields.approval_required'
               defaultMessage='I want to approve participation requests manually'

packages/pl-fe/src/styles/new/events.scss

@@ -1,8 +1,6 @@
 @use 'mixins';
 
 .⁂-edit-event {
-  @apply space-y-4;
-
   .⁂-content-type-button {
     position: absolute;
     top: 0.5rem;