From 677365c6da7a0087f852be9519ccfcdb5722d50e Mon Sep 17 00:00:00 2001
From: Arhey <github@oiya.xyz>
Date: Fri, 17 Feb 2023 15:00:32 +0300
Subject: [PATCH] Fixes the markup to comply with A11y

---
 src/components/GuideItem.svelte         | 7 ++++---
 src/components/GuidesPopup.svelte       | 4 ++--
 src/components/NavBar.svelte            | 7 ++++++-
 src/components/SearchSyntaxPopup.svelte | 2 +-
 src/components/StreamItem.svelte        | 6 +++---
 src/components/StreamsPopup.svelte      | 4 ++--
 6 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/GuideItem.svelte b/src/components/GuideItem.svelte
index d29c8b952..257c5dbe1 100644
--- a/src/components/GuideItem.svelte
+++ b/src/components/GuideItem.svelte
@@ -14,7 +14,7 @@
     class="w-full inline-flex justify-between px-3 py-2 border-gray-200 dark:border-gray-600"
     class:border-b="{expanded}"
   >
-    <div class="flex space-x-3 items-center max-w-[90%]">
+    <div class="flex space-x-3 items-center max-w-[90%] w-full">
       <button
         class="w-4 h-4 flex justify-center align-middle text-gray-500 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-600 shrink-0"
         on:click="{() => {expanded = !expanded}}"
@@ -36,12 +36,13 @@
         </svg>
       </button>
       <a
-        class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-100 hover:text-blue-500 hover:underline inline-flex align-middle"
+        class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-100 hover:text-blue-500 hover:underline inline-flex align-middle max-w-[85%] w-full"
         href="{guide.url}"
         title="{guide.url}"
         target="_blank"
+        rel="noreferrer"
       >
-        <span class="truncate max-w-[30rem]">{guide.url}</span
+        <span class="truncate">{guide.url}</span
         ><span
           class="inline-flex items-center pl-1 text-sm font-semibold text-gray-500 rounded-full"
         >
diff --git a/src/components/GuidesPopup.svelte b/src/components/GuidesPopup.svelte
index ffc8fe08d..5a9c0af24 100644
--- a/src/components/GuidesPopup.svelte
+++ b/src/components/GuidesPopup.svelte
@@ -1,5 +1,5 @@
 <script>
-  import GuideItem from './GuideItem.svelte'
+  import GuideItem from '~/components/GuideItem.svelte'
   import { getContext } from 'svelte'
   const { close } = getContext('simple-modal')
 
@@ -7,7 +7,7 @@
   export let title = 'Guides'
 </script>
 
-<div class="relative px-2 py-[9rem] flex justify-center" on:click|self="{close}">
+<div class="relative px-2 py-[9rem] flex justify-center" on:keypress on:click|self="{close}">
   <div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-2xl">
     <div
       class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
diff --git a/src/components/NavBar.svelte b/src/components/NavBar.svelte
index 196427b9a..b8d69e5a4 100644
--- a/src/components/NavBar.svelte
+++ b/src/components/NavBar.svelte
@@ -37,7 +37,7 @@
 </script>
 
 <nav
-  class="bg-white border-b border-gray-200 px-2 sm:px-4 py-2.5 dark:border-gray-600 dark:bg-gray-800"
+  class="bg-white border-b border-gray-200 px-2 sm:px-4 py-2.5 dark:border-gray-700 dark:bg-gray-800"
 >
   <div class="container flex justify-between items-center max-w-6xl mx-auto px-4 sm:px-2">
     <div class="flex flex-start items-center basis-[24rem] shrink">
@@ -60,6 +60,7 @@
               href="https://github.com/iptv-org/iptv"
               class="block py-2 pr-4 pl-3 text-sm text-gray-700 border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
               target="_blank"
+              rel="noreferrer"
               >Playlists<span
                 class="inline-flex items-center p-1 mr-2 text-sm font-semibold text-gray-400 rounded-full"
               >
