STCOM-1165: Format aria attributes in <Icon> (#2210)

* STCOM-1165: Format aria attributes in `<Icon>`

* STCOM-1165: fix test for icon

CHANGELOG.md

@@ -15,6 +15,7 @@
 * TextLink - underline showing up on nested spans with 'display: inline-flex'. Refs STCOM-1226.
 * Use the default search option instead of an unsupported one in Advanced search. Refs STCOM-1242.
 * Added support for clear icon in `<TextArea>`. Refs STCOM-1240.
+* Format aria attributes in `<Icon>`. Refs STCOM-1165.
 
 ## [12.0.0](https://github.com/folio-org/stripes-components/tree/v12.0.0) (2023-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v11.0.0...v12.0.0)

lib/Icon/Icon.js

@@ -1,7 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { pickBy, get } from 'lodash';
+import {
+  pickBy,
+  get,
+  mapKeys
+} from 'lodash';
 import css from './Icon.css';
 import icons from './icons';
 
@@ -87,14 +91,21 @@ const Icon = React.forwardRef(({
 
   const ariaAttributes = pickBy(rest, (_, key) => key.startsWith('aria'));
 
+  const formattedAriaAttributes = mapKeys(ariaAttributes, (_, key) => {
+    if (key.startsWith('aria')) {
+      return key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+    }
+    return key;
+  });
+
   return (
     <span
       className={getRootClass}
       id={id}
       ref={ref}
       role="presentation"
       tabIndex={tabIndex}
-      {...ariaAttributes}
+      {...formattedAriaAttributes}
     >
       <IconElement
         data-test-icon-element

lib/Icon/tests/Icon-test.js

@@ -74,7 +74,6 @@ describe('Icon', () => {
       await mount(
         <Icon
           id="icon-id"
-          ariaLabel="icon-title"
           tabIndex="0"
           icon="bookmark"
           iconClassName={iconClassName}