feat: improve accessibility

Author: fvitas

apps/extension/manifest.chrome.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Epic Zeit",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "author": "Filip Vitas",
   "description": "Epic way to sync timezones among colleagues, friends, and family across the globe.",
   "icons": {

apps/extension/manifest.firefox.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Epic Zeit",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "author": "Filip Vitas",
   "description": "Epic way to sync timezones among colleagues, friends, and family across the globe.",
   "icons": {

apps/extension/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epiczeit/extension",
   "private": true,
-  "version": "1.3.0",
+  "version": "1.3.1",
   "type": "module",
   "keywords": [
     "chrome",

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epiczeit/web",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "type": "module",
   "keywords": [
     "react",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "epiczeit",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "private": true,
   "type": "module",
   "keywords": [

packages/ui/src/components/LocationLabelWithDialog.jsx

@@ -35,7 +35,7 @@ export function LocationLabelWithDialog({ location }) {
 
   return (
     <Dialog open={isOpen} onOpenChange={open => setIsOpen(open)}>
-      <DialogTrigger asChild>
+      <DialogTrigger>
         <div className="overflow-hidden truncate cursor-pointer">{location.label}</div>
       </DialogTrigger>
 

packages/ui/src/components/Timezone.jsx

@@ -137,6 +137,16 @@ export function Timezone({ currentTime, timezone }) {
     currentTime,
   )
 
+  function deleteTimezone() {
+    actions.deleteTimezone(timezone)
+  }
+
+  function deleteTimezoneOnKeyDown(event) {
+    if (event.code === 'Enter' || event.code === 'Space') {
+      actions.deleteTimezone(timezone)
+    }
+  }
+
   useEffect(() => {
     $('.clockpicker-' + timezone.offset).clockpicker({
       twelvehour: !show24h,
@@ -165,7 +175,7 @@ export function Timezone({ currentTime, timezone }) {
         }}
         className="text-center px-2 focus-visible:outline focus-visible:outline-1 focus-visible:outline-primary">
         <div className={'inline-block ' + 'clockpicker-' + timezone.offset}>
-          <label htmlFor={`time-${timezone.offset}`} className="flex flex-wrap justify-center">
+          <label htmlFor={`time-${timezone.offset}`} className="flex flex-wrap justify-center cursor-pointer">
             <span className={showBoldHour ? 'font-semibold' : ''}>{hours}</span>
             <span>:</span>
             <span>
@@ -212,11 +222,13 @@ export function Timezone({ currentTime, timezone }) {
         </ul>
       </div>
 
-      <div className="absolute bottom-20 left-1/2 translate-x-[-50%] translate-y-[-20%] flex flex-col gap-4 invisible group-hover:visible">
+      <div className="absolute bottom-20 left-1/2 translate-x-[-50%] translate-y-[-20%] flex flex-col gap-4 invisible group-hover:visible group-focus-within:visible">
         <IconTrash
           stroke={1.5}
           className="cursor-pointer"
-          onClick={() => actions.deleteTimezone(timezone)}
+          onClick={deleteTimezone}
+          onKeyDown={deleteTimezoneOnKeyDown}
+          tabIndex={0}
           title="Delete timezone"
         />
       </div>