-
Notifications
You must be signed in to change notification settings - Fork 2.5k
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
Add Accessibility API #10961
Add Accessibility API #10961
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking like a good start already :) I was planning on doing some work on a11y as well, but the less for me to do there the better 👍
I have some minor code suggestions, in addition to what I already said regarding the proposed API stuff (see comment). I haven't tested the changes yet, will do so later this week.
packages/plugin-ext/src/main/browser/status-bar-message-registry-main.ts
Outdated
Show resolved
Hide resolved
packages/plugin-ext/src/main/browser/status-bar-message-registry-main.ts
Outdated
Show resolved
Hide resolved
c38e015
to
34cc6f4
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@sgraband it seems as though the ariaLabel
is not respected when a plugin defines it when creating the StatusBarItem
. It always ends up using the tooltip for such a case.
You can confirm with status-item-0.0.1.zip, I create the item like so (when triggering the StatusBar Item: Create
command):
let disposable = vscode.commands.registerCommand('status-item.create', () => {
const item = vscode.window.createStatusBarItem();
item.name = 'Test Item';
item.text = 'Test Text';
item.accessibilityInformation = { label: 'Test Label', role: 'button' };
item.show();
});
The same is also true for role
.
@sgraband I have the following commit that handles the I also confirmed it works with different use-cases using status-item-0.0.1.zip |
Good catch and thank you for the commit @vince-fugnitto! I also tested it with the extension you provided and everything seems to work like intended now. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'll let @msujew complete the review since part of the changes are from the commit I proposed 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
- Tree elements display the correct accessibility information
- Status items display the correct accessibility information
Add AccessibilityInformation interface. Add optional accessibilityInformation to StatusBarItem and TreeItem. Proposed API: Add StatusBarItemOptions (containing accessibilityInformation). Provide window.createStatusBarItem(StatusBarItemOptions). Update createStatusBarItem handler to handle StatusBarItems. Contributed on behalf of STMicroelectronics.
Contributed on behalf of STMicroelectronics.
Contributed on behalf of STMicroelectronics Co-authored-by: vince-fugnitto <[email protected]>
Contributed on behalf of STMicroelectronics
And add accessibility type to common package. Contributed on behalf of STMicroelectronics.
Thanks for the review @msujew. I added two |
What it does
Add AccessibilityInformation interface.
Add optional accessibilityInformation to StatusBarItem and TreeItem.
Also added the type to TimelineItem, but will create a follow-up ticket for loading the information into the DOM.
Proposed API:
Add StatusBarItemOptions (containing accessibilityInformation).
Provide window.createStatusBarItem(StatusBarItemOptions).
Update createStatusBarItem handler to handle StatusBarItems.
Added aria-labels for default StatusBarItems.
Resolves #9965.
Contributed on behalf of STMicroelectronics.
How to test
StatusBarItems:
Check one of the
StatusBarItems
, like theToggle Bottom Panel
, in the Accessibilty tab of the Chrome DevTools. Thearia-label
should be recognized correctly.TreeItems:
To simplify the testing the tree-view-sample vscode-extension could be used. Just add:
here. And add the extension to Theia. The jsonOutline view tree should then also display the correct label and role.
Review checklist
Reminder for reviewers