Fixes the markup to comply with A11y

This commit is contained in:
Arhey 2023-02-17 15:00:32 +03:00
parent 309fa25d35
commit 677365c6da
6 changed files with 18 additions and 12 deletions

View file

@ -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"
>

View file

@ -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"

View file

@ -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

View file

@ -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"

View file

@ -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"
>

View file

@ -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"