Merge pull request #8 from ColeDenslow/accessible-messages

feature: Added aria-live props for field messages

.nvmrc

@@ -0,0 +1 @@
+v12.14.1

package.json

@@ -3,7 +3,7 @@
   "description": "Component library built specifically for storefronts.",
   "license": "MIT",
   "main": "lib",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "peerDependencies": {
     "classnames": "^2.2.6",
     "prop-types": "^15.6.2",

src/components/field/Field.js

@@ -6,7 +6,7 @@ import './Field.css';
 
 function Field(props) {
   const {
-    children, className, disabled, helpText, htmlFor, id, label, messageText, messageType, ...otherProps
+    children, className, disabled, helpText, htmlFor, id, label, messageText, messageType, ariaLive, ...otherProps
   } = props;
 
   const classNames = cn([
@@ -19,7 +19,7 @@ function Field(props) {
   ]);
 
   const renderMessageText = () => {
-    return messageText && <div className='stx-field__message'>{ messageText }</div>;
+    return messageText && <div className='stx-field__message' aria-live={ariaLive}>{ messageText }</div>;
   };
 
   const renderHelpText = () => {
@@ -67,6 +67,9 @@ Field.propTypes = {
   /** The type of message to show */
   messageType: PropTypes.oneOf(['success', 'warning', 'alert', '']),
 
+  /** The aria-live attribute value that will be set on the message if one is given */
+  ariaLive: PropTypes.oneOf(['polite', 'assertive']),
+
   /** The text to display for the message */
   messageText: PropTypes.string,
 

src/components/field/Field.test.js

@@ -11,6 +11,7 @@ describe('Field', () => {
       messageText='Some message text'
       messageType='alert'
       helpText='Some help text'
+      ariaLive='assertive'
     >
       <div>
         {'There are children'}

src/components/field/__snapshots__/Field.test.js.snap

@@ -8,6 +8,7 @@ exports[`Field Field render disabled when disabled is true 1`] = `
 
 exports[`Field Field renders with basic props 1`] = `
 <Field
+  ariaLive="assertive"
   className="the-class"
   data-additional-prop="additional-prop"
   helpText="Some help text"
@@ -22,6 +23,7 @@ exports[`Field Field renders with basic props 1`] = `
       There are children
     </div>
     <div
+      aria-live="assertive"
       className="stx-field__message"
     >
       Some message text

src/components/inputfield/InputField.js

@@ -15,7 +15,7 @@ class InputField extends Component {
   }
 
   render() {
-    const { className, disabled, helpText, id, label, messageText, messageType, readOnly, ...otherProps } = this.props;
+    const { className, disabled, helpText, id, label, messageText, messageType, readOnly, ariaLive, ...otherProps } = this.props;
     const classNames = cn([
       'stx-field--with-input',
       className,
@@ -31,6 +31,7 @@ class InputField extends Component {
         messageText={messageText}
         disabled={disabled}
         readOnly={readOnly}
+        ariaLive={ariaLive}
       >
         <Input
           {...otherProps}
@@ -58,6 +59,8 @@ InputField.propTypes = {
   messageType: PropTypes.oneOf(['success', 'warning', 'alert', '']),
   /** The text that should appear as a message */
   messageText: PropTypes.string,
+  /** The aria-live attribute value that will be set on the message if one is given */
+  ariaLive: PropTypes.oneOf(['assertive', 'polite']),
   /** Whether or not the field is disabled */
   disabled: PropTypes.bool,
   /** Whether or not the field is read only */

src/components/inputfield/InputField.test.js

@@ -26,6 +26,7 @@ describe('InputField', () => {
       onChange={onChange}
       onKeyUp={onKeyUp}
       onKeyDown={onKeyDown}
+      ariaLive='assertive'
       selectOnFocus
     />);
 

src/components/inputfield/__snapshots__/InputField.test.js.snap

@@ -191,6 +191,7 @@ exports[`InputField InputField renders with a tabIndex value 1`] = `
 
 exports[`InputField InputField renders with basic props 1`] = `
 <Field
+  ariaLive="assertive"
   className="stx-field--with-input html-class"
   htmlFor="test-id"
 >

src/components/selectfield/SelectField.js

@@ -15,7 +15,7 @@ class SelectField extends Component {
   }
 
   render() {
-    const { id, label, className, disabled, readOnly, messageType, messageText, helpText, ...otherProps } = this.props;
+    const { id, label, className, disabled, readOnly, messageType, messageText, helpText, ariaLive, ...otherProps } = this.props;
     const classNames = cn([
       'stx-field--with-select',
       className,
@@ -31,6 +31,7 @@ class SelectField extends Component {
         messageText={messageText}
         disabled={disabled}
         readOnly={readOnly}
+        ariaLive={ariaLive}
       >
         <Select
           {...otherProps}
@@ -66,6 +67,10 @@ SelectField.propTypes = {
 
   /** The type of message to display */
   messageType: PropTypes.oneOf(['alert', 'warning', 'success', '']),
+
+  /** The aria-live attribute value that will be set on the message if one is given */
+  ariaLive: PropTypes.oneOf(['assertive', 'polite']),
+
   /** The order in which fields should gain focus when pressing Tab */
   tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 

src/components/selectfield/SelectField.test.js

@@ -17,6 +17,7 @@ describe('SelectField', () => {
       tabIndex='1'
       placeholder='Select something'
       placeholderValue='placeholder value'
+      ariaLive='assertive'
     >
       <option value='one'>One</option>
       <option value='two'>Two</option>

src/components/selectfield/__snapshots__/SelectField.test.js.snap

@@ -2,6 +2,7 @@
 
 exports[`SelectField SelectField renders with basic props 1`] = `
 <SelectField
+  ariaLive="assertive"
   className="the-class"
   onBlur={[Function]}
   onChange={[Function]}
@@ -11,6 +12,7 @@ exports[`SelectField SelectField renders with basic props 1`] = `
   tabIndex="1"
 >
   <Field
+    ariaLive="assertive"
     className="stx-field--with-select the-class"
     htmlFor="stxField1"
   >

yarn.lock

@@ -2587,9 +2587,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001043:
-  version "1.0.30001045"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001045.tgz#a770df9de36ad6ca0c34f90eaa797a2dbbb1b619"
-  integrity sha512-Y8o2Iz1KPcD6FjySbk1sPpvJqchgxk/iow0DABpGyzA1UeQAuxh63Xh0Enj5/BrsYbXtCN32JmR4ZxQTCQ6E6A==
+  version "1.0.30001357"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001357.tgz"
+  integrity sha512-b+KbWHdHePp+ZpNj+RDHFChZmuN+J5EvuQUlee9jOQIUAdhv9uvAZeEtUeLAknXbkiu1uxjQ9NLp1ie894CuWg==
 
 capture-exit@^1.2.0:
   version "1.2.0"