Skip to content

EuiIcon a11y #2554

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
elizabetdev merged 20 commits into from
Dec 9, 2019
Merged

EuiIcon a11y #2554

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
f3c7ba6
Adding title prop to compile-icons script
elizabetdev Nov 21, 2019
1c15889
Aria attributes, alt and fixing tests
elizabetdev Nov 21, 2019
1979af3
Merge remote-tracking branch 'upstream/master' into euiIcon-a11y
elizabetdev Nov 22, 2019
a538ce5
removing aria-labelledby
elizabetdev Nov 22, 2019
90d2cc3
is icon empty checker
elizabetdev Nov 22, 2019
302a42c
Update src/components/icon/icon.tsx
elizabetdev Nov 25, 2019
a1112fa
Improving code, changelog and a11y docs descr
elizabetdev Nov 26, 2019
7a6eda2
Improving a11y docs text
elizabetdev Nov 26, 2019
6f16c55
Improving code
elizabetdev Nov 26, 2019
d4a88c8
Merge remote-tracking branch 'upstream/master' into euiIcon-a11y
elizabetdev Nov 27, 2019
6901bc4
Update CHANGELOG.md
elizabetdev Nov 29, 2019
30c87c7
Update src/components/icon/icon.tsx
elizabetdev Nov 29, 2019
2e98d79
Update src/components/icon/icon.tsx
elizabetdev Nov 29, 2019
3c3ab51
Update src/components/icon/icon.tsx
elizabetdev Nov 29, 2019
fa6d47c
Improving code
elizabetdev Nov 29, 2019
9cd1a4a
Merge remote-tracking branch 'upstream/master' into euiIcon-a11y
elizabetdev Nov 29, 2019
7642319
a11y callout text
elizabetdev Nov 29, 2019
9bb1706
Update src/components/icon/icon.tsx
elizabetdev Nov 29, 2019
3d5f603
improving code
elizabetdev Dec 3, 2019
91cd418
Merge remote-tracking branch 'upstream/master' into euiIcon-a11y
elizabetdev Dec 9, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
52 changes: 22 additions & 30 deletions scripts/compile-icons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,22 @@
const glob = require('glob');
const svgr = require('@svgr/core').default;
const path = require('path');
const fs = require('fs');
/*
Dynamic import, with which TypeScript accepts static and dynamic paths
*/
const glob = await import('glob');
const svgr = await import('@svgr/core').default;
const path = await import('path');
const fs = await import('fs');

const rootDir = path.resolve(__dirname, '..');
const srcDir = path.resolve(rootDir, 'src');
const iconsDir = path.resolve(srcDir, 'components', 'icon', 'assets');

function pascalCase(x) {
return x.replace(/^(.)|[^a-zA-Z]([a-zA-Z])/g, (match, char1, char2) => (char1 || char2).toUpperCase());
return x.replace(/^(.)|[^a-zA-Z]([a-zA-Z])/g, (match, char1, char2) =>
(char1 || char2).toUpperCase()
);
}

const iconFiles = glob.sync(
'**/*.svg',
{ cwd: iconsDir, realpath: true }
);

function defaultTemplate({
template
}, opts, {
imports,
componentName,
props,
jsx,
exports
}) {
return template.ast`${imports}
const ${componentName} = (${props}) => ${jsx}
${exports}
`;
}
const iconFiles = glob.sync('**/*.svg', { cwd: iconsDir, realpath: true });

