mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-11-10 23:45:44 +01:00
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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user