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.

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

Incorrect role is being assigned to combo box; it is impacting accessibility of the control. #2089

Open
Kirank915 opened this issue Mar 28, 2024 · 1 comment

Comments

@Kirank915
Copy link

User Experience:
Visually impaired people who use screen reader will not be able to know the purpose of control if the incorrect role is defined as textbox for control.

Note:
User credentials should NOT be included in the bug.

Repro Steps:

  1. Open URL: aka.ms/ipamui and login with valid credentials.
  2. Home page appears
  3. Navigate to search field on top header and search Ip address "100.80.0.0/15" and navigate to "Request details" tab.
  4. Navigate all controls under the "Request details" page and navigate to table and select "Ip Address link".
  5. Navigate all controls on main page and navigate to header controls and select "IPV6" and navigate all controls under "IPV6" and select "Edit" button on table.
  6. Navigate to all controls under "Edit allocation" dialog like "ID and prefix."
  7. Verify the issue.

Actual Result:
Incorrect role as textbox is defined for the "Reuse scope, tag name, tag value" controls present on the "edit allocation dialog. Screen reader is announcing the information as "Reuse scope none dash edit".

Expected Result:
Correct role as "combo box" should be defined for the "Reuse scope, tag name, tag value" controls present on the "edit allocation dialog. Screen reader should announce the information as "Reuse scope combo box collapsed/expanded".

@Kirank915
Copy link
Author

Please find below comments from the IP Address Management Engineering product team:

We use a 3rd-party JS library 'JQuery.Selectize' to render all boxes to combo boxes. In our code, we just need to declare a HTML element in the page and call selectize() method in the JS. The library will do all the magic things for us. See:

image

So, coming to the IPAM web site, the original select box will be covered by the combo box that generated by the library. For instance
Although I have set the select's role to "combobox", because the library-generated elements will cover it. The screen reader cannot hit it.
Meanwhile, we cannot assign the role to the JQuery.Selectize either as it doesn't provide this API.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant