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

Jump to bottom

Masthead :- Accessibility :- After expanding the Hamburger menu #3160

Closed
chetankan opened this issue Jul 15, 2020 · 0 comments
Closed

Masthead :- Accessibility :- After expanding the Hamburger menu #3160

chetankan opened this issue Jul 15, 2020 · 0 comments
Assignees
@asudoh
Labels
accessibility Has accessibility requirement bug Something isn't working dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package QA QA testing work performed by the testing team members severity 2 Affects major functionality, has a workaround
Milestone
Sprint 20-16

Comments

@chetankan
Copy link

chetankan commented Jul 15, 2020 •
edited
Loading

Issue Description :- Once we expand the hamburger menu visually there is close button and the options but screen reader is reading content which is not visually available.
For example IBM logo link, user profile and search all of IBM button in left and tight swipe.

Recommended Fix:- Screen reader should not read visually hidden components.

Happening on :- Voiceover ,iPhone

URL :
http://ibmdotcom-web-components-canary.mybluemix.net/?
@chetankan chetankan added accessibility Has accessibility requirement bug Something isn't working QA QA testing work performed by the testing team members severity 2 Affects major functionality, has a workaround labels Jul 15, 2020
@RobertaJHahn RobertaJHahn added dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package labels Jul 15, 2020
@RobertaJHahn RobertaJHahn added this to the Sprint 20-15 milestone Jul 15, 2020
@raphaelamadeu-zz raphaelamadeu-zz mentioned this issue Jul 24, 2020
Closed
asudoh added a commit to asudoh/carbon-custom-elements that referenced this issue Jul 27, 2020
@asudoh
fix(ui-shell): fix focus of hidden item
8eb1269 
This change ensures sub-menu items in UI shell won't get focus unless
it's expanded (visible).

Refs carbon-design-system/carbon-for-ibm-dotcom#3160.
@asudoh asudoh mentioned this issue Jul 27, 2020
Merged
asudoh added a commit to carbon-design-system/carbon-web-components that referenced this issue Jul 27, 2020
@asudoh
fix(ui-shell): fix focus of hidden item (#455)
11f3ee9 
This change ensures sub-menu items in UI shell won't get focus unless
it's expanded (visible).

Refs carbon-design-system/carbon-for-ibm-dotcom#3160.
@raphaelamadeu-zz raphaelamadeu-zz removed their assignment Jul 29, 2020
asudoh added a commit to asudoh/ibm-dotcom-library that referenced this issue Jul 30, 2020
@asudoh
feat(left-nav): support focus wrapping
7eefbdd 
This change implements focus-wrapping in left nav so that the keyboard
focus won't go out of left nav while it's open.

It's done in the following way:

* When `<dds-left-nav>` detects that the focus goes out of the element,
  it focuses on `<dds-masthead-menu-button>`.
* When `<dds-masthead-menu-button>` detects that the focus goes out of
  the element, it fires `dds-masthead-menu-button-request-focus-wrap`
  event with the information of if the user gesture was back-tab or
  forward-tab. `<dds-left-nav>` listens to the event to set the
  keyboard focus on the correct nav item.

This change also ensures that non-expanded top/left nav items are
non-keyboard-focusable, partly upgrading `carbon-custom-elements` to
`v1.2.0`.

Refs carbon-design-system#3160.
@asudoh asudoh mentioned this issue Jul 30, 2020
Merged
kodiakhq bot pushed a commit that referenced this issue Aug 4, 2020
@asudoh
feat(left-nav): support focus wrapping (#3348)
8414000 
### Related Ticket(s)

Refs #3160.

### Description

This change implements focus-wrapping in left nav so that the keyboard focus won't go out of left nav while it's open.

It's done in the following way:

* When `<dds-left-nav>` detects that the focus goes out of the element, it focuses on `<dds-masthead-menu-button>`.
* When `<dds-masthead-menu-button>` detects that the focus goes out of the element, it fires `dds-masthead-menu-button-request-focus-wrap` event with the information of if the user gesture was back-tab or forward-tab. `<dds-left-nav>` listens to the event to set the keyboard focus on the correct nav item.

This change also ensures that non-expanded top/left nav items are non-keyboard-focusable, partly upgrading `carbon-custom-elements` to `v1.2.0`.

### Changelog

**New**

- Code in `<dds-left-nav>` to focus on `<dds-masthead-menu-button>` when the keyboard focus goes out of `<dds-left-nav>`.
- `dds-masthead-menu-button-request-focus-wrap` event on `<dds-masthead-menu-button>` that is fined when the focus was lost,

**Changed**

- Fix to sub-nav items in top/left navs in masthead so it's not keyboard focusable unless it's expanded. It includes upgrading `carbon-custom-elements` to `v1.2.0`.
@RobertaJHahn RobertaJHahn mentioned this issue Aug 25, 2020
Closed
kennylam pushed a commit to kennylam/carbon-for-ibm-dotcom that referenced this issue Mar 16, 2022
@asudoh
fix(ui-shell): fix focus of hidden item (carbon-design-system#455)
0e430f3 
This change ensures sub-menu items in UI shell won't get focus unless
it's expanded (visible).

Refs carbon-design-system#3160.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@asudoh asudoh

Labels
accessibility Has accessibility requirement bug Something isn't working dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package QA QA testing work performed by the testing team members severity 2 Affects major functionality, has a workaround
Projects
None yet
Milestone
Sprint 20-16
Development

No branches or pull requests
7 participants
@asudoh @jeffchew @ljcarot @raphaelamadeu-zz @RobertaJHahn @larahanlon2 @chetankan