From efe092898c391c161a46c7b78eb5482855fa0485 Mon Sep 17 00:00:00 2001
From: MadanKumarGovindaswamy <madankumar.govindaswamy@cerner.com>
Date: Thu, 16 May 2024 16:04:31 +0530
Subject: [PATCH] update: A11y changes

---
 .../example/DrillInExample.jsx                |  1 +
 .../src/NavigationSideMenu.jsx                | 10 ++++-
 .../src/NavigationSideMenu.module.scss        | 11 +++++
 .../src/_MenuItem.jsx                         | 12 ++++-
 .../NavigationSideMenu.test.jsx.snap          | 45 ++++++++++++++-----
 5 files changed, 65 insertions(+), 14 deletions(-)

diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/navigation-side-menu/example/DrillInExample.jsx b/packages/terra-framework-docs/src/terra-dev-site/doc/navigation-side-menu/example/DrillInExample.jsx
index 0659bfefd4..f4616b98bd 100644
--- a/packages/terra-framework-docs/src/terra-dev-site/doc/navigation-side-menu/example/DrillInExample.jsx
+++ b/packages/terra-framework-docs/src/terra-dev-site/doc/navigation-side-menu/example/DrillInExample.jsx
@@ -56,6 +56,7 @@ class DrillInDefault extends React.Component {
         selectedChildKey={this.state.selectedChildKey}
         ariaLabel="Sub Menu List"
         variant={VARIANTS.DRILL_IN}
+        headerLevel={3}
       />
     );
 