@@ -80,6 +81,7 @@
               href="https://github.com/iptv-org/epg"
               class="block py-2 pr-4 pl-3 text-sm text-gray-700 border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
               target="_blank"
+              rel="noreferrer"
               >EPG<span
                 class="inline-flex items-center p-1 mr-2 text-sm font-semibold text-gray-400 rounded-full"
               >
@@ -100,6 +102,7 @@
               href="https://github.com/iptv-org/database"
               class="block py-2 pr-4 pl-3 text-sm text-gray-700 border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
               target="_blank"
+              rel="noreferrer"
               >Database<span
                 class="inline-flex items-center p-1 mr-2 text-sm font-semibold text-gray-400 rounded-full"
               >
@@ -120,6 +123,7 @@
               href="https://github.com/iptv-org/api"
               class="block py-2 pr-4 pl-3 text-sm text-gray-700 border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
               target="_blank"
+              rel="noreferrer"
               >API<span
                 class="inline-flex items-center p-1 mr-2 text-sm font-semibold text-gray-400 rounded-full"
               >
@@ -173,6 +177,7 @@
         href="https://github.com/iptv-org/"
         class="inline-flex text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full text-sm p-2.5 ml-1"
         target="_blank"
+        rel="noreferrer"
         aria-label="GitHub"
       >
         <svg
diff --git a/src/components/SearchSyntaxPopup.svelte b/src/components/SearchSyntaxPopup.svelte
index 2bd8bba44..69d8c8a24 100644
--- a/src/components/SearchSyntaxPopup.svelte
+++ b/src/components/SearchSyntaxPopup.svelte
@@ -41,7 +41,7 @@
   ]
 </script>
 
-<div class="relative px-2 py-[7rem] flex justify-center" on:click|self="{close}">
+<div class="relative px-2 py-[7rem] flex justify-center" on:keypress on:click|self="{close}">
   <div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-2xl">
     <div
       class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
diff --git a/src/components/StreamItem.svelte b/src/components/StreamItem.svelte
index 9191c2997..b49f5b839 100644
--- a/src/components/StreamItem.svelte
+++ b/src/components/StreamItem.svelte
@@ -14,7 +14,7 @@
     class="w-full inline-flex justify-between px-3 py-2 border-gray-200 dark:border-gray-600"
     class:border-b="{expanded}"
   >
-    <div class="flex space-x-3 items-center max-w-[90%]">
+    <div class="flex space-x-3 items-center max-w-[90%] w-full">
       <button
         class="w-4 h-4 flex justify-center align-middle text-gray-500 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-600 shrink-0"
         on:click="{() => {expanded = !expanded}}"
@@ -46,13 +46,13 @@
         <circle cx="50" cy="50" r="50" />
       </svg>
       <a
-        class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-100 hover:text-blue-500 hover:underline inline-flex align-middle"
+        class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-100 hover:text-blue-500 hover:underline inline-flex align-middle max-w-[85%] w-full"
         href="{stream.url}"
         title="{stream.url}"
         target="_blank"
         rel="noopener noreferrer"
       >
-        <span class="truncate max-w-[30rem]">{stream.url}</span
+        <span class="truncate">{stream.url}</span
         ><span
           class="inline-flex items-center pl-1 text-sm font-semibold text-gray-500 rounded-full"
         >
diff --git a/src/components/StreamsPopup.svelte b/src/components/StreamsPopup.svelte
index e36ce8128..ae10bb70c 100644
--- a/src/components/StreamsPopup.svelte
+++ b/src/components/StreamsPopup.svelte
@@ -1,5 +1,5 @@
 <script>
-  import StreamItem from './StreamItem.svelte'
+  import StreamItem from '~/components/StreamItem.svelte'
   import { getContext } from 'svelte'
   const { close } = getContext('simple-modal')
 
@@ -7,7 +7,7 @@
   export let title = 'Streams'
 </script>
 
-<div class="relative px-2 py-[10rem] flex justify-center" on:click|self="{close}">
+<div class="relative px-2 py-[10rem] flex justify-center" on:keypress on:click|self="{close}">
   <div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-2xl">
     <div
       class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"