缩写-复制右 
说明
在母元素右下方的块首字母中显示源属性。 这一实施主要是为了与图像一起使用.
安装
npm install @bbc/psammead-copyright
道具
| 参数 | 类型 | 需求 | 默认 | 示例 |
|---|---|---|---|---|
| 没有道具. |
使用量
常用相并用 psammead-figure, (中文(简体) ), psammead-image 财务报告和审定财务报表 psammead-image-placeholder。也可以通过 psammead-visually-hidden-text 以宣布组件.
const WrapperComponent = ({ alt, ratio, src, width }) => (
<Figure>
<ImagePlaceholder ratio={ratio}>
<Image alt={alt} src={src} width={width} />
<Copyright>
<VisuallyHiddenText>Image source, </VisuallyHiddenText>
Getty Images
</Copyright>
</ImagePlaceholder>
</Figure>
);
何时使用此组件
该组件拟与载于a/ 图1。 。 。 .
不使用此组件时
不应任意使用这一组成部分来表示整个页面的源归属。 如上所述,它无意用于 图1无障碍文本不正确,可能令人困惑.
如果您知道源属性已经被页面上的其他版权披露所覆盖, 请不要使用此组件 .
无障碍说明
此组件的默认样式旨在遵守WCAG色彩对比标准.
这个 VisuallyHiddenText 组件可用作 Copyright 为屏幕阅读器用户添加额外的上下文。 这方面的例子可见于 我们的故事书
此组件使用 aria 角色文本, 以停止 文本分割在iPhone上使用 " Voice Over " 时观察到这一点,因此改进了屏幕读取器UX。 没有这个,图像源元素是"Voice Over"(从左到右)上的2 swipes,一个是"图像源",另一个是"Getty 映像"等实际源.
捐款
Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .
行为守则
我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.
许可证
萨姆米德 Apache 2.0 许可。 。 。 .