feat: make #form-status more accessible

packages/dnb-ui-lib/src/components/form-status/FormStatus.js

@@ -27,15 +27,18 @@ export const propTypes = {
   ]),
   icon_size: PropTypes.string,
   status: PropTypes.oneOf(['error', 'info']),
+  hidden: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   class: PropTypes.string,
   animation: PropTypes.string,
+
   /** React props */
   className: PropTypes.string,
   children: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.func,
     PropTypes.node
   ]),
+
   // Web Component props
   render_content: PropTypes.func
 }
@@ -46,11 +49,14 @@ export const defaultProps = {
   icon: 'exclamation',
   icon_size: 'default',
   status: 'error',
+  hidden: false,
   class: null,
   animation: null, // could be 'fade-in'
+
   /** React props */
   className: null,
   children: null,
+
   // Web Component props
   ...renderProps
 }
@@ -94,25 +100,37 @@ export default class FormStatus extends PureComponent {
     const {
       title,
       status,
+      hidden,
       className,
       animation,
       class: _className
     } = this.props
 
     const iconToRender = FormStatus.getIcon(this.props)
     const contentToRender = FormStatus.getContent(this.props)
+    const hasStringContent =
+      typeof contentToRender === 'string' && contentToRender.length > 0
 
     const params = {
+      hidden,
       className: classnames(
         'dnb-form-status',
         `dnb-form-status--${status}`,
         animation ? `dnb-form-status--${animation}` : null,
+        hasStringContent ? 'dnb-form-status--has-content' : null,
         className,
         _className
       ),
       title
     }
 
+    if (hidden) {
+      params['aria-hidden'] = hidden
+    } else if (hasStringContent) {
+      // in case we send in a React component, witchs has its own state, then we dont want to have aria-live all the time active
+      params['aria-live'] = 'assertive'
+    }
+
     // also used for code markup simulation
     validateDOMAttributes(this.props, params)
 

packages/dnb-ui-lib/src/components/form-status/__tests__/FormStatus.test.js

@@ -16,6 +16,7 @@ const props = fakeProps(require.resolve('../FormStatus'), {
   optional: true
 })
 props.status = 'error'
+props.hidden = false
 props.icon = 'exclamation'
 
 describe('FormStatus component', () => {
@@ -29,6 +30,17 @@ describe('FormStatus component', () => {
     expect(await axeComponent(Comp)).toHaveNoViolations()
   })
 
+  it('should have correact attributes once the "hidden" prop changes', async () => {
+    const Comp = mount(<Component {...props} hidden />)
+    expect(Comp.exists('[aria-hidden]')).toBe(true)
+    expect(Comp.exists('[aria-live="assertive"]')).toBe(false)
+    Comp.setProps({
+      hidden: false
+    })
+    expect(Comp.exists('[aria-live="assertive"]')).toBe(true)
+    expect(await axeComponent(Comp)).toHaveNoViolations()
+  })
+
   it('has to to have a text value as defined in the prop', () => {
     expect(Comp.find('.dnb-form-status--text').text()).toBe('text')
   })

packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap

@@ -5,6 +5,7 @@ exports[`FormStatus component have to match snapshot 1`] = `
   animation="animation"
   class="class"
   className="className"
+  hidden={false}
   icon="exclamation"
   icon_size="icon_size"
   render_content={[Function]}
@@ -13,7 +14,9 @@ exports[`FormStatus component have to match snapshot 1`] = `
   title="title"
 >
   <span
-    className="dnb-form-status dnb-form-status--error dnb-form-status--animation className class"
+    aria-live="assertive"
+    className="dnb-form-status dnb-form-status--error dnb-form-status--animation dnb-form-status--has-content className class"
+    hidden={false}
     title="title"
   >
     <IconPrimary

packages/dnb-ui-lib/src/components/form-status/style/_form-status.scss

@@ -54,6 +54,10 @@
   // &--error {
   // }
 
+  &[hidden] {
+    display: none;
+  }
+
   &--fade-in {
     @keyframes fade-in {
       from {