Merge pull request #719 from open-formulieren/feature/4717-accessibil…

…ity-improvements-aria-tags

Improve a11y with aria attributes

src/components/Errors/ErrorMessage.js

@@ -11,13 +11,20 @@ const ICONS = {
   ok: <i className="fa fas fa-check-circle" />,
 };
 
+const ARIA_TAGS = {
+  error: {role: 'alert'},
+  warning: {role: 'alert'},
+  info: {role: 'status', 'aria-live': 'polite'},
+  ok: {role: 'status', 'aria-live': 'polite'},
+};
+
 const ALERT_MODIFIERS = ['info', 'warning', 'error', 'ok'];
 
 const ErrorMessage = ({children, modifier = 'error'}) => {
   const errorRef = useScrollIntoView();
   if (!children) return null;
   return (
-    <Alert type={modifier} icon={ICONS[modifier]} ref={errorRef}>
+    <Alert type={modifier} icon={ICONS[modifier]} ref={errorRef} {...ARIA_TAGS[modifier]}>
       {children}
     </Alert>
   );

src/components/Loader.js

@@ -1,20 +1,29 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import {FormattedMessage} from 'react-intl';
 
 import {getBEMClassName} from 'utils';
 
 export const MODIFIERS = ['centered', 'only-child', 'small', 'gray'];
 
-const Loader = ({modifiers = []}) => {
+const Loader = ({modifiers = [], withoutTranslation}) => {
   const className = getBEMClassName('loading', modifiers);
   return (
     <div className={className} role="status">
       <span className={getBEMClassName('loading__spinner')} />
+      <span className="sr-only">
+        {withoutTranslation ? (
+          'Loading...'
+        ) : (
+          <FormattedMessage description="Loading content text" defaultMessage="Loading..." />
+        )}
+      </span>
     </div>
   );
 };
 
 Loader.propTypes = {
+  withoutTranslation: PropTypes.bool,
   modifiers: PropTypes.arrayOf(PropTypes.oneOf(MODIFIERS)),
 };
 

src/components/Loader.stories.js

@@ -5,6 +5,7 @@ export default {
   component: _Loader,
   args: {
     modifiers: [],
+    withoutTranslation: true,
   },
   argTypes: {
     modifiers: {

src/components/modals/Modal.js

@@ -3,6 +3,7 @@ import React, {createContext, useContext, useEffect} from 'react';
 import {useIntl} from 'react-intl';
 import ReactModal from 'react-modal';
 
+import {OFButton} from 'components/Button';
 import FAIcon from 'components/FAIcon';
 import {getBEMClassName} from 'utils';
 
@@ -46,21 +47,21 @@ const Modal = ({
     >
       <header className={getBEMClassName('react-modal__header')}>
         {title ? <Title className={getBEMClassName('react-modal__title')}>{title}</Title> : null}
-        <FAIcon
-          icon="close"
-          extraClassName={getBEMClassName('react-modal__close')}
+        <OFButton
+          appearance="subtle-button"
+          onClick={closeModal}
+          className={getBEMClassName('react-modal__close')}
           title={intl.formatMessage({
             description: 'Modal close icon title',
             defaultMessage: 'Close',
           })}
-          onClick={closeModal}
-          noAriaHidden
-          role="button"
           aria-label={intl.formatMessage({
             description: 'Modal close icon title',
             defaultMessage: 'Close',
           })}
-        />
+        >
+          <FAIcon icon="close" />
+        </OFButton>
       </header>
       {children}
     </ReactModal>

src/i18n.js

@@ -66,7 +66,7 @@ const I18NManager = ({languageSelectorTarget, onLanguageChangeDone, children}) =
     };
   }, [baseUrl, languageCode]);
 
-  if (loading) return <Loader modifiers={['centered']} />;
+  if (loading) return <Loader modifiers={['centered']} withoutTranslation />;
 
   if (error) {
     throw error;

src/i18n/messages/en.json

@@ -684,6 +684,11 @@
     "description": "return to form start link after 403",
     "originalDefault": "Back to form start"
   },
+  "eAmrdi": {
+    "defaultMessage": "Loading...",
+    "description": "Loading content text",
+    "originalDefault": "Loading..."
+  },
   "eO6Ysb": {
     "defaultMessage": "Your payment is currently processing.",
     "description": "payment processing status",

src/i18n/messages/nl.json

@@ -693,6 +693,11 @@
     "description": "return to form start link after 403",
     "originalDefault": "Back to form start"
   },
+  "eAmrdi": {
+    "defaultMessage": "Laden...",
+    "description": "Loading content text",
+    "originalDefault": "Loading..."
+  },
   "eO6Ysb": {
     "defaultMessage": "De betaling wordt momenteel verwerkt.",
     "description": "payment processing status",

src/scss/components/_react-modal.scss

@@ -55,10 +55,18 @@ $modal-close-icon-offset: math.div($modal-padding, 2) !default;
     overflow: auto;
   }
 
-  &__close {
+  &__close.utrecht-button {
     position: absolute;
-    top: $modal-close-icon-offset;
-    right: $modal-close-icon-offset;
+    display: inline-block;
+    top: calc(
+      $modal-close-icon-offset - var(--utrecht-button-padding-block-start) -
+        var(--_utrecht-button-border-width)
+    );
+    right: calc(
+      $modal-close-icon-offset - var(--utrecht-button-padding-inline-end) -
+        var(--_utrecht-button-border-width)
+    );
+    inline-size: auto;
     cursor: pointer;
     opacity: 0.5;
     font-size: 150%;