Bug/menu item missing aria labels #3417

blunteshwar · 2023-07-06T10:24:27Z

Description

Added aria-haspopup,aria-expanded and aria-controls to MenuItem with subitem.

Related issue(s)

Motivation and context

The following attributes { aria-expanded , aria-haspopup and aria-controls } did not exist for a MenuItem with subitem so I added them.

How has this been tested?

Uploading Screen Recording 2023-07-12 at 8.18.21 PM.mov…

Test case 1
1. Go here
2. Do this
Test case 2
1. Go here
2. Do this

Screenshots (if appropriate)

Types of changes

[ x] Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

[ x] I have signed the Adobe Open Source CLA.
[ x] My code follows the code style of this project.
[ x] If my change required a change to the documentation, I have updated the documentation in this pull request.
[ x] I have read the CONTRIBUTING document.
I have added tests to cover my changes.
[ x] All new and existing tests passed.
[ x] I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

github-actions · 2023-07-06T10:28:01Z

Branch Preview

Visual regression test results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

github-actions · 2023-07-06T10:44:09Z

Tachometer results

Chrome

action-menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	738 kB	228.52ms - 232.46ms	-	unsure 🔍 -3% - +0% -6.03ms - +0.33ms
branch	738 kB	230.84ms - 235.84ms	unsure 🔍 -0% - +3% -0.33ms - +6.03ms	-

menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	420 kB	309.90ms - 314.88ms	-	unsure 🔍 -1% - +2% -3.02ms - +5.31ms
branch	421 kB	307.92ms - 314.58ms	unsure 🔍 -2% - +1% -5.31ms - +3.02ms	-

picker permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	593 kB	769.91ms - 792.81ms	-	unsure 🔍 -3% - +1% -20.54ms - +10.78ms
branch	592 kB	775.56ms - 796.92ms	unsure 🔍 -1% - +3% -10.78ms - +20.54ms	-

split-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	671 kB	2047.68ms - 2051.05ms	-	unsure 🔍 -0% - +0% -1.63ms - +3.64ms
branch	670 kB	2046.34ms - 2050.39ms	unsure 🔍 -0% - +0% -3.64ms - +1.63ms	-

Firefox

action-menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	738 kB	403.32ms - 424.44ms	-	unsure 🔍 -6% - +1% -26.55ms - +6.39ms
branch	738 kB	411.32ms - 436.60ms	unsure 🔍 -2% - +6% -6.39ms - +26.55ms	-

menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	420 kB	560.01ms - 599.91ms	-	unsure 🔍 -4% - +4% -26.05ms - +23.09ms
branch	421 kB	567.10ms - 595.78ms	unsure 🔍 -4% - +4% -23.09ms - +26.05ms	-

picker permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	593 kB	1078.21ms - 1123.51ms	-	unsure 🔍 -2% - +3% -19.70ms - +34.46ms
branch	592 kB	1078.64ms - 1108.32ms	unsure 🔍 -3% - +2% -34.46ms - +19.70ms	-

split-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	671 kB	2179.27ms - 2196.37ms	-	unsure 🔍 -1% - +0% -12.03ms - +10.15ms
branch	670 kB	2181.69ms - 2195.83ms	unsure 🔍 -0% - +1% -10.15ms - +12.03ms	-

najikahalsema

How did you test this? Did you utilise the accessibility tree or screen reader?

packages/accordion/src/AccordionItem.ts

Westbrook

There’s a bunch of white space addition, was the intentional?

packages/menu/src/MenuItem.ts

blunteshwar · 2023-07-12T11:30:05Z

There’s a bunch of white space addition, was the intentional?

extra white spaces have been removed now

blunteshwar · 2023-07-12T14:51:28Z

How did you test this? Did you utilise the accessibility tree or screen reader?

I have used both screen reader and accessibility tree

Rajdeepc · 2023-07-18T05:35:14Z

packages/menu/src/MenuItem.ts

