Added tests to check for aria labels and roles for accessibility #15137
Conversation
|
Thanks for making a pull request to jupyterlab! |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
m158261
changed the title
m158261
changed the title
m158261
changed the title
| 'notebook actions' | ||
| ); | ||
| expect(widget.toolbar.node.getAttribute('role')).toEqual('navigation'); | ||
| }); | ||
|
|
||
| it('content should have an aria-label of notebook content and a role of region', () => { | ||
| const content = new Widget(); | ||
| const widget = new MainAreaWidget({ content }); | ||
| expect(widget.content.node.getAttribute('aria-label')).toEqual( | ||
| 'notebook content' |
There was a problem hiding this comment.
This test demonstrated incorrect behaviour (not every main area widget is a notebook, for example a text editor is not a notebook, csv viewer is not a notebook etc), see #13045. I am not sure what the default for a main area widget should be but my expectation is that it would not be "notebook". Also, is the toolbar really navigation? Shouldn't it be a toolbar role?
There was a problem hiding this comment.
I can change the navigation role to toolbar. As the notebook content label still has an outstanding issue, I could either remove the test or leave it to be updated when that issue is worked on?
There was a problem hiding this comment.
Let's keep the test, but:
- mark it with
test.failingas xfail for now - add a comment on the test pointing to issue
- once this PR is merged, comment on the issue that there is now a test.
| @@ -46,7 +46,7 @@ export class MainAreaWidget<T extends Widget = Widget> | |||
| content.node.setAttribute('role', 'region'); | |||
| content.node.setAttribute('aria-label', trans.__('notebook content')); | |||
| const toolbar = (this._toolbar = options.toolbar || new ReactiveToolbar()); | |||
| toolbar.node.setAttribute('role', 'navigation'); | |||
| toolbar.node.setAttribute('role', 'toolbar'); | |||
There was a problem hiding this comment.
For context, the toolbar role is expected to have arrow key navigation (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role) which is being implemented in #15021.
References
Related PR - #9622
Code changes
Added tests to check aria labels and roles are present for users with screen readers. There a mostly around sidebar widgets. Some of the tests are run in Galata due to restrictions with rendering extension packages.
User-facing changes
None
Backwards-incompatible changes
None