diff --git a/packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx b/packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx
index 3e859078fe..885796000a 100644
--- a/packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx
+++ b/packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx
@@ -24,6 +24,10 @@ const propTypes = {
    * String that labels the navigation menu for screen readers.
    */
   ariaLabel: PropTypes.string,
+  /**
+   * The heading level for the title of the menu.
+   */
+  headerLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
   /**
    * An array of configuration for each menu item.
    */
@@ -96,6 +100,7 @@ const propTypes = {
 const defaultProps = {
   menuItems: [],
   variant: VARIANTS.NAVIGATION_SIDE_MENU,
+  headerLevel: 3,
 };
 
 const processMenuItems = (menuItems, variant) => {
@@ -379,6 +384,7 @@ class NavigationSideMenu extends Component {
       selectedMenuKey,
       toolbar,
       variant,
+      headerLevel,
       ...customProps
     } = this.props;
     const currentItem = this.state.items[selectedMenuKey];
@@ -388,6 +394,8 @@ class NavigationSideMenu extends Component {
       theme.className,
     ]);
 
+    const HeaderElement = `h${headerLevel}`;
+
     const parentKey = this.state.parents[selectedMenuKey];
     if (parentKey) {
       this.onBack = this.handleBackClick;
@@ -415,7 +423,7 @@ class NavigationSideMenu extends Component {
             data-navigation-side-menu
           >
             {(this.onBack) ? <span className={cx(['header-icon', 'back'])} /> : null}
-            <h1 className={cx('title')}>{currentItem ? currentItem.text : null}</h1>
+            <HeaderElement className={(variant === VARIANTS.DRILL_IN) ? cx('drill-in-title') : cx('title')}>{currentItem ? currentItem.text : null}</HeaderElement>
           </div>
           {toolbar}
         </li>
diff --git a/packages/terra-navigation-side-menu/src/NavigationSideMenu.module.scss b/packages/terra-navigation-side-menu/src/NavigationSideMenu.module.scss
index dd4504a15a..e217d21ab2 100644
--- a/packages/terra-navigation-side-menu/src/NavigationSideMenu.module.scss
+++ b/packages/terra-navigation-side-menu/src/NavigationSideMenu.module.scss
@@ -84,4 +84,15 @@
     width: 100%;
     word-wrap: break-word; /* For IE 10 and IE 11 */
   }
+
+  .drill-in-title {
+    color: var(--terra-navigation-side-menu-header-color);
+    font-weight: 700;
+    hyphens: auto;
+    margin: 5px;
+    overflow-wrap: break-word; /* Modern browsers */
+    padding: 0.28571rem;
+    width: 100%;
+    word-wrap: break-word; /* For IE 10 and IE 11 */
+  }
 }
diff --git a/packages/terra-navigation-side-menu/src/_MenuItem.jsx b/packages/terra-navigation-side-menu/src/_MenuItem.jsx
index b7e37ec299..c923276059 100644
--- a/packages/terra-navigation-side-menu/src/_MenuItem.jsx
+++ b/packages/terra-navigation-side-menu/src/_MenuItem.jsx
@@ -120,7 +120,7 @@ class MenuItem extends React.Component {
     } = this.props;
     const theme = this.context;
 
-    const itemIcon = hasChevron && !icon ? <IconFolder /> : (icon || <IconDocuments />);
+    const itemIcon = hasChevron && !icon ? <IconFolder a11yLabel="Folder" /> : (icon || <IconDocuments a11yLabel="Document" />);
 
     const itemClassNames = classNames(cx(
       'menu-item',
@@ -137,6 +137,14 @@ class MenuItem extends React.Component {
       { 'is-disabled': isDisabled },
     );
 
+    const ariaAttributes = {};
+    ariaAttributes['aria-haspopup'] = hasChevron;
+    ariaAttributes['aria-disabled'] = isDisabled;
+
+    if (hasChevron) {
+      ariaAttributes['aria-expanded'] = !hasChevron;
+    }
+
     return (
       <li
         className={listItemClassNames}
@@ -149,7 +157,7 @@ class MenuItem extends React.Component {
           tabIndex={this.props.tabIndex}
           className={itemClassNames}
           onKeyDown={this.handleKeyDown}
-          aria-haspopup={hasChevron}
+          {...ariaAttributes}
         >
           {variant === VARIANTS.DRILL_IN && itemIcon && <span className={cx('icon')}>{itemIcon}</span>}
           <div className={cx('title')}>
diff --git a/packages/terra-navigation-side-menu/tests/jest/__snapshots__/NavigationSideMenu.test.jsx.snap b/packages/terra-navigation-side-menu/tests/jest/__snapshots__/NavigationSideMenu.test.jsx.snap
index 75e0f9a2d4..d3755e9ac1 100644
--- a/packages/terra-navigation-side-menu/tests/jest/__snapshots__/NavigationSideMenu.test.jsx.snap
+++ b/packages/terra-navigation-side-menu/tests/jest/__snapshots__/NavigationSideMenu.test.jsx.snap
@@ -71,6 +71,7 @@ exports[`Layout correctly applies the theme context className 1`] = `
     selectedMenuKey="menu"
   >
     <NavigationSideMenu
+      headerLevel={3}
       intl={
         Object {
           "defaultFormats": Object {},
@@ -240,11 +241,11 @@ exports[`Layout correctly applies the theme context className 1`] = `
                         <span
                           className="header-icon back"
                         />
-                        <h1
+                        <h3
                           className="title"
                         >
                           Test Menu
-                        </h1>
+                        </h3>
                       </div>
                     </li>
                     <InjectIntl(MenuItem)
@@ -529,6 +530,7 @@ exports[`Layout correctly applies the theme context className 1`] = `
 
 exports[`Layout should render a NavigationSideMenu with a toolbar 1`] = `
 <NavigationSideMenu
+  headerLevel={3}
   intl={
     Object {
       "defaultFormats": Object {},
@@ -635,6 +637,7 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
 >
   <NavigationSideMenu
     ariaLabel="Sub Menu List"
+    headerLevel={3}
     intl={
       Object {
         "defaultFormats": Object {},
@@ -807,11 +810,11 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
                       <span
                         className="header-icon back"
                       />
-                      <h1
+                      <h3
                         className="title"
                       >
                         Test Menu
-                      </h1>
+                      </h3>
                     </div>
                   </li>
                   <InjectIntl(MenuItem)
@@ -1095,6 +1098,7 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
 
 exports[`Layout should render a NavigationSideMenu with default props 1`] = `
 <NavigationSideMenu
+  headerLevel={3}
   intl={
     Object {
       "defaultFormats": Object {},
@@ -1132,6 +1136,7 @@ exports[`Layout should render a NavigationSideMenu with default props 1`] = `
 
 exports[`Layout should render a NavigationSideMenu with selectedKey 1`] = `
 <NavigationSideMenu
+  headerLevel={3}
   intl={
     Object {
       "defaultFormats": Object {},
@@ -1262,6 +1267,7 @@ exports[`Layout should render a drill-in variant of NavigationSideMenu with sele
   variant="drill-in"
 >
   <NavigationSideMenu
+    headerLevel={3}
     intl={
       Object {
         "defaultFormats": Object {},
@@ -1432,11 +1438,11 @@ exports[`Layout should render a drill-in variant of NavigationSideMenu with sele
                       <span
                         className="header-icon back"
                       />
-                      <h1
-                        className="title"
+                      <h3
+                        className="drill-in-title"
                       >
                         Test Menu
-                      </h1>
+                      </h3>
                     </div>
                   </li>
                   <InjectIntl(MenuItem)
@@ -1490,6 +1496,7 @@ exports[`Layout should render a drill-in variant of NavigationSideMenu with sele
                         role="none"
                       >
                         <div
+                          aria-disabled={true}
                           className="menu-item is-drill-in"
                           data-menu-item="test1"
                           onKeyDown={[Function]}
@@ -1500,11 +1507,13 @@ exports[`Layout should render a drill-in variant of NavigationSideMenu with sele
                             className="icon"
                           >
                             <IconDocuments
+                              a11yLabel="Document"
                               data-name="Layer 1"
                               viewBox="0 0 48 48"
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <IconBase
+                                a11yLabel="Document"
                                 data-name="Layer 1"
                                 focusable="false"
                                 height="1em"
@@ -1519,11 +1528,13 @@ exports[`Layout should render a drill-in variant of NavigationSideMenu with sele
                                   data-name="Layer 1"
                                   focusable="false"
                                   height="1em"
-                                  role="presentation"
                                   viewBox="0 0 48 48"
                                   width="1em"
                                   xmlns="http://www.w3.org/2000/svg"
                                 >
+                                  <title>
+                                    Document
+                                  </title>
                                   <path
                                     d="m41.9 9.9-8.8-8.8A3.12 3.12 0 0 0 30.6 0H14.2A2.56 2.56 0 0 0 12 2v5H7a2.57 2.57 0 0 0-2 2v37a2.24 2.24 0 0 0 2 2h26a2.07 2.07 0 0 0 2-2v-5h6.1a2.06 2.06 0 0 0 1.9-2V12a2.92 2.92 0 0 0-1.1-2.1zM31 3.2l9 8.8h-9zM32 45H8V10h4v29a2.25 2.25 0 0 0 2.1 2H32zm8-7H15V3h13v9a2.77 2.77 0 0 0 3.1 3H40z"
                                   />
@@ -1602,11 +1613,13 @@ exports[`Layout should render a drill-in variant of NavigationSideMenu with sele
                             className="icon"
                           >
                             <IconDocuments
+                              a11yLabel="Document"
                               data-name="Layer 1"
                               viewBox="0 0 48 48"
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <IconBase
+                                a11yLabel="Document"
                                 data-name="Layer 1"
                                 focusable="false"
                                 height="1em"
@@ -1621,11 +1634,13 @@ exports[`Layout should render a drill-in variant of NavigationSideMenu with sele
                                   data-name="Layer 1"
                                   focusable="false"
                                   height="1em"
-                                  role="presentation"
                                   viewBox="0 0 48 48"
                                   width="1em"
                                   xmlns="http://www.w3.org/2000/svg"
                                 >
+                                  <title>
+                                    Document
+                                  </title>
                                   <path
                                     d="m41.9 9.9-8.8-8.8A3.12 3.12 0 0 0 30.6 0H14.2A2.56 2.56 0 0 0 12 2v5H7a2.57 2.57 0 0 0-2 2v37a2.24 2.24 0 0 0 2 2h26a2.07 2.07 0 0 0 2-2v-5h6.1a2.06 2.06 0 0 0 1.9-2V12a2.92 2.92 0 0 0-1.1-2.1zM31 3.2l9 8.8h-9zM32 45H8V10h4v29a2.25 2.25 0 0 0 2.1 2H32zm8-7H15V3h13v9a2.77 2.77 0 0 0 3.1 3H40z"
                                   />
@@ -1704,11 +1719,13 @@ exports[`Layout should render a drill-in variant of NavigationSideMenu with sele
                             className="icon"
                           >
                             <IconDocuments
+                              a11yLabel="Document"
                               data-name="Layer 1"
                               viewBox="0 0 48 48"
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <IconBase
+                                a11yLabel="Document"
                                 data-name="Layer 1"
                                 focusable="false"
                                 height="1em"
@@ -1723,11 +1740,13 @@ exports[`Layout should render a drill-in variant of NavigationSideMenu with sele
                                   data-name="Layer 1"
                                   focusable="false"
                                   height="1em"
-                                  role="presentation"
                                   viewBox="0 0 48 48"
                                   width="1em"
                                   xmlns="http://www.w3.org/2000/svg"
                                 >
+                                  <title>
+                                    Document
+                                  </title>
                                   <path
                                     d="m41.9 9.9-8.8-8.8A3.12 3.12 0 0 0 30.6 0H14.2A2.56 2.56 0 0 0 12 2v5H7a2.57 2.57 0 0 0-2 2v37a2.24 2.24 0 0 0 2 2h26a2.07 2.07 0 0 0 2-2v-5h6.1a2.06 2.06 0 0 0 1.9-2V12a2.92 2.92 0 0 0-1.1-2.1zM31 3.2l9 8.8h-9zM32 45H8V10h4v29a2.25 2.25 0 0 0 2.1 2H32zm8-7H15V3h13v9a2.77 2.77 0 0 0 3.1 3H40z"
                                   />
@@ -1806,11 +1825,13 @@ exports[`Layout should render a drill-in variant of NavigationSideMenu with sele
                             className="icon"
                           >
                             <IconDocuments
+                              a11yLabel="Document"
                               data-name="Layer 1"
                               viewBox="0 0 48 48"
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <IconBase
+                                a11yLabel="Document"
                                 data-name="Layer 1"
                                 focusable="false"
                                 height="1em"
@@ -1825,11 +1846,13 @@ exports[`Layout should render a drill-in variant of NavigationSideMenu with sele
                                   data-name="Layer 1"
                                   focusable="false"
                                   height="1em"
-                                  role="presentation"
                                   viewBox="0 0 48 48"
                                   width="1em"
                                   xmlns="http://www.w3.org/2000/svg"
                                 >
+                                  <title>
+                                    Document
+                                  </title>
                                   <path
                                     d="m41.9 9.9-8.8-8.8A3.12 3.12 0 0 0 30.6 0H14.2A2.56 2.56 0 0 0 12 2v5H7a2.57 2.57 0 0 0-2 2v37a2.24 2.24 0 0 0 2 2h26a2.07 2.07 0 0 0 2-2v-5h6.1a2.06 2.06 0 0 0 1.9-2V12a2.92 2.92 0 0 0-1.1-2.1zM31 3.2l9 8.8h-9zM32 45H8V10h4v29a2.25 2.25 0 0 0 2.1 2H32zm8-7H15V3h13v9a2.77 2.77 0 0 0 3.1 3H40z"
                                   />