@@ -425,6 +430,11 @@ export class MenuItem extends LikeAnchor(Focusable) {
            this.handleSubmenuPointerenter
        );
        submenu.addEventListener('change', this.handleSubmenuChange);
+        if (!submenu.id) {
+            // if the consumer has already applied an ID to this element then we won't explicitly aplly ID


please remove the comments here!

Rajdeepc · 2023-07-18T05:35:33Z

packages/menu/src/Menu.ts

@@ -631,6 +631,7 @@ export class Menu extends SpectrumElement {
        }
        item.focused = this.hasVisibleFocusInTree();
        this.setAttribute('aria-activedescendant', item.id);
+


remove this white space

* fix(meter): added role meter progressbar in meter component (#3459) Co-authored-by: Rajdeep Chandra <[email protected]> * docs: updated swatch mixed documentations (#3455) Co-authored-by: Rajdeep Chandra <[email protected]> * fix(textfield): update focus state when [multiline][quiet] (#3452) * fix: menu item missing aria labels (#3417) * testing * fix(menu): menu-item with submenu lacks aria-haspopup and aria-expanded * fix(menu): added aria-expanded and aria-haspopup to menu-item * fix(menu): fixed the aria-controls attribute of menu-item * fix(menu): reviewed changes * fix(menu): reviewed changes-2 * fix(menu): removed the comment * fix(menu): removed white space * fix(menu): white space removed * chore: bump @web/test-runner from 0.16.1 to 0.17.0 Bumps [@web/test-runner](https://github.com/modernweb-dev/web/tree/HEAD/packages/test-runner) from 0.16.1 to 0.17.0. - [Release notes](https://github.com/modernweb-dev/web/releases) - [Changelog](https://github.com/modernweb-dev/web/blob/master/packages/test-runner/CHANGELOG.md) - [Commits](https://github.com/modernweb-dev/web/commits/@web/[email protected]/packages/test-runner) --- updated-dependencies: - dependency-name: "@web/test-runner" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> * chore: bump webpack-bundle-analyzer from 4.8.0 to 4.9.0 Bumps [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) from 4.8.0 to 4.9.0. - [Release notes](https://github.com/webpack-contrib/webpack-bundle-analyzer/releases) - [Changelog](https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/master/CHANGELOG.md) - [Commits](webpack-contrib/webpack-bundle-analyzer@v4.8.0...v4.9.0) --- updated-dependencies: - dependency-name: webpack-bundle-analyzer dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> * chore: bump netlify-cli from 12.12.0 to 15.9.0 Bumps [netlify-cli](https://github.com/netlify/cli) from 12.12.0 to 15.9.0. - [Release notes](https://github.com/netlify/cli/releases) - [Changelog](https://github.com/netlify/cli/blob/main/CHANGELOG.md) - [Commits](netlify/cli@v12.12.0...v15.9.0) --- updated-dependencies: - dependency-name: netlify-cli dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> * chore: bump husky from 8.0.2 to 8.0.3 Bumps [husky](https://github.com/typicode/husky) from 8.0.2 to 8.0.3. - [Release notes](https://github.com/typicode/husky/releases) - [Commits](typicode/husky@v8.0.2...v8.0.3) --- updated-dependencies: - dependency-name: husky dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> * chore: bump word-wrap from 1.2.3 to 1.2.4 Bumps [word-wrap](https://github.com/jonschlinkert/word-wrap) from 1.2.3 to 1.2.4. - [Release notes](https://github.com/jonschlinkert/word-wrap/releases) - [Commits](jonschlinkert/word-wrap@1.2.3...1.2.4) --- updated-dependencies: - dependency-name: word-wrap dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * chore: bump @types/react from 18.0.25 to 18.2.15 Bumps [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) from 18.0.25 to 18.2.15. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react) --- updated-dependencies: - dependency-name: "@types/react" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Rajdeep Chandra <[email protected]> Co-authored-by: Rajdeep Chandra <[email protected]> Co-authored-by: Piyush Vashisht <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

blunteshwar added 3 commits June 27, 2023 14:55

testing

927727e

fix(menu): menu-item with submenu lacks aria-haspopup and aria-expanded

e8a19e5

fix(menu): added aria-expanded and aria-haspopup to menu-item

e1e62c3

fix(menu): fixed the aria-controls attribute of menu-item

28ac685

blunteshwar marked this pull request as ready for review July 7, 2023 09:06

blunteshwar linked an issue Jul 7, 2023 that may be closed by this pull request

[Bug][a11y]: MenuItem with submenu lacks aria-haspopup and aria-expanded #3248

Closed

1 task

Rajdeepc requested review from najikahalsema, Westbrook and Rajdeepc July 10, 2023 07:19

najikahalsema requested changes Jul 10, 2023

View reviewed changes

packages/accordion/src/AccordionItem.ts Outdated Show resolved Hide resolved

Westbrook reviewed Jul 11, 2023

View reviewed changes

packages/menu/src/MenuItem.ts Outdated Show resolved Hide resolved

Rajdeepc requested changes Jul 12, 2023

View reviewed changes

packages/menu/src/MenuItem.ts Outdated Show resolved Hide resolved

fix(menu): reviewed changes

5c2318b

blunteshwar requested review from Rajdeepc, najikahalsema and Westbrook July 12, 2023 11:23

fix(menu): reviewed changes-2

f213ac8

Merge branch 'main' into bug/menu-item-missing-Aria-labels

f022787

Rajdeepc requested changes Jul 18, 2023

View reviewed changes

fix(menu): removed the comment

91c9a1b

blunteshwar requested a review from Rajdeepc July 18, 2023 06:41

Rajdeepc previously approved these changes Jul 18, 2023

View reviewed changes

fix(menu): removed white space

edb8ad2

blunteshwar dismissed Rajdeepc’s stale review via edb8ad2 July 18, 2023 08:45

fix(menu): white space removed

7a4ebd4

blunteshwar requested a review from Rajdeepc July 18, 2023 08:47

Rajdeepc approved these changes Jul 18, 2023

View reviewed changes

Merge branch 'main' into bug/menu-item-missing-Aria-labels

fadb8f0

najikahalsema approved these changes Jul 18, 2023

View reviewed changes

najikahalsema merged commit 0d04869 into main Jul 18, 2023

najikahalsema deleted the bug/menu-item-missing-Aria-labels branch July 18, 2023 18:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug/menu item missing aria labels #3417

Bug/menu item missing aria labels #3417

blunteshwar commented Jul 6, 2023 •

edited

Loading

github-actions bot commented Jul 6, 2023

github-actions bot commented Jul 6, 2023 •

edited

Loading

action-menu permalink

menu permalink

picker permalink

split-button permalink

action-menu permalink

menu permalink

picker permalink

split-button permalink

najikahalsema left a comment

Westbrook left a comment

blunteshwar commented Jul 12, 2023

blunteshwar commented Jul 12, 2023

Rajdeepc Jul 18, 2023

Rajdeepc Jul 18, 2023

Bug/menu item missing aria labels #3417

Bug/menu item missing aria labels #3417

Conversation

blunteshwar commented Jul 6, 2023 • edited Loading

Description

Related issue(s)

Motivation and context

How has this been tested?

Screenshots (if appropriate)

Types of changes

Checklist

Best practices

github-actions bot commented Jul 6, 2023

Branch Preview

github-actions bot commented Jul 6, 2023 • edited Loading

Tachometer results

action-menu permalink

menu permalink

picker permalink

split-button permalink

action-menu permalink

menu permalink

picker permalink

split-button permalink

najikahalsema left a comment

Choose a reason for hiding this comment

Westbrook left a comment

Choose a reason for hiding this comment

blunteshwar commented Jul 12, 2023

blunteshwar commented Jul 12, 2023

Rajdeepc Jul 18, 2023

Choose a reason for hiding this comment

Rajdeepc Jul 18, 2023

Choose a reason for hiding this comment

blunteshwar commented Jul 6, 2023 •

edited

Loading

github-actions bot commented Jul 6, 2023 •

edited

Loading