From fbfd70590c91f812b6f9dae32dc26672e0b6fac3 Mon Sep 17 00:00:00 2001
From: UladzislauKutarkin
 <72550466+UladzislauKutarkin@users.noreply.github.com>
Date: Thu, 18 Jan 2024 01:43:10 +0400
Subject: [PATCH] STCOM-1165: Format aria attributes in `<Icon>` (#2210)

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

* STCOM-1165: fix test for icon
---
 CHANGELOG.md                |  1 +
 lib/Icon/Icon.js            | 15 +++++++++++++--
 lib/Icon/tests/Icon-test.js |  1 -
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b212b7dd5..54e56272f 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/lib/Icon/Icon.js b/lib/Icon/Icon.js
index aa65f96ed..70a735ccc 100644
--- a/lib/Icon/Icon.js
+++ b/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,6 +91,13 @@ 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}
@@ -94,7 +105,7 @@ const Icon = React.forwardRef(({
       ref={ref}
       role="presentation"
       tabIndex={tabIndex}
-      {...ariaAttributes}
+      {...formattedAriaAttributes}
     >
       <IconElement
         data-test-icon-element
diff --git a/lib/Icon/tests/Icon-test.js b/lib/Icon/tests/Icon-test.js
index 1386daf50..b1eccf622 100644
--- a/lib/Icon/tests/Icon-test.js
+++ b/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}