First steps towards improving the accessibility of the PersonaBar.

[OllyHodgson]

Summary

First attempt at fixing #32 and #34:

• Adds aria-haspopup and aria-expanded attributes to relevant icons in the main PersonaBar.
• When menus become visible, set aria-expanded to true (and back to false when they're hidden)
• Add alt text to the icons - via a <title> element when it's an SVG

Release Note: First steps towards improving the accessibility of the PersonaBar.

Testing Steps: Compare before and after using the accessibility pane in Firefox's developer tools. Would also be a good idea to get some help from someone using assistive technology.

This is my first pull request on DNN, so be gentle ;-)

[mitchelsellers]

@OllyHodgson At first review, this looks like a good fix. I'll review in more detail later

[Cambridgeport90]

I am keeping an eye on this one. We have some members aside from myself using assistive tech in the @stormlighttech organization, so I'll see what we can do as well ... it's time we got involved in more projects anyways! Thanks again for this. Remember, anyone can get a free screen reader. go to NVDA.

[mitchelsellers]

These changes look good and do not impact the usability of the site for people. Lets get this approved if we can.

[Cambridgeport90]

Nice work, guys. I'm now wondering how I can add these changes into my existing site. I unfortunately don't have two environments at the moment, so, I'll need the next alternative, if you have one. Thanks.

[OllyHodgson]

@mitchelsellers I haven't signed the CLA yet - and the automagical integration doesn't seem to exist in this repo.

[OllyHodgson]

@Cambridgeport90 The 3 files I modified live under /DesktopModules/Admin/Dnn.PersonaBar. If you're using 9.2.1 you could simply copy the patched files from this pull request over the top of the existing ones.

Assuming it's an accessible tool, http://www.nvquicksite.com/ can set up fresh instances of DNN on your PC super quickly and easily.

[Cambridgeport90]

Thanks again, guys. Sent from Nine<http://www.9folders.com/>

…

