summaryrefslogtreecommitdiff
path: root/packages/web-util/src/components/Attention.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/web-util/src/components/Attention.tsx')
-rw-r--r--packages/web-util/src/components/Attention.tsx4
1 files changed, 3 insertions, 1 deletions
diff --git a/packages/web-util/src/components/Attention.tsx b/packages/web-util/src/components/Attention.tsx
index b85230a1b..bb87d5415 100644
--- a/packages/web-util/src/components/Attention.tsx
+++ b/packages/web-util/src/components/Attention.tsx
@@ -1,5 +1,6 @@
import { TranslatedString, assertUnreachable } from "@gnu-taler/taler-util";
import { ComponentChildren, Fragment, VNode, h } from "preact";
+import { useTranslationContext } from "../index.browser.js";
interface Props {
type?: "info" | "success" | "warning" | "danger",
@@ -8,6 +9,7 @@ interface Props {
children?: ComponentChildren,
}
export function Attention({ type = "info", title, children, onClose }: Props): VNode {
+ const { i18n } = useTranslationContext();
return <div class={`group attention-${type} mt-2 shadow-lg`}>
<div class="rounded-md group-[.attention-info]:bg-blue-50 group-[.attention-warning]:bg-yellow-50 group-[.attention-danger]:bg-red-50 group-[.attention-success]:bg-green-50 p-4 shadow">
<div class="flex">
@@ -39,7 +41,7 @@ export function Attention({ type = "info", title, children, onClose }: Props): V
</div>
{onClose &&
<div>
- <button type="button" class="font-semibold items-center rounded bg-transparent px-2 py-1 text-xs text-gray-900 hover:bg-gray-50"
+ <button type="button" aria-label={i18n.str`Close banner`} class="font-semibold items-center rounded bg-transparent px-2 py-1 text-xs text-gray-900 hover:bg-gray-50"
onClick={(e) => {
e.preventDefault();
onClose();