shadowdaoandClaude Opus 4.8
9969adca72
- InputField/TextareaField/ContactForm: every control gets a
deterministic id (slugId() in utils/escape.ts, derived from the
field's name/label + index for ContactForm's looped fields -- no
Math.random) with a matching <label for=>; fields with no visible
label get an aria-label from the placeholder/name instead.
- StarRating: wrapped in role="img" aria-label="Rating: N out of M",
individual star glyphs marked aria-hidden.
- Navbar: the mobile hamburger toggle gets aria-label="Toggle
navigation menu", aria-controls="navbar-links", and aria-expanded
wired to flip true/false in the inline onclick handler.
- VideoBlock and MapEmbed: every exported <iframe> gets a title
(generic "Embedded video", or "Map of {address}" for MapEmbed).
- Decorative Font Awesome icons (ContentSlider arrows already covered
in the prior commit; SocialLinks, SearchBar, Testimonials stars) are
aria-hidden; SocialLinks' icon-only links get an aria-label naming
the platform alongside the existing title tooltip.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
99 lines
2.4 KiB
TypeScript
99 lines
2.4 KiB
TypeScript
import React, { CSSProperties } from 'react';
|
|
import { useNode, UserComponent } from '@craftjs/core';
|
|
import { cssPropsToString } from '../../utils/style-helpers';
|
|
import { escapeAttr, safeUrl } from '../../utils/escape';
|
|
|
|
interface MapEmbedProps {
|
|
address?: string;
|
|
zoom?: number;
|
|
height?: string;
|
|
style?: CSSProperties;
|
|
}
|
|
|
|
function buildMapUrl(address: string, zoom: number): string {
|
|
const encoded = encodeURIComponent(address);
|
|
return `https://maps.google.com/maps?q=${encoded}&z=${zoom}&output=embed`;
|
|
}
|
|
|
|
export const MapEmbed: UserComponent<MapEmbedProps> = ({
|
|
address = 'New York, NY',
|
|
zoom = 14,
|
|
height = '400px',
|
|
style = {},
|
|
}) => {
|
|
const {
|
|
connectors: { connect, drag },
|
|
selected,
|
|
} = useNode((node) => ({
|
|
selected: node.events.selected,
|
|
}));
|
|
|
|
return (
|
|
<div
|
|
ref={(ref: HTMLDivElement | null): void => { if (ref) connect(drag(ref)); }}
|
|
style={{
|
|
width: '100%',
|
|
outline: selected ? '2px solid #3b82f6' : 'none',
|
|
...style,
|
|
}}
|
|
>
|
|
<iframe
|
|
src={buildMapUrl(address, zoom)}
|
|
style={{
|
|
width: '100%',
|
|
height,
|
|
border: 'none',
|
|
borderRadius: (style as any)?.borderRadius || '0px',
|
|
display: 'block',
|
|
}}
|
|
loading="lazy"
|
|
referrerPolicy="no-referrer-when-downgrade"
|
|
allowFullScreen
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/* ---------- Craft config ---------- */
|
|
|
|
MapEmbed.craft = {
|
|
displayName: 'Map',
|
|
props: {
|
|
address: 'New York, NY',
|
|
zoom: 14,
|
|
height: '400px',
|
|
style: {},
|
|
},
|
|
rules: {
|
|
canDrag: () => true,
|
|
canMoveIn: () => false,
|
|
canMoveOut: () => true,
|
|
},
|
|
};
|
|
|
|
/* ---------- HTML export ---------- */
|
|
|
|
(MapEmbed as any).toHtml = (props: MapEmbedProps, _childrenHtml: string) => {
|
|
const {
|
|
address = 'New York, NY',
|
|
zoom = 14,
|
|
height = '400px',
|
|
style = {},
|
|
} = props;
|
|
|
|
const wrapperStyle = cssPropsToString({ width: '100%', ...style });
|
|
const iframeStyle = cssPropsToString({
|
|
width: '100%',
|
|
height,
|
|
border: 'none',
|
|
borderRadius: (style as any)?.borderRadius || undefined,
|
|
display: 'block',
|
|
});
|
|
|
|
const src = buildMapUrl(address, zoom);
|
|
|
|
return {
|
|
html: `<div${wrapperStyle ? ` style="${wrapperStyle}"` : ''}><iframe src="${escapeAttr(safeUrl(src))}" title="${escapeAttr(`Map of ${address}`)}" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen${iframeStyle ? ` style="${iframeStyle}"` : ''}></iframe></div>`,
|
|
};
|
|
};
|