paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 40 Packages Projects Releases Wiki Activity

Add accessibility add on to storybook for finding a11y issues

Browse Source 
Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
This commit is contained in:
Philipp Hugenroth
2021-07-20 18:29:57 +02:00
committed by blam
parent 908858d9c7
commit 7ee1634824
8 changed files with 127 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core-components/src/components/Tabs/TabBar.tsx
+1
View File
@@ -20,6 +20,7 @@ import { BackstageTheme } from '@backstage/theme';
interface StyledTabsProps {
value: number | boolean;
selectionFollowsFocus: boolean;
onChange: (event: React.ChangeEvent<{}>, newValue: number) => void;
}
packages/core-components/src/components/Tabs/Tabs.tsx
+5 -1
View File
@@ -107,7 +107,11 @@ export const Tabs = ({ tabs }: TabsProps) => {
<div className={classes.root}>
<AppBar ref={wrapper} className={classes.appbar} position="static">
<div>
<StyledTabs value={currentIndex} onChange={handleChange}>
<StyledTabs
value={currentIndex}
onChange={handleChange}
selectionFollowsFocus
>
{navIndex !== 0 && (
<StyledIcon
onClick={navigateToPrevChunk}
packages/core-components/src/layout/BottomLink/BottomLink.tsx
+6 -9
View File
@@ -16,10 +16,9 @@
import React from 'react';
import {
ListItem,
ListItemIcon,
Divider,
ListItemText,
Typography,
makeStyles,
} from '@material-ui/core';
import ArrowIcon from '@material-ui/icons/ArrowForward';
@@ -54,16 +53,14 @@ export const BottomLink = ({ link, title, onClick }: BottomLinkProps) => {
<div>
<Divider />
<Link to={link} onClick={onClick} underline="none">
<ListItem className={classes.root}>
<ListItemText>
<Box display="flex" alignItems="center" className={classes.root}>
<Typography>
<Box className={classes.boxTitle} fontWeight="fontWeightBold" m={1}>
{title}
</Box>
</ListItemText>
<ListItemIcon>
<ArrowIcon className={classes.arrow} />
</ListItemIcon>
</ListItem>
</Typography>
<ArrowIcon className={classes.arrow} />
</Box>
</Link>
</div>
);
packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
+1
View File
@@ -73,6 +73,7 @@ export const HeaderTabs = ({
return (
<div className={styles.tabsWrapper}>
<Tabs
selectionFollowsFocus
indicatorColor="primary"
textColor="inherit"
variant="scrollable"
packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx
+1 -1
View File
@@ -55,7 +55,7 @@ export const ItemCardGrid = (props: ItemCardGridProps) => {
const { children, ...otherProps } = props;
const classes = useStyles(otherProps);
return (
<div role="grid" className={classes.root} {...otherProps}>
<div className={classes.root} {...otherProps}>
{children}
</div>
);
packages/storybook/.storybook/main.js
+1
View File
@@ -7,6 +7,7 @@ module.exports = {
'../../../plugins/**/src/**/*.stories.tsx',
],
addons: [
'@storybook/addon-a11y',
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-storysource',
packages/storybook/package.json
+1
View File
@@ -19,6 +19,7 @@
"react-dom": "^16.12.0"
},
"devDependencies": {
"@storybook/addon-a11y": "^6.3.4",
"@storybook/addon-actions": "^6.1.11",
"@storybook/addon-links": "^6.1.11",
"@storybook/addon-storysource": "^6.1.11",
yarn.lock
+111
View File
@@ -4343,6 +4343,28 @@
resolved "https://registry.npmjs.org/@spotify/prettier-config/-/prettier-config-10.0.0.tgz#fa076d98d2e7e6c53dd3d86a696307a7010bd056"
integrity sha512-VYOdo8P7lIScAkl02nB9KpUAuOYMManryBIBuKJkAw5D3aVtLobfmdIKvdV6MqEmGMEQPbn7w/UpnjJYhUH+IA==
"@storybook/addon-a11y@^6.3.4":
version "6.3.4"
resolved "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.3.4.tgz#056c3c0e3b2d66d8aa2f02dc84374c948d07df91"
integrity sha512-ABG1dvwDdlNVvW+P+oRtDdiyw40ddc+maSwKbwxTiw9Ibq7TrasWE9ub0r7yNoFLXEZa3pBjPrGKdh+WIYToSQ==
dependencies:
"@storybook/addons" "6.3.4"
"@storybook/api" "6.3.4"
"@storybook/channels" "6.3.4"
"@storybook/client-api" "6.3.4"
"@storybook/client-logger" "6.3.4"
"@storybook/components" "6.3.4"
"@storybook/core-events" "6.3.4"
"@storybook/theming" "6.3.4"
axe-core "^4.2.0"
core-js "^3.8.2"
global "^4.4.0"
lodash "^4.17.20"
react-sizeme "^3.0.1"
regenerator-runtime "^0.13.7"
ts-dedent "^2.0.0"
util-deprecate "^1.0.2"
"@storybook/addon-actions@^6.1.11":
version "6.3.0"
resolved "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.3.0.tgz#e5a24c69d70da9aa98560f19d10c06a50495ca2e"
@@ -4593,6 +4615,19 @@
qs "^6.10.0"
telejson "^5.3.2"
"@storybook/channel-postmessage@6.3.4":
version "6.3.4"
resolved "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.3.4.tgz#1a0000aefc9494d5585a1d2c7bdb75f540965f70"
integrity sha512-UIHNrMD9ZaT249nkKXibqRjKEoqfeFJk5HKW2W17/Z/imVcKG9THBnRJ7cb+r7LqS8Yoh+Q87ycRqcPVLRJ/Xw==
dependencies:
"@storybook/channels" "6.3.4"
"@storybook/client-logger" "6.3.4"
"@storybook/core-events" "6.3.4"
core-js "^3.8.2"
global "^4.4.0"
qs "^6.10.0"
telejson "^5.3.2"
"@storybook/channels@6.1.15":
version "6.1.15"
resolved "https://registry.npmjs.org/@storybook/channels/-/channels-6.1.15.tgz#22bb06a671a5ae09d2537bcf63aaf90d7f6b9f6b"
@@ -4677,6 +4712,30 @@
ts-dedent "^2.0.0"
util-deprecate "^1.0.2"
"@storybook/client-api@6.3.4":
version "6.3.4"
resolved "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.3.4.tgz#7dd6dda0126012ed37fa885642973cc75366b5a8"
integrity sha512-lOrfz8ic3+nHZzqIdNH2I7Q3Wp0kS/Ic0PD/3QKvI2f6iVIapIjjWW1xAuor80Dl7rMhOn8zxgXta+7G7Pn2yQ==
dependencies:
"@storybook/addons" "6.3.4"
"@storybook/channel-postmessage" "6.3.4"
"@storybook/channels" "6.3.4"
"@storybook/client-logger" "6.3.4"
"@storybook/core-events" "6.3.4"
"@storybook/csf" "0.0.1"
"@types/qs" "^6.9.5"
"@types/webpack-env" "^1.16.0"
core-js "^3.8.2"
global "^4.4.0"
lodash "^4.17.20"
memoizerific "^1.11.3"
qs "^6.10.0"
regenerator-runtime "^0.13.7"
stable "^0.1.8"
store2 "^2.12.0"
ts-dedent "^2.0.0"
util-deprecate "^1.0.2"
"@storybook/client-logger@6.1.15":
version "6.1.15"
resolved "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.1.15.tgz#b558d6ecbee82c038d684717d8c598eaa4a9324d"
@@ -4795,6 +4854,36 @@
ts-dedent "^2.0.0"
util-deprecate "^1.0.2"
"@storybook/components@6.3.4":
version "6.3.4"
resolved "https://registry.npmjs.org/@storybook/components/-/components-6.3.4.tgz#c872ec267edf315eaada505be8595c70eb6db09b"
integrity sha512-0hBKTkkQbW+daaA6nRedkviPr2bEzy1kwq0H5eaLKI1zYeXN3U5Z8fVhO137PPqH5LmLietrmTPkqiljUBk9ug==
dependencies:
"@popperjs/core" "^2.6.0"
"@storybook/client-logger" "6.3.4"
"@storybook/csf" "0.0.1"
"@storybook/theming" "6.3.4"
"@types/color-convert" "^2.0.0"
"@types/overlayscrollbars" "^1.12.0"
"@types/react-syntax-highlighter" "11.0.5"
color-convert "^2.0.1"
core-js "^3.8.2"
fast-deep-equal "^3.1.3"
global "^4.4.0"
lodash "^4.17.20"
markdown-to-jsx "^7.1.3"
memoizerific "^1.11.3"
overlayscrollbars "^1.13.1"
polished "^4.0.5"
prop-types "^15.7.2"
react-colorful "^5.1.2"
react-popper-tooltip "^3.1.1"
react-syntax-highlighter "^13.5.3"
react-textarea-autosize "^8.3.0"
regenerator-runtime "^0.13.7"
ts-dedent "^2.0.0"
util-deprecate "^1.0.2"
"@storybook/core-events@6.1.15":
version "6.1.15"
resolved "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.1.15.tgz#f66e30cbed8afdb8df2254d2aa47fe139e641c60"
@@ -7972,6 +8061,11 @@ axe-core@^4.0.2:
resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.1.3.tgz#64a4c85509e0991f5168340edc4bedd1ceea6966"
integrity sha512-vwPpH4Aj4122EW38mxO/fxhGKtwWTMLDIJfZ1He0Edbtjcfna/R3YB67yVhezUMzqc3Jr3+Ii50KRntlENL4xQ==
axe-core@^4.2.0:
version "4.3.1"
resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.3.1.tgz#0c6a076e4a1c3e0544ba6a9479158f9be7a7928e"
integrity sha512-3WVgVPs/7OnKU3s+lqMtkv3wQlg3WxK1YifmpJSDO0E1aPBrZWlrrTO6cxRqCXLuX2aYgCljqXIQd0VnRidV0g==
axios@^0.20.0:
version "0.20.0"
resolved "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz#057ba30f04884694993a8cd07fa394cff11c50bd"
@@ -11759,6 +11853,13 @@ element-resize-detector@^1.2.1:
dependencies:
batch-processor "1.0.0"
element-resize-detector@^1.2.2:
version "1.2.3"
resolved "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.3.tgz#5078d9b99398fe4c589f8c8df94ff99e5d413ff3"
integrity sha512-+dhNzUgLpq9ol5tyhoG7YLoXL3ssjfFW+0gpszXPwRU6NjGr1fVHMEAF8fVzIiRJq57Nre0RFeIjJwI8Nh2NmQ==
dependencies:
batch-processor "1.0.0"
elliptic@^6.0.0:
version "6.5.4"
resolved "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
@@ -21826,6 +21927,16 @@ react-sizeme@^2.6.7:
shallowequal "^1.1.0"
throttle-debounce "^2.1.0"
react-sizeme@^3.0.1:
version "3.0.1"
resolved "https://registry.npmjs.org/react-sizeme/-/react-sizeme-3.0.1.tgz#4d12f4244e0e6a0fb97253e7af0314dc7c83a5a0"
integrity sha512-9Hf1NLgSbny1bha77l9HwvwwxQUJxFUqi44Ih+y3evA+PezBpGdCGlnvye6avss2cIgs9PgdYgMnfuzJWn/RUw==
dependencies:
element-resize-detector "^1.2.2"
invariant "^2.2.4"
shallowequal "^1.1.0"
throttle-debounce "^3.0.1"
react-smooth@^1.0.5:
version "1.0.5"
resolved "https://registry.npmjs.org/react-smooth/-/react-smooth-1.0.5.tgz#94ae161d7951cdd893ccb7099d031d342cb762ad"