护身符 
说明
这个 psammead-caption 组件为样式 figcaption 键.
安装
npm install @bbc/psammead-caption
道具
| 参数 | 类型 | 需求 | 默认 | 示例 |
|---|---|---|---|---|
| 脚本 | 对象 | 对 | 拉丁语 | {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: |
| 服务 | 字符串 | 对 | 不详 | 'news' |
使用量
psammead-caption 可与 psammead-figure 财务报告和审定财务报表 psammead-visually-hidden-text 以这种方式实现组件。 此可视化隐藏文本是为了给辅助技术的用户上下文.
import Caption from '@bbc/psammead-caption';
import Figure from '@bbc/psammead-figure';
import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text';
import { arabic } from '@bbc/gel-foundations/scripts';
const Wrapper = captionText => (
<Figure>
...
<Caption script={arabic} service="news">
<VisuallyHiddenText>Image caption, </VisuallyHiddenText>
{captionText}
</Caption>
</Figure>
);
何时使用此组件
这个 Caption 组件只应在 a 内使用 figure 键。 它的设计是在图像或视频组件后放置.
无障碍说明
因为这只是一个 <figcaption> 标记带有相关样式,当您使用此组件时,它具有与常规虚构元素相同的语义意义.
字体和背景-颜色选择符合WCAG AA色彩对比指引.
路线图
当这个标题用于不支持斜体文字的脚本时,我们可以考虑创建一个道克来切换 font-style: italic。 。 。 .
捐款
Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .
行为守则
我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.
许可证
萨姆米德 Apache 2.0 许可。 。 。 .