Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

Commit

Permalink
update: A11y changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@MadanKumarGovindaswamy
MadanKumarGovindaswamy committed May 16, 2024
1 parent 2f632db commit efe0928
Show file tree
Hide file tree
Showing 5 changed files with 65 additions and 14 deletions.
1 change: 1 addition & 0 deletions ...rra-framework-docs/src/terra-dev-site/doc/navigation-side-menu/example/DrillInExample.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ class DrillInDefault extends React.Component {
selectedChildKey={this.state.selectedChildKey}
ariaLabel="Sub Menu List"
variant={VARIANTS.DRILL_IN}
headerLevel={3}
/>
);

Expand Down
10 changes: 9 additions & 1 deletion packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down Expand Up @@ -96,6 +100,7 @@ const propTypes = {
const defaultProps = {
menuItems: [],
variant: VARIANTS.NAVIGATION_SIDE_MENU,
headerLevel: 3,
};

const processMenuItems = (menuItems, variant) => {
Expand Down Expand Up @@ -379,6 +384,7 @@ class NavigationSideMenu extends Component {
selectedMenuKey,
toolbar,
variant,
headerLevel,
...customProps
} = this.props;
const currentItem = this.state.items[selectedMenuKey];
Expand All @@ -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;
Expand Down Expand Up @@ -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>
Expand Down
11 changes: 11 additions & 0 deletions packages/terra-navigation-side-menu/src/NavigationSideMenu.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
}
}
12 changes: 10 additions & 2 deletions packages/terra-navigation-side-menu/src/_MenuItem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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}
Expand All @@ -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')}>
Expand Down
45 changes: 34 additions & 11 deletions ...ages/terra-navigation-side-menu/tests/jest/__snapshots__/NavigationSideMenu.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ exports[`Layout correctly applies the theme context className 1`] = `
selectedMenuKey="menu"
>
<NavigationSideMenu
headerLevel={3}
intl={
Object {
"defaultFormats": Object {},
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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 {},
Expand Down Expand Up @@ -635,6 +637,7 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
>
<NavigationSideMenu
ariaLabel="Sub Menu List"
headerLevel={3}
intl={
Object {
"defaultFormats": Object {},
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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 {},
Expand Down Expand Up @@ -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 {},
Expand Down Expand Up @@ -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 {},
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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]}
Expand All @@ -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"
Expand All @@ -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"
/>
Expand Down Expand Up @@ -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"
Expand All @@ -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"
/>
Expand Down Expand Up @@ -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"
Expand All @@ -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"
/>
Expand Down Expand Up @@ -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"
Expand All @@ -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"
/>
Expand Down

0 comments on commit efe0928

Please sign in to comment.