[RFR] BooleanField accessibility

docs/Fields.md

@@ -149,6 +149,18 @@ import { BooleanField } from 'react-admin';
 
 ![BooleanField](./img/boolean-field.png)
 
+The `BooleanField` also includes an hidden text for accessibility (or to query in end to end tests). By default, it includes the translated label and the translated value, for example `Published: false`.
+
+If you need to override it, you can use the `valueLabelTrue` and `valueLabelFalse` props which both accept a string. Those strings may be translation keys:
+
+```jsx
+// Simple texts
+<BooleanField source="published" valueLabelTrue="Has been published" valueLabelFalse="Has not been published yet" />
+
+// Translation keys
+<BooleanField source="published" valueLabelTrue="myapp.published.true" valueLabelFalse="myapp.published.false" />
+```
+
 ## `<ChipField>`
 
 Displays a value inside a ["Chip"](http://www.material-ui.com/#/components/chip), which is Material UI's term for a label.

packages/ra-core/src/util/FieldTitle.js

@@ -5,6 +5,7 @@ import pure from 'recompose/pure';
 import compose from 'recompose/compose';
 
 import translate from '../i18n/translate';
+import getFieldLabelTranslationArgs from './getFieldLabelTranslationArgs';
 
 export const FieldTitle = ({
     resource,
@@ -14,16 +15,7 @@ export const FieldTitle = ({
     translate,
 }) => (
     <span>
-        {typeof label !== 'undefined'
-            ? translate(label, { _: label })
-            : typeof source !== 'undefined'
-                ? translate(`resources.${resource}.fields.${source}`, {
-                      _: inflection.transform(source, [
-                          'underscore',
-                          'humanize',
-                      ]),
-                  })
-                : ''}
+        {translate(...getFieldLabelTranslationArgs({ label, resource, source }))}
         {isRequired && ' *'}
     </span>
 );

packages/ra-core/src/util/getFieldLabelTranslationArgs.js

@@ -0,0 +1,29 @@
+import inflection from 'inflection';
+
+/**
+ * Returns an array of arguments to use with the translate function for the label of a field.
+ * The label will be the one specified by the label prop or one computed from the resource and source props.
+ * 
+ * Usage:
+ *  <span>
+ *      {translate(...getFieldLabelTranslationArgs(label, resource, source))}
+ *  </span>
+ */
+export default options => {
+    if (!options) {
+        return [''];
+    }
+
+    const { label, resource, source } = options;
+
+    return typeof label !== 'undefined'
+        ? [label, { _: label }]
+        : typeof source !== 'undefined'
+            ? [`resources.${resource}.fields.${source}`, {
+                _: inflection.transform(source, [
+                    'underscore',
+                    'humanize',
+                ])
+            }]
+            : [''];
+};

packages/ra-core/src/util/getFieldLabelTranslationArgs.spec.ts

@@ -0,0 +1,58 @@
+import assert from 'assert';
+import getFieldLabelTranslationArgs from './getFieldLabelTranslationArgs';
+
+describe('getFieldLabelTranslationArgs', () => {
+    it('should return empty span by default', () =>
+        assert.deepEqual(getFieldLabelTranslationArgs(), ['']));
+
+    it('should return the label when given', () =>
+        assert.deepEqual(
+            getFieldLabelTranslationArgs({
+                label: 'foo',
+                resource: 'posts',
+                source: 'title',
+            }),
+            ['foo', { _: 'foo' }]
+        ));
+
+    it('should return the humanized source when given', () => {
+        assert.deepEqual(
+            getFieldLabelTranslationArgs({
+                resource: 'posts',
+                source: 'title',
+            }),
+            [`resources.posts.fields.title`, { _: 'Title' }]
+        );
+
+        assert.deepEqual(
+            getFieldLabelTranslationArgs({
+                resource: 'posts',
+                source: 'title_with_underscore',
+            }),
+            [
+                `resources.posts.fields.title_with_underscore`,
+                { _: 'Title with underscore' },
+            ]
+        );
+
+        assert.deepEqual(
+            getFieldLabelTranslationArgs({
+                resource: 'posts',
+                source: 'titleWithCamelCase',
+            }),
+            [
+                `resources.posts.fields.titleWithCamelCase`,
+                { _: 'Title with camel case' },
+            ]
+        );
+    });
+
+    it('should return the source and resource as translate key', () =>
+        assert.deepEqual(
+            getFieldLabelTranslationArgs({
+                resource: 'posts',
+                source: 'title',
+            }),
+            [`resources.posts.fields.title`, { _: 'Title' }]
+        ));
+});

packages/ra-core/src/util/index.js

@@ -1,6 +1,7 @@
 import downloadCSV from './downloadCSV';
 import FieldTitle from './FieldTitle';
 import getFetchedAt from './getFetchedAt';
+import getFieldLabelTranslationArgs from './getFieldLabelTranslationArgs';
 import HttpError from './HttpError';
 import linkToRecord from './linkToRecord';
 import removeEmpty from './removeEmpty';
@@ -15,6 +16,7 @@ export {
     downloadCSV,
     FieldTitle,
     getFetchedAt,
+    getFieldLabelTranslationArgs,
     HttpError,
     linkToRecord,
     removeEmpty,

packages/ra-ui-materialui/src/field/BooleanField.js

@@ -5,31 +5,76 @@ import pure from 'recompose/pure';
 import FalseIcon from '@material-ui/icons/Clear';
 import TrueIcon from '@material-ui/icons/Done';
 import Typography from '@material-ui/core/Typography';
+import { createStyles, withStyles } from '@material-ui/core/styles';
+import compose from 'recompose/compose';
+import { translate } from 'ra-core';
 
 import sanitizeRestProps from './sanitizeRestProps';
 
-export const BooleanField = ({ className, source, record = {}, ...rest }) => {
-    if (get(record, source) === false) {
+const styles = createStyles({
+    label: {
+        // Move the text out of the flow of the container.
+        position: 'absolute',
+
+        // Reduce its height and width to just one pixel.
+        height: 1,
+        width: 1,
+
+        // Hide any overflowing elements or text.
+        overflow: 'hidden',
+
+        // Clip the box to zero pixels.
+        clip: 'rect(0, 0, 0, 0)',
+
+        // Text won't wrap to a second line.
+        whiteSpace: 'nowrap',
+    }
+});
+
+export const BooleanField = ({
+    className,
+    classes,
+    source,
+    record = {},
+    translate,
+    valueLabelTrue,
+    valueLabelFalse,
+    ...rest
+}) => {
+    const value = get(record, source);
+    let ariaLabel = value
+        ? valueLabelTrue
+        : valueLabelFalse;
+
+    if (!ariaLabel) {
+        ariaLabel = value === false
+            ? translate('ra.boolean.false')
+            : translate('ra.boolean.true');
+    }
+
+    if (value === false) {
         return (
             <Typography
                 component="span"
                 body1="body1"
                 className={className}
                 {...sanitizeRestProps(rest)}
             >
+                <span className={classes.label}>{ariaLabel}</span>
                 <FalseIcon />
             </Typography>
         );
     }
 
-    if (get(record, source) === true) {
+    if (value === true) {
         return (
             <Typography
                 component="span"
                 body1="body1"
                 className={className}
                 {...sanitizeRestProps(rest)}
             >
+                <span className={classes.label}>{ariaLabel}</span>
                 <TrueIcon />
             </Typography>
         );
@@ -55,9 +100,20 @@ BooleanField.propTypes = {
     record: PropTypes.object,
     sortBy: PropTypes.string,
     source: PropTypes.string.isRequired,
+    valueLabelTrue: PropTypes.string,
+    valueLabelFalse: PropTypes.string,
+};
+
+BooleanField.defaultProps = {
+    classes: {},
+    translate: x => x,
 };
 
-const PureBooleanField = pure(BooleanField);
+const PureBooleanField = compose(
+    pure,
+    withStyles(styles),
+    translate,
+)(BooleanField);
 
 PureBooleanField.defaultProps = {
     addLabel: true,

packages/ra-ui-materialui/src/field/BooleanField.spec.js

@@ -4,21 +4,41 @@ import { shallow } from 'enzyme';
 import { BooleanField } from './BooleanField';
 
 describe('<BooleanField />', () => {
-    it('should display tick if value is true', () => {
+    it('should display tick and truthy text if value is true', () => {
         const wrapper = shallow(
-            <BooleanField record={{ published: true }} source="published" />
+            <BooleanField record={{ published: true }} source="published" resource="posts" />
         );
         assert.ok(wrapper.first().is('WithStyles(Typography)'));
         assert.equal(wrapper.first().find('pure(Done)').length, 1);
+        assert.equal(wrapper.first().find('span').text(), 'ra.boolean.true');
     });
 
-    it('should display cross if value is false', () => {
+    it('should display tick and custom truthy text if value is true', () => {
         const wrapper = shallow(
-            <BooleanField record={{ published: false }} source="published" />
+            <BooleanField record={{ published: true }} source="published" resource="posts" valueLabelTrue="Has been published" />
+        );
+        assert.ok(wrapper.first().is('WithStyles(Typography)'));
+        assert.equal(wrapper.first().find('pure(Done)').length, 1);
+        assert.equal(wrapper.first().find('span').text(), 'Has been published');
+    });
+
+    it('should display cross and falsy text if value is false', () => {
+        const wrapper = shallow(
+            <BooleanField record={{ published: false }} source="published" resource="posts" />
         );
 
         assert.ok(wrapper.first().is('WithStyles(Typography)'));
         assert.equal(wrapper.first().find('pure(Clear)').length, 1);
+        assert.equal(wrapper.first().find('span').text(), 'ra.boolean.false');
+    });
+
+    it('should display tick and custom falsy text if value is true', () => {
+        const wrapper = shallow(
+            <BooleanField record={{ published: false }} source="published" resource="posts" valueLabelFalse="Has not been published yet" />
+        );
+        assert.ok(wrapper.first().is('WithStyles(Typography)'));
+        assert.equal(wrapper.first().find('pure(Clear)').length, 1);
+        assert.equal(wrapper.first().find('span').text(), 'Has not been published yet');
     });
 
     it('should not display anything if value is null', () => {