From a07f773895b24ff0f88a7e06f03ee7c1da548d09 Mon Sep 17 00:00:00 2001 From: Rafael Ramalho Date: Tue, 2 Jun 2020 19:12:28 +0100 Subject: [PATCH 01/10] fix: a11y issues in files page --- .eslintrc.js | 3 +- package-lock.json | 35 +++--------- package.json | 1 + public/locales/en/app.json | 3 +- public/locales/en/files.json | 9 ++- src/App.js | 9 +-- .../analytics-toggle/AnalyticsToggle.js | 2 +- src/components/button/Button.js | 2 +- src/components/checkbox/Checkbox.css | 8 ++- src/components/connected/Connected.js | 2 +- .../language-modal/LanguageModal.js | 2 +- .../text-input-modal/TextInputModal.js | 1 - src/components/tooltip/Tooltip.js | 2 +- src/components/tour/TourHelper.js | 11 ++-- src/files/FilesPage.js | 4 +- src/files/breadcrumbs/Breadcrumbs.js | 9 ++- src/files/context-menu/ContextMenu.js | 26 +++++++-- src/files/dropdown/Dropdown.js | 42 +++++++------- .../file-import-status/FileImportStatus.css | 4 ++ .../file-import-status/FileImportStatus.js | 13 +++-- src/files/file-input/FileInput.js | 2 +- src/files/file/File.js | 12 ++-- src/files/files-list/FilesList.js | 20 ++++--- .../selected-actions/SelectedActions.css | 8 +++ src/files/selected-actions/SelectedActions.js | 57 ++++++++++++------- src/index.css | 1 + src/reset.css | 26 +++++++++ 27 files changed, 192 insertions(+), 122 deletions(-) create mode 100644 src/files/selected-actions/SelectedActions.css create mode 100644 src/reset.css diff --git a/.eslintrc.js b/.eslintrc.js index a80631df6..e02858012 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,4 +1,5 @@ module.exports = { parser: "babel-eslint", - extends: ['react-app', 'standard'] + extends: ['react-app', 'standard', "plugin:jsx-a11y/recommended"], + plugins: ["jsx-a11y"] } diff --git a/package-lock.json b/package-lock.json index fbda1a5f7..37ce8e48b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1079,22 +1079,6 @@ } } }, - "@babel/runtime-corejs3": { - "version": "7.7.6", - "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.7.6.tgz", - "integrity": "sha512-NrRUehqG0sMSCaP+0XV/vOvvjNl4BQOWq3Qys1Q2KTEm5tGMo9h0dHnIzeKerj0a7SIB8LP5kYg/T1raE3FoKQ==", - "requires": { - "core-js-pure": "^3.0.0", - "regenerator-runtime": "^0.13.2" - }, - "dependencies": { - "regenerator-runtime": { - "version": "0.13.3", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", - "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==" - } - } - }, "@babel/template": { "version": "7.7.4", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.7.4.tgz", @@ -6685,13 +6669,9 @@ } }, "axobject-query": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.1.1.tgz", - "integrity": "sha512-lF98xa/yvy6j3fBHAgQXIYl+J4eZadOSqsPojemUqClzNbBV38wWGpUbQbVEyf4eUF5yF7eHmGgGA2JiHyjeqw==", - "requires": { - "@babel/runtime": "^7.7.4", - "@babel/runtime-corejs3": "^7.7.4" - } + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.1.2.tgz", + "integrity": "sha512-ICt34ZmrVt8UQnvPl6TVyDTkmhXmAyAT4Jh5ugfGUX4MOrZ+U/ZY6/sdylRw3qGNr9Ub5AJsaHeDMzNLehRdOQ==" }, "babel-code-frame": { "version": "6.26.0", @@ -8797,7 +8777,8 @@ "core-js-pure": { "version": "3.4.5", "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.4.5.tgz", - "integrity": "sha512-v3BoUOhmBvs4Z17jG/oM7qyv+tEEMvD1FYDDfxa6uD5W2rA/DpKvhvmyrBzxuMQTa/91UQKisaiqe0+0GuL2oA==" + "integrity": "sha512-v3BoUOhmBvs4Z17jG/oM7qyv+tEEMvD1FYDDfxa6uD5W2rA/DpKvhvmyrBzxuMQTa/91UQKisaiqe0+0GuL2oA==", + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -9544,9 +9525,9 @@ } }, "damerau-levenshtein": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.5.tgz", - "integrity": "sha512-CBCRqFnpu715iPmw1KrdOrzRqbdFwQTwAWyyyYS42+iAgHCuXZ+/TdMgQkUENPomxEz9z1BEzuQU2Xw0kUuAgA==" + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz", + "integrity": "sha512-JVrozIeElnj3QzfUIt8tB8YMluBJom4Vw9qTPpjGYQ9fYlB3D/rb6OordUxf3xeFB35LKWs0xqcO5U6ySvBtug==" }, "dashdash": { "version": "1.14.1", diff --git a/package.json b/package.json index fb8989542..4962bf659 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "d3": "^5.14.2", "datatransfer-files-promise": "^1.3.1", "details-polyfill": "^1.1.0", + "eslint-plugin-jsx-a11y": "^6.2.3", "file-extension": "^4.0.5", "filesize": "^6.0.1", "hashlru": "^2.3.0", diff --git a/public/locales/en/app.json b/public/locales/en/app.json index 7f5ba2969..171374c2b 100644 --- a/public/locales/en/app.json +++ b/public/locales/en/app.json @@ -6,5 +6,6 @@ "next": "Next", "skip": "Skip", "tooltip": "Click this button any time for a guided tour on the current page." - } + }, + "startTourHelper": "Start tour" } diff --git a/public/locales/en/files.json b/public/locales/en/files.json index 321fd9204..52c0624f0 100644 --- a/public/locales/en/files.json +++ b/public/locales/en/files.json @@ -5,6 +5,8 @@ "finished": "Finished!", "totalSize": "Total size: {size}", "filesSelected": "{count, plural, one {File selected} other {Files selected}}", + "menuOptions": "Options for selected item", + "selectedAllEntries": "Select all table entries", "individualFilesOnly": "Only available for individual files", "itemName": "Name", "size": "Size", @@ -72,6 +74,7 @@ "paragraph5": "<0><0>Review the settings for your IPFS node, and update them to better suit your needs.", "paragraph6": "<0>If you want to help push the Web UI forward, <1>check out its code or <3>report a bug!" }, + "filesListLabel": "Files list", "filesList": { "noFiles": "<0>No files in this directory. Click the “Add” button to add some." }, @@ -116,11 +119,15 @@ "browse": "Browse", "inspect": "Inspect" }, + "previousFolder": "Go back to previous folder", + "fileLabel": "Select {type} {name} with size: {size}", "hashUnavailable": "hash unavailable", + "checkboxLabel": "View more options for {name}", "pins": "Pins", "pinned": "Pinned", "blocks": "Blocks", "more": "More", "files": "Files", - "cidNotFileNorDir": "The current link isn't a file, nor a directory. Try to <0>inspect it instead." + "cidNotFileNorDir": "The current link isn't a file, nor a directory. Try to <0>inspect it instead.", + "sortBy": "Sort items by {name}" } diff --git a/src/App.js b/src/App.js index 96be69418..3610c97c1 100644 --- a/src/App.js +++ b/src/App.js @@ -62,13 +62,11 @@ export class App extends Component { const { t, route: Page, ipfsReady, doFilesNavigateTo, doExploreUserProvidedPath, routeInfo: { url }, navbarIsOpen, connectDropTarget, canDrop, isOver, showTooltip } = this.props return connectDropTarget( + // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
{/* Tinted overlay that appears when dragging and dropping an item */} { canDrop && isOver &&
} -
-
- -
+
@@ -86,6 +84,9 @@ export class App extends Component { }
+
+ +
{label} } />
– {summary}
-
diff --git a/src/components/button/Button.js b/src/components/button/Button.js index 875183e96..15464118e 100644 --- a/src/components/button/Button.js +++ b/src/components/button/Button.js @@ -5,7 +5,7 @@ const Button = ({ bg = 'bg-teal', color = 'white', fill = 'white', className = ' const bgClass = danger ? 'bg-red' : disabled ? 'bg-gray-muted' : bg const fillClass = danger ? 'fill-white' : disabled ? 'fill-snow' : fill const colorClass = danger ? 'white' : disabled ? 'light-gray' : color - const cls = `Button transition-all sans-serif dib v-mid fw5 nowrap lh-copy bn br1 pa2 pointer focus-outline ${fillClass} ${bgClass} ${colorClass} ${className}` + const cls = `Button transition-all sans-serif dib v-mid fw5 nowrap lh-copy bn br1 pa2 focus-outline ${fillClass} ${bgClass} ${colorClass} ${className}` return ( diff --git a/src/components/text-input-modal/TextInputModal.js b/src/components/text-input-modal/TextInputModal.js index c35e10f0c..8f191d1ea 100644 --- a/src/components/text-input-modal/TextInputModal.js +++ b/src/components/text-input-modal/TextInputModal.js @@ -109,7 +109,6 @@ class TextInputModal extends React.Component { onKeyPress={this.onKeyPress} value={this.state.value} required - autoFocus className={`input-reset charcoal ba b--black-20 br1 pa2 mb2 db w-75 center focus-outline ${this.inputClass}`} type='text' /> diff --git a/src/components/tooltip/Tooltip.js b/src/components/tooltip/Tooltip.js index 8405e017e..16fd0a921 100644 --- a/src/components/tooltip/Tooltip.js +++ b/src/components/tooltip/Tooltip.js @@ -41,7 +41,7 @@ export default class Tool extends React.Component { return (
-
+
{React.Children.map(children, c => React.cloneElement(c, { ref: (n) => { this.el = n } }))}
diff --git a/src/components/tour/TourHelper.js b/src/components/tour/TourHelper.js index a500145ce..91417c0b5 100644 --- a/src/components/tour/TourHelper.js +++ b/src/components/tour/TourHelper.js @@ -1,21 +1,22 @@ import React from 'react' import { connect } from 'redux-bundler-react' +import { withTranslation } from 'react-i18next' -export const TourHelper = ({ doEnableTours, className = '', size = 23 }) => { +export const TourHelper = ({ doEnableTours, className = '', size = 23, t }) => { const handleClick = () => { doEnableTours() } return ( - - + + ) } export default connect( 'doEnableTours', - TourHelper + withTranslation('app')(TourHelper) ) diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js index 4f3935f02..77e5a6578 100644 --- a/src/files/FilesPage.js +++ b/src/files/FilesPage.js @@ -216,6 +216,7 @@ class FilesPage extends React.Component { this.showModal(SHARE, [contextMenu.file])} onDelete={() => this.showModal(DELETE, [contextMenu.file])} diff --git a/src/files/breadcrumbs/Breadcrumbs.js b/src/files/breadcrumbs/Breadcrumbs.js index ecf1f67fc..559ba2639 100644 --- a/src/files/breadcrumbs/Breadcrumbs.js +++ b/src/files/breadcrumbs/Breadcrumbs.js @@ -64,10 +64,9 @@ class Breadcrumbs extends React.Component { { link.disabled ? {link.name} - /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ - : onClick(link.path)}> + : } , /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ @@ -85,12 +84,12 @@ class Breadcrumbs extends React.Component {