Created by: gerardkcohen
Initial commit for issue #13554 (closed)
At this point, I am only looking for peer review. I have never used bootstrap but I am familiar with accessibility so I wanted to be a good citizen and help out.
This pull request adds proper aria and keyboard management to the Tab component by implementing the following:
-
aria-controls
,aria-selected
, andtabindex
to tabs - keyboard navigation via arrows, and proper focus/ tab index management
-
aria-hidden
andaria-labelledby
on panels -
id
for tab added to example, as it is needed foraria-labelledby
Note: I did not add aria-expanded as it is not required for this pattern
I also included the addition of aria roles via JS in case they were left off in the markup. The only required role in the markup is the tablist
role that is added the ul
. I feel this will help overall accessibility by not burdening developers with needing to include or failing a11y if not/ incorrectly including. However, I did leave them in the examples in order to raise awareness/ education. I am not sure what the Bootstrap policy is about this.
If my approach is acceptable, I can continue with proper unit tests, documentation, etc.