update chat and people tab roles#1770
Conversation
dmceachernmsft
requested review from
JamesBurnside,
PorterNan,
alkwa-msft,
anjulgarg,
carocao-msft,
edwardlee-msft,
mgamis-msft,
prabhjot-msft and
prprabhu-ms
as code owners
| onClick={props.onChatButtonClicked} | ||
| styles={mobilePaneButtonStylesThemed} | ||
| checked={props.activeTab === 'chat'} | ||
| role={'tab'} |
There was a problem hiding this comment.
Not sure if really necessary, but the documentation says tabs should be inside a parent that has tablist role, then have an id such that the tab contents have labelledby="<that tab id>"
so would be something like
const chatTabId = useId() // from fluent
const peopleTabId = useId()
<Stack.Item grow role="tablist" aria-label="<something>">
<DefaultButton role="tab" id={chatTabId}>Chat</>
<DefaultButton role="tab" id={peopleTabId}>People</>
</Stack>
...
<ChatPane role="tabpanel" labelledby={chatTabId} />
<PeoplePane role="tabpanel" labelledby={peopleTabId} />
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
But I'm happy to forgo for now and let a11y team file an issue if its needed if everything works as expected with the current implementation
There was a problem hiding this comment.
it behaves as expected but I agree I should look at this. will make a update shortly
There was a problem hiding this comment.
We chatted offline about this and the tablist is making the button labels be read out twice so this will not be changed in this PR. We can look into re-adding this again if the a11y team flags it as necessary
3 participants
What
Update chat and people roles to be
taboverbutton.Why
Helps with narration so that the screen readers and talk backs on devices announce 'tab' instead of 'button'
https://skype.visualstudio.com/SPOOL/_workitems/edit/2790210
How Tested
Ran windows narrator on windows and 'talkback' on android to verify the change.