________________________________ From: Olly Hodgson <notifications@github.com> Sent: Monday, August 20, 2018 05:59 To: dnnsoftware/Dnn.AdminExperience Cc: Katherine M. Moss; Manual Subject: Re: [dnnsoftware/Dnn.AdminExperience] First steps towards improving the accessibility of the PersonaBar. (#36) @mitchelsellers<https://github.com/mitchelsellers> I haven't signed the CLA yet - and the automagical integration doesn't seem to exist in this repo. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<#36 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AOXGAJDX1x0CEXvLXZpQkCZ43ZW79n3Oks5uSoiNgaJpZM4WAMaW>.

[Cambridgeport90]

Thanks! I’m going to do that when I get off work today, I think. And thanks for reminding me about the DNnQuickSite tool I had forgotten it existed. I’ve never used it, though I think I might in future. From: Olly Hodgson <notifications@github.com> Sent: Monday, August 20, 2018 6:04 AM To: dnnsoftware/Dnn.AdminExperience <Dnn.AdminExperience@noreply.github.com> Cc: Katherine M. Moss <KMoss@winterhillsolutions.com>; Mention <mention@noreply.github.com> Subject: Re: [dnnsoftware/Dnn.AdminExperience] First steps towards improving the accessibility of the PersonaBar. (#36) @Cambridgeport90<https://github.com/Cambridgeport90> The 3 files I modified live under /DesktopModules/Admin/Dnn.PersonaBar. If you're using 9.2.1 you could simply copy the patched files from this pull request over the top of the existing ones. Assuming it's an accessible tool, http://www.nvquicksite.com/ can set up fresh instances of DNN on your PC super quickly and easily. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#36 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AOXGAMBwj1mBhxc11g8M8QVpbHOUZwxkks5uSomXgaJpZM4WAMaW>.

[dnfclas]

All CLA requirements met.

[ohine]

@OllyHodgson Are you still working on more items to bundle in this pull request? Or should we merge it as it stands?

[OllyHodgson]

@ohine This one is good to go (unless any bugs are found). I can file more PRs for further work as time permits.

(do I need to do anything more? I'm new to this githubbing thing!)

[mitchelsellers]

@OllyHodgson We will go ahead and merge this one in, you can for sure submit additional items. Future PR's will be approved/processed faster since we will not have the issue with the CLA agreement that we had this time.

We greatly appreciate your contributions to this effort!

[ashishpd]

I am wondering how I can test this.. Are there any instructions on what to look for in the Firefox Accessibility tool?

[Cambridgeport90]

What exactly do you need to test? I can help there, I hope. From: Ash Prasad <notifications@github.com> Sent: Friday, April 12, 2019 6:57 PM To: dnnsoftware/Dnn.AdminExperience <Dnn.AdminExperience@noreply.github.com> Cc: Katherine M. Moss <KMoss@WinterHillSolutions.com>; Mention <mention@noreply.github.com> Subject: Re: [dnnsoftware/Dnn.AdminExperience] First steps towards improving the accessibility of the PersonaBar. (#36) I am wondering how I can test this.. Are there any instructions on what to look for in the Firefox Accessibility tool? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#36 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AOXGAJlkgFyFPT-lFe96UjXLM_3mOD8dks5vgQ87gaJpZM4WAMaW>.

[OllyHodgson]

@ashishpd Using the Firefox accessibility dev tools you should be able to see after this patch that the main menu items in the PersonaBar now have text labels! Before, they did not, so they were effectively invisible to assistive tech.

You could also install/enable NVDA, ChromeVox or VoiceOver (dependent on your platform) and listen to the PersonaBar being read aloud. I seem to remember NVDA can also show you the text being read out.

Sorry I can't be much more specific - I've moved jobs (and to another continent!) and don't have access to a Windows machine or DNN install right now.

[ashishpd]

Thanks @OllyHodgson and @Cambridgeport90 for getting back. Here's a video where I've tried to explain the update: https://www.youtube.com/watch?v=xjZa8PQ8qiE&list=PLIx1M8IdVvqafFiDozHCf79woQEuT2ko3&index=4

Hopefully, it aligns with what you did here.

[Cambridgeport90]

You’re quite welcome. I’ll be watching the video later on when I’m not at work (streaming is no longer allowed), and if I see anything else that was missed, I’ll send it through as feedback. From: Ash Prasad <notifications@github.com> Sent: Monday, April 22, 2019 10:07 AM To: dnnsoftware/Dnn.AdminExperience <Dnn.AdminExperience@noreply.github.com> Cc: Katherine M. Moss <KMoss@WinterHillSolutions.com>; Mention <mention@noreply.github.com> Subject: Re: [dnnsoftware/Dnn.AdminExperience] First steps towards improving the accessibility of the PersonaBar. (#36) Thanks @OllyHodgson<https://github.com/OllyHodgson> and @Cambridgeport90<https://github.com/Cambridgeport90> for getting back. Here's a video where I've tried to explain the update: https://www.youtube.com/watch?v=xjZa8PQ8qiE&list=PLIx1M8IdVvqafFiDozHCf79woQEuT2ko3&index=4 Hopefully, it aligns with what you did here. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#36 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ADS4MAAT4HEXKPLB44IVVXLPRXA7LANCNFSM4FQAY2LA>.

[valadas]

Good job, I will also be improving the common components as I touch them to make them accessible. Keyboard navigation is still an issue but we will keep working on that.

[Cambridgeport90]

I’ll continue keeping a hazel eye out, and if there’s anything else you need me to do in the meantime, shoot me a mention. From: Daniel Valadas <notifications@github.com> Sent: Monday, April 22, 2019 6:10 PM To: dnnsoftware/Dnn.AdminExperience <Dnn.AdminExperience@noreply.github.com> Cc: Katherine M. Moss <KMoss@WinterHillSolutions.com>; Mention <mention@noreply.github.com> Subject: Re: [dnnsoftware/Dnn.AdminExperience] First steps towards improving the accessibility of the PersonaBar. (#36) Good job, I will also be improving the common components as I touch them to make them accessible. Keyboard navigation is still an issue but we will keep working on that. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#36 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ADS4MAB7STX2ZQJX3OZXOHDPRYZS3ANCNFSM4FQAY2LA>.