Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(OverflowMenu): ariaLabel to aria-label (NEW) #13280

Merged
merged 7 commits into from
Mar 9, 2023
Merged

refactor(OverflowMenu): ariaLabel to aria-label (NEW) #13280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
229a5a4
fix(CodeSnippet): a11y tabstop + attributes
jsehull Mar 8, 2023
43393cb
fix(CSS): add Carbon CSS to focus outline
jsehull Mar 8, 2023
edff627
refactor(OverflowMenu): ariaLabel to aria-label NEW
jsehull Mar 2, 2023
27f30d0
Delete CodeSnippet.js
jsehull Mar 9, 2023
b6fcb8c
Delete _code-snippet.scss
jsehull Mar 9, 2023
6e9173c
revert(missingFiles): they'll be ignored on merge
jsehull Mar 9, 2023
e766c56
Merge branch 'main' into 12802/new-overflowmenu
kodiakhq[bot] Mar 9, 2023
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
2 changes: 1 addition & 1 deletion packages/react/src/components/Breadcrumb/Breadcrumb.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export const BreadcrumbWithOverflowMenu = () => (
</BreadcrumbItem>
<BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
<BreadcrumbItem data-floating-menu-container>
<OverflowMenu ariaLabel="Overflow menu in a breadcrumb">
<OverflowMenu aria-label="Overflow menu in a breadcrumb">
<OverflowMenuItem itemText="Breadcrumb 3" />
<OverflowMenuItem itemText="Breadcrumb 4" />
</OverflowMenu>
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/DataTable/TableToolbarMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const TableToolbarMenu: React.FC<TableToolbarMenuProps> = ({
);
return (
<OverflowMenu
ariaLabel={iconDescription}
aria-label={iconDescription}
renderIcon={renderIcon}
className={toolbarActionClasses}
title={iconDescription}
Expand Down
20 changes: 10 additions & 10 deletions packages/react/src/components/OverflowMenu/OverflowMenu-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ describe('OverflowMenu', () => {
describe('Renders as expected', () => {
it('should support a custom `className` prop on the button element', () => {
const { container } = render(
<OverflowMenu open ariaLabel="Overflow menu" className="extra-class">
<OverflowMenu open aria-label="Overflow menu" className="extra-class">
<OverflowMenuItem className="test-child" itemText="one" />
<OverflowMenuItem className="test-child" itemText="two" />
</OverflowMenu>
Expand All @@ -30,7 +30,7 @@ describe('OverflowMenu', () => {
const { container } = render(
<OverflowMenu
data-testid="test"
ariaLabel="Overflow menu"
aria-label="Overflow menu"
className="extra-class">
<OverflowMenuItem className="test-child" itemText="one" />
<OverflowMenuItem className="test-child" itemText="two" />
Expand All @@ -45,7 +45,7 @@ describe('OverflowMenu', () => {
render(
<OverflowMenu
flipped={true}
ariaLabel="Overflow menu"
aria-label="Overflow menu"
className="extra-class">
<OverflowMenuItem className="test-child" itemText="one" />
<OverflowMenuItem className="test-child" itemText="two" />
Expand All @@ -63,7 +63,7 @@ describe('OverflowMenu', () => {
const onClick = jest.fn();
render(
<OverflowMenu
ariaLabel="Overflow menu"
aria-label="Overflow menu"
className="extra-class"
onClick={onClick}>
<OverflowMenuItem className="test-child" itemText="one" />
Expand All @@ -79,7 +79,7 @@ describe('OverflowMenu', () => {
const onClose = jest.fn();
render(
<OverflowMenu
ariaLabel="Overflow menu"
aria-label="Overflow menu"
className="extra-class"
onClose={onClose}>
<OverflowMenuItem className="test-child" itemText="one" />
Expand All @@ -96,7 +96,7 @@ describe('OverflowMenu', () => {
const onFocus = jest.fn();
render(
<OverflowMenu
ariaLabel="Overflow menu"
aria-label="Overflow menu"
className="extra-class"
onFocus={onFocus}>
<OverflowMenuItem className="test-child" itemText="one" />
Expand All @@ -110,7 +110,7 @@ describe('OverflowMenu', () => {

it('should render open if open is true', () => {
render(
<OverflowMenu open ariaLabel="Overflow menu" className="extra-class">
<OverflowMenu open aria-label="Overflow menu" className="extra-class">
<OverflowMenuItem className="test-child" itemText="one" />
<OverflowMenuItem className="test-child" itemText="two" />
</OverflowMenu>
Expand All @@ -125,7 +125,7 @@ describe('OverflowMenu', () => {
it('should render icon from renderIcon', () => {
render(
<OverflowMenu
ariaLabel="Overflow menu"
aria-label="Overflow menu"
className="extra-class"
renderIcon={() => <Filter aria-label="filter icon" />}>
<OverflowMenuItem className="test-child" itemText="one" />
Expand All @@ -143,7 +143,7 @@ describe('OverflowMenu', () => {
render(
<OverflowMenu
open
ariaLabel="Overflow menu"
aria-label="Overflow menu"
className="extra-class"
size="lg">
<OverflowMenuItem className="test-child" itemText="one" />
Expand All @@ -156,7 +156,7 @@ describe('OverflowMenu', () => {

it('should open on click', () => {
render(
<OverflowMenu ariaLabel="Overflow menu" className="extra-class">
<OverflowMenu aria-label="Overflow menu" className="extra-class">
<OverflowMenuItem className="test-child" itemText="one" />
<OverflowMenuItem className="test-child" itemText="two" />
</OverflowMenu>
Expand Down
20 changes: 15 additions & 5 deletions packages/react/src/components/OverflowMenu/OverflowMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,18 @@ class OverflowMenu extends Component {

static propTypes = {
/**
* The ARIA label.
* Specify a label to be read by screen readers on the container node
*/
ariaLabel: PropTypes.string.isRequired,
['aria-label']: PropTypes.string,

/**
* Deprecated, please use `aria-label` instead.
* Specify a label to be read by screen readers on the container note.
*/
ariaLabel: deprecate(
PropTypes.string,
'This prop syntax has been deprecated. Please use the new `aria-label`.'
),

/**
* The child nodes.
Expand Down Expand Up @@ -227,7 +236,7 @@ class OverflowMenu extends Component {
static contextType = PrefixContext;

static defaultProps = {
ariaLabel: null,
['aria-label']: null,
iconDescription: 'Options',
open: false,
direction: DIRECTION_BOTTOM,
Expand Down Expand Up @@ -458,7 +467,8 @@ class OverflowMenu extends Component {
const prefix = this.context;
const {
id,
ariaLabel,
['aria-label']: ariaLabel,
ariaLabel: deprecatedAriaLabel,
children,
iconDescription,
direction,
Expand Down Expand Up @@ -524,7 +534,7 @@ class OverflowMenu extends Component {
className={overflowMenuOptionsClasses}
tabIndex="-1"
role="menu"
aria-label={ariaLabel}
aria-label={ariaLabel || deprecatedAriaLabel}
onKeyDown={this.handleKeyPress}>
{childrenWithProps}
</ul>
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/OverflowMenu/OverflowMenu.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ The `OverflowMenu` uses an `IconButton` under the hood, which means it can accep
To modify the tooltip's alignment, you may make use of the `align` property as described in the `IconButton` props:

```jsx
<OverflowMenu ariaLabel="overflow-menu" align="bottom">
<OverflowMenu aria-label="overflow-menu" align="bottom">
<OverflowMenuItem itemText="Stop app" />
<OverflowMenuItem itemText="Restart app" />
<OverflowMenuItem itemText="Rename app" />
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/OverflowMenu/OverflowMenu.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default {
};

export const Default = () => (
<OverflowMenu ariaLabel="overflow-menu">
<OverflowMenu aria-label="overflow-menu">
<OverflowMenuItem itemText="Stop app" />
<OverflowMenuItem itemText="Restart app" />
<OverflowMenuItem itemText="Rename app" />
Expand All @@ -43,7 +43,7 @@ export const RenderCustomIcon = () => (
);

export const Playground = (args) => (
<OverflowMenu ariaLabel="overflow-menu" {...args}>
<OverflowMenu aria-label="overflow-menu" {...args}>
<OverflowMenuItem itemText="Stop app" />
<OverflowMenuItem itemText="Restart app" />
<OverflowMenuItem itemText="Rename app" />
Expand Down