Add alternative text to controls to allow screen readers to read them aloud (#1840)

Add alternative text to controls to allow screen readers to read them aloud.

Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
This commit is contained in:
Florian Scholdei
2021-11-03 10:11:40 +01:00
committed by GitHub
parent b78742ed0b
commit b896df5046
49 changed files with 1274 additions and 553 deletions

View File

@@ -34,7 +34,7 @@ const Wrapper = styled.div`
`;
const link = "/foo/bar";
const icon = <Icon name="icons fa-2x fa-fw" />;
const avatar = <Icon name="icons fa-2x fa-fw" alt="avatar" />;
const contentLeft = <strong className="m-0">main content</strong>;
const contentRight = <small>more text</small>;
@@ -42,13 +42,13 @@ storiesOf("CardColumnSmall", module)
.addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
.addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
.add("Default", () => (
<CardColumnSmall link={link} avatar={icon} contentLeft={contentLeft} contentRight={contentRight} />
<CardColumnSmall link={link} avatar={avatar} contentLeft={contentLeft} contentRight={contentRight} />
))
.add("Minimal", () => <CardColumnSmall link={link} contentLeft={contentLeft} contentRight={contentRight} />)
.add("Task", () => (
<CardColumnSmall
link={link}
avatar={<Icon name="exchange-alt" className="fa-fw fa-lg" color="inherit" />}
avatar={<Icon name="exchange-alt" className="fa-fw fa-lg" color="inherit" alt="avatar" />}
contentLeft={<strong>Repository created</strong>}
contentRight={<small>over 42 years ago</small>}
footer="New: scmadmin/spaceship"