Improving A11y across pages (#2219)

* Improving Event-Types A11y

* Fixing more A11y Issues

* Removing Yarn.lock

apps/web/components/availability/Schedule.tsx

@@ -5,11 +5,11 @@ import utc from "dayjs/plugin/utc";
 import React, { useCallback, useState } from "react";
 import { Controller, useFieldArray } from "react-hook-form";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 
 import { defaultDayRange } from "@lib/availability";
 import { weekdayNames } from "@lib/core/i18n/weekday";
-import { useLocale } from "@lib/hooks/useLocale";
 import { TimeRange } from "@lib/types/schedule";
 
 import { useMeQuery } from "@components/Shell";
@@ -169,6 +169,7 @@ const ScheduleBlock = ({ name, day, weekday }: ScheduleBlockProps) => {
               size="icon"
               color="minimal"
               StartIcon={TrashIcon}
+              aria-label={t("remove")}
               type="button"
               onClick={() => remove(index)}
             />
@@ -183,6 +184,7 @@ const ScheduleBlock = ({ name, day, weekday }: ScheduleBlockProps) => {
           size="icon"
           className={fields.length > 0 ? "visible" : "invisible"}
           StartIcon={PlusIcon}
+          aria-label={t("add")}
           onClick={handleAppend}
         />
       </div>

apps/web/pages/event-types/[type].tsx

@@ -784,10 +784,11 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                         locationFormMethods.unregister("locationAddress");
                         openLocationModal(location.type);
                       }}
+                      aria-label={t("edit")}
                       className="mr-1 p-1 text-gray-500 hover:text-gray-900">
                       <PencilIcon className="h-4 w-4" />
                     </button>
-                    <button type="button" onClick={() => removeLocation(location)}>
+                    <button type="button" onClick={() => removeLocation(location)} aria-label={t("remove")}>
                       <XIcon className="border-l-1 h-6 w-6 pl-1 text-gray-500 hover:text-gray-900 " />
                     </button>
                   </div>
@@ -883,7 +884,10 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                   <div className="space-y-3">
                     <div className="block items-center sm:flex">
                       <div className="min-w-48 mb-4 sm:mb-0">
-                        <label htmlFor="slug" className="flex text-sm font-medium text-neutral-700">
+                        <label
+                          id="slug-label"
+                          htmlFor="slug"
+                          className="flex text-sm font-medium text-neutral-700">
                           <LinkIcon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
                           {t("url")}
                         </label>
@@ -896,6 +900,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                           </span>
                           <input
                             type="text"
+                            id="slug"
+                            aria-labelledby="slug-label"
                             required
                             className="focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 sm:text-sm"
                             defaultValue={eventType.slug}