Close SharePanel on Escape + mark as role=dialog with aria-label (a11y + PrimeNG parity)
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import type { FC, MouseEvent } from "react";
|
||||
import { type FC, type MouseEvent, useEffect } from "react";
|
||||
import { useTranslation } from "@/i18n/provider.js";
|
||||
import "./actions.scss";
|
||||
|
||||
@@ -12,6 +12,15 @@ export const SharePanel: FC<SharePanelProps> = ({ url, locale, onClose }) => {
|
||||
const { t } = useTranslation();
|
||||
const encoded = encodeURIComponent(url);
|
||||
|
||||
// Close on Escape — matches Angular's PrimeNG p-overlayPanel dismissable behaviour.
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
};
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => window.removeEventListener("keydown", onKey);
|
||||
}, [onClose]);
|
||||
|
||||
const handleCopy = async (e: MouseEvent<HTMLAnchorElement>) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
@@ -23,7 +32,7 @@ export const SharePanel: FC<SharePanelProps> = ({ url, locale, onClose }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="share-panel" data-testid="share-panel">
|
||||
<div className="share-panel" data-testid="share-panel" role="dialog" aria-label={t("BOARD.SHARE")}>
|
||||
<div className="share-elements">
|
||||
<div>
|
||||
<a
|
||||
|
||||
Reference in New Issue
Block a user