Classic298
2beeeb90c2
Add aria-labels, aria-expanded, and semantic improvements to: - RateComment: close button, rating scale, feedback textarea - Citations: toggle button with count, source item buttons - Source/SourceToken: contextual aria-labels for citation buttons - StatusHistory: toggle button with expanded state - WebSearchResults: descriptive favicon alt text - FollowUps: convert div to button element - RegenerateMenu: submit suggestion button - FloatingButtons: action buttons, input field, submit button - CitationModal: close button WCAG: 4.1.2 (Name, Role, Value), 2.1.1 (Keyboard), 1.1.1 (Non-text Content)
54 lines
1.3 KiB
Svelte
54 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { getContext } from 'svelte';
|
|
import { decodeString } from '$lib/utils';
|
|
|
|
const i18n = getContext('i18n');
|
|
|
|
export let id;
|
|
|
|
export let title: string = 'N/A';
|
|
|
|
export let onClick: Function = () => {};
|
|
|
|
// Helper function to return only the domain from a URL
|
|
function getDomain(url: string): string {
|
|
const domain = url.replace('http://', '').replace('https://', '').split(/[/?#]/)[0];
|
|
|
|
if (domain.startsWith('www.')) {
|
|
return domain.slice(4);
|
|
}
|
|
return domain;
|
|
}
|
|
|
|
const getDisplayTitle = (title: string) => {
|
|
if (!title) return 'N/A';
|
|
if (title.length > 30) {
|
|
return title.slice(0, 15) + '...' + title.slice(-10);
|
|
}
|
|
return title;
|
|
};
|
|
|
|
// Helper function to check if text is a URL and return the domain
|
|
function formattedTitle(title: string): string {
|
|
if (title.startsWith('http')) {
|
|
return getDomain(title);
|
|
}
|
|
|
|
return title;
|
|
}
|
|
</script>
|
|
|
|
{#if title !== 'N/A'}
|
|
<button
|
|
aria-label={$i18n.t('View source: {{title}}', { title: formattedTitle(decodeString(title)) })}
|
|
class="text-[10px] w-fit translate-y-[2px] px-2 py-0.5 dark:bg-white/5 dark:text-white/80 dark:hover:text-white bg-gray-50 text-black/80 hover:text-black transition rounded-xl"
|
|
on:click={() => {
|
|
onClick(id);
|
|
}}
|
|
>
|
|
<span class="line-clamp-1">
|
|
{getDisplayTitle(formattedTitle(decodeString(title)))}
|
|
</span>
|
|
</button>
|
|
{/if}
|