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

[terra-navigation-side-menu] A11y changes #2166

Merged
merged 13 commits into from
May 21, 2024
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/terra-framework-docs/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Changed
* Updated example for drill-in view under `terra-navigation-side-menu`.

## 1.88.0 - (May 15, 2024)

* Added
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ class DrillInDefault extends React.Component {
},
{ key: 'subsubmenu2', text: 'Laboratory' },
{
key: 'subsubmenu3', text: 'Rehabilitation services', childKeys: ['rehab1', 'rehab2', 'rehab3'], icon: <IconHospital />,
key: 'subsubmenu3', text: 'Rehabilitation services', childKeys: ['rehab1', 'rehab2', 'rehab3'], icon: <IconHospital a11yLabel="Location" />,
},
{ key: 'rehab1', text: 'Rehabilitation services 1' },
{ key: 'rehab2', text: 'Rehabilitation services 2' },
Expand All @@ -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
4 changes: 4 additions & 0 deletions packages/terra-navigation-side-menu/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Unreleased

* Added
* Added headerLevel prop for the title of the menu.
* Added missing A11y attributes.

## 2.57.0 - (May 15, 2024)

* Added
Expand Down
10 changes: 9 additions & 1 deletion packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx
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
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 {
MadanKumarGovindaswamy marked this conversation as resolved.
Show resolved Hide resolved
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
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={intl.formatMessage({ id: 'Terra.navigation.side.menu.folder' })} /> : (icon || <IconDocuments a11yLabel={intl.formatMessage({ id: 'Terra.navigation.side.menu.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;
}

MadanKumarGovindaswamy marked this conversation as resolved.
Show resolved Hide resolved
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
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="Terra.navigation.side.menu.document"
data-name="Layer 1"
viewBox="0 0 48 48"
xmlns="http://www.w3.org/2000/svg"
>
<IconBase
a11yLabel="Terra.navigation.side.menu.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>
Terra.navigation.side.menu.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="Terra.navigation.side.menu.document"
data-name="Layer 1"
viewBox="0 0 48 48"
xmlns="http://www.w3.org/2000/svg"
>
<IconBase
a11yLabel="Terra.navigation.side.menu.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>
Terra.navigation.side.menu.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="Terra.navigation.side.menu.document"
data-name="Layer 1"
viewBox="0 0 48 48"
xmlns="http://www.w3.org/2000/svg"
>
<IconBase
a11yLabel="Terra.navigation.side.menu.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>
Terra.navigation.side.menu.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="Terra.navigation.side.menu.document"
data-name="Layer 1"
viewBox="0 0 48 48"
xmlns="http://www.w3.org/2000/svg"
>
<IconBase
a11yLabel="Terra.navigation.side.menu.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>
Terra.navigation.side.menu.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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion packages/terra-navigation-side-menu/translations/de.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
{
"Terra.navigation.side.menu.selected": "Ausgewählt"
"Terra.navigation.side.menu.selected": "Ausgewählt",
"Terra.navigation.side.menu.folder": "Folder",
"Terra.navigation.side.menu.document": "Document"
}
4 changes: 3 additions & 1 deletion packages/terra-navigation-side-menu/translations/en-AU.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
{
"Terra.navigation.side.menu.selected": "Selected"
"Terra.navigation.side.menu.selected": "Selected",
"Terra.navigation.side.menu.folder": "Folder",
"Terra.navigation.side.menu.document": "Document"
}
4 changes: 3 additions & 1 deletion packages/terra-navigation-side-menu/translations/en-CA.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
{
"Terra.navigation.side.menu.selected": "Selected"
"Terra.navigation.side.menu.selected": "Selected",
"Terra.navigation.side.menu.folder": "Folder",
"Terra.navigation.side.menu.document": "Document"
}
4 changes: 3 additions & 1 deletion packages/terra-navigation-side-menu/translations/en-GB.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
{
"Terra.navigation.side.menu.selected": "Selected"
"Terra.navigation.side.menu.selected": "Selected",
"Terra.navigation.side.menu.folder": "Folder",
"Terra.navigation.side.menu.document": "Document"
}
4 changes: 3 additions & 1 deletion packages/terra-navigation-side-menu/translations/en-US.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
{
"Terra.navigation.side.menu.selected": "Selected"
"Terra.navigation.side.menu.selected": "Selected",
"Terra.navigation.side.menu.folder": "Folder",
"Terra.navigation.side.menu.document": "Document"
}
4 changes: 3 additions & 1 deletion packages/terra-navigation-side-menu/translations/en.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
{
"Terra.navigation.side.menu.selected": "Selected"
"Terra.navigation.side.menu.selected": "Selected",
"Terra.navigation.side.menu.folder": "Folder",
"Terra.navigation.side.menu.document": "Document"
}
4 changes: 3 additions & 1 deletion packages/terra-navigation-side-menu/translations/es-ES.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
{
"Terra.navigation.side.menu.selected": "Seleccionado"
"Terra.navigation.side.menu.selected": "Seleccionado",
"Terra.navigation.side.menu.folder": "Folder",
"Terra.navigation.side.menu.document": "Document"
MadanKumarGovindaswamy marked this conversation as resolved.
Show resolved Hide resolved
}
Loading
Loading