Add aria-selected attribute to record tabs for accessibility.

[ghost]

No description provided.

[demiankatz]

@aidaluuppala, I haven't studied this in great depth, so it's entirely possible that you've already thought about this and your approach is the most efficient way... but just to brainstorm a possible alternative: there is already a lot of logic in the code to add and remove the "active" class from tabs. Might it be more streamlined if you abstracted this into "activateTab / deactivateTab" functions and then incorporated the aria-selected logic into those functions? If I'm understanding correctly, the process of activating and deactivating tabs is directly linked to the need for aria-selected, so I'm wondering if it would be more clear to treat those as two steps of the same function rather than handling the two operations independently of one another.

What do you think? (And my apologies if I'm thinking about this incorrectly!) :-)

[ghost]

@demiankatz thank you and good point, I'll try and incorporate this with the active class logic.

[ghost]

@demiankatz It seems that the logic of active class is in the bootstrap library, but now there is an event listener that is listening to tab shown event, so it should be a bit more streamlined.

[demiankatz]

Thanks, @aidaluuppala, this is much simpler and easier to understand! :-) I'm asking @crhallberg to give it a review as well since he's more familiar with our UI code and might have some suggestions that I overlooked. Once he approves, I think it's ready to merge. Since I'll be away for the next two weeks, he's welcome to hit the merge button in my absence if he's happy with everything.

[crhallberg]

Thank you for your patience!

[demiankatz]

Thanks, @aidaluuppala!