iconFiles.forEach(async filePath => {
const svgSource = fs.readFileSync(filePath);
Expand All @@ -40,7 +27,7 @@ iconFiles.forEach(async filePath => {
throw new Error(`${filePath} is missing a 'viewBox' attribute`);
}

const jsxSource = (await svgr(
const jsxSource = await svgr(
svgSource,
{
plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
Expand All @@ -52,18 +39,23 @@ iconFiles.forEach(async filePath => {
],
},
svgProps: {
xmlns: 'http://www.w3.org/2000/svg'
xmlns: 'http://www.w3.org/2000/svg',
},
template: ({ template }, opts, { imports, componentName, props, jsx }) => template.ast`
titleProp: true,
template: (
{ template },
opts,
{ imports, componentName, props, jsx }
) => template.ast`
${imports}
const ${componentName} = (${props}) => ${jsx}
export const icon = ${componentName};
`
`,
},
{
componentName: `EuiIcon${pascalCase(path.basename(filePath, '.svg'))}`
componentName: `EuiIcon${pascalCase(path.basename(filePath, '.svg'))}`,
}
));
);

const outputFilePath = filePath.replace(/\.svg$/, '.js');
fs.writeFileSync(outputFilePath, jsxSource);
Expand Down
84 changes: 62 additions & 22 deletions src/components/accordion/__snapshots__/accordion.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,21 +27,36 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
size="m"
type="arrowRight"
>
<EuiIconEmpty
className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
focusable="false"
style={null}
<EuiI18n
default="{titleDisplayed} icon"
token="euiIcon.title"
values={
Object {
"titleDisplayed": "empty",
}
}
>
<svg
<EuiIconEmpty
aria-label="empty icon"
className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
focusable="false"
height={16}
role="img"
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</EuiIconEmpty>
title="empty icon"
>
<svg
aria-label="empty icon"
className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
focusable="false"
height={16}
role="img"
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</EuiIconEmpty>
</EuiI18n>
</EuiIcon>
</span>
<span />
Expand Down Expand Up @@ -101,21 +116,36 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
size="m"
type="arrowRight"
>
<EuiIconEmpty
className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
focusable="false"
style={null}
<EuiI18n
default="{titleDisplayed} icon"
token="euiIcon.title"
values={
Object {
"titleDisplayed": "empty",
}
}
>
<svg
<EuiIconEmpty
aria-label="empty icon"
className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
focusable="false"
height={16}
role="img"
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</EuiIconEmpty>
title="empty icon"
>
<svg
aria-label="empty icon"
className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
focusable="false"
height={16}
role="img"
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</EuiIconEmpty>
</EuiI18n>
</EuiIcon>
</span>
<span />
Expand Down Expand Up @@ -167,9 +197,11 @@ exports[`EuiAccordion is rendered 1`] = `
class="euiAccordion__iconWrapper"
>
<svg
aria-label="empty icon"
class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -208,9 +240,11 @@ exports[`EuiAccordion props buttonContent is rendered 1`] = `
class="euiAccordion__iconWrapper"
>
<svg
aria-label="empty icon"
class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -253,9 +287,11 @@ exports[`EuiAccordion props buttonContentClassName is rendered 1`] = `
class="euiAccordion__iconWrapper"
>
<svg
aria-label="empty icon"
class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -296,9 +332,11 @@ exports[`EuiAccordion props extraAction is rendered 1`] = `
class="euiAccordion__iconWrapper"
>
<svg
aria-label="empty icon"
class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -344,9 +382,11 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
class="euiAccordion__iconWrapper"
>
<svg
aria-label="empty icon"
class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down
6 changes: 6 additions & 0 deletions src/components/badge/__snapshots__/badge.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,9 +215,11 @@ exports[`EuiBadge props iconSide left is rendered 1`] = `
Content
</span>
<svg
aria-label="empty icon"
class="euiIcon euiIcon--small euiIcon-isLoading euiBadge__icon"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -239,9 +241,11 @@ exports[`EuiBadge props iconSide right is rendered 1`] = `
Content
</span>
<svg
aria-label="empty icon"
class="euiIcon euiIcon--small euiIcon-isLoading euiBadge__icon"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -263,9 +267,11 @@ exports[`EuiBadge props iconType is rendered 1`] = `
Content
</span>
<svg
aria-label="empty icon"
class="euiIcon euiIcon--small euiIcon-isLoading euiBadge__icon"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down
2 changes: 2 additions & 0 deletions src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,11 @@ exports[`CollapsedItemActions render 1`] = `
>
<svg
aria-hidden="true"
aria-label="empty icon"
class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down
Loading