install ngAria

[Matthew-Wise]

Another one for accessibility 😸 ngAria makes angular more aria aware meaning things like ng-required aren't needed instead we can just use required. It should also improve the use of ngShow/Hide.

@RachBreeze has tested this with the login in order to make sure it's working as intended.

Thanks
Matt

[RachBreeze]

Hi @sebastian-claesson and @Matthew-Wise
I like this PR a lot, it solves an issue around the "required" attribute not firing alerts to the screen reader correctly. In the current site we've tabbed into required textboxes and the screen reader has said they are invalid, before a user has entered anything. This PR only sets the state as invalid on the form submit, so the user of a screen reader only hears invalid when they tab into an empty required textbox post form submit.

Once it's been accepted there are some things that can be tided up in the back end (where I've added aria-required and an aria-invalid test)

[BatJan]

@nul800sebastiaan A little more background information about the module @Matthew-Wise have added can be found here https://docs.angularjs.org/api/ngAria - In short it "should" be "plug'n'play". Only concern I have about this is that some of the attributes it will set augomagically might already have been set manually by contributers. I know I've seen @kjac add some aria-disabled attributes in some PR's for instance 😃

So perhaps the manually added should be removed before this PR is merged.

Maybe we should discuss this at the UK hackathon in November if HQ needs some more clarification about the effect of this PR maybe?

[nul800sebastiaan]

Thanks @Matthew-Wise - unfortunately I am having some trouble loading it, I've done an npm i and the files seem to be copied over after a gulp build but my browser doesn't seem to like it:

Uncaught Error: [$injector:modulerr] Failed to instantiate module umbraco due to:
Error: [$injector:modulerr] Failed to instantiate module ngAria due to:
Error: [$injector:nomod] Module 'ngAria' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

https://errors.angularjs.org/1.7.5/$injector/modulerr?p0=umbraco&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20Failed%20to%20instantiate%20module%20ngAria%20due%20to%3A%0AError%3A%20%5B%24injector%3Anomod%5D%20Module%20'ngAria'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0A%0Ahttps%3A%2F%2Ferrors.angularjs.org%2F1.7.5%2F%24injector%2Fmodulerr%3Fp0%3DngAria%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520Module%2520'ngAria'%2520is%2520not%2520available!%2520You%2520either%2520misspelled%2520the%2520module%2520name%2520or%2520forgot%2520to%2520load%2520it.%2520If%2520registering%2520a%2520module%2520ensure%2520that%2520you%2520specify%2520the%2520dependencies%2520as%2520the%2520second%2520argument.%250Ahttps%253A%252F%252Ferrors.angularjs.org%252F1.7.5%252F%2524injector%252Fnomod%253Fp0%253DngAria%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8300%252Fumbraco%252Flib%252Fangular%252Fangular.js%253Fcdv%253D1928020205%253A138%253A12%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8300%252Fumbraco%252Flib%252Fangular%252Fangular.js%253Fcdv%253D1928020205%253A2290%253A17%250A%2520%2520%2520%2520at%2520ensure%2520(http%253A%252F%252Flocalhost%253A8300%252Fumbraco%252Flib%252Fangular%252Fangular.js%253Fcdv%253D1928020205%253A2211%253A38)%250A%2520%2520%2520%2520at%2520module%2520(http%253A%252F%252Flocalhost%253A8300%252Fumbraco%252Flib%252Fangular%252Fangular.js%253Fcdv%253D1928020205%253A2288%253A14)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8300%252Fumbraco%252Flib%252Fangular%252Fangular.js%253Fcdv%253D1928020205%253A5017%253A22%250A%2520%2520%2520%2520at%2520forEach%2520(http%253A%252F%252Flocalhost%253A8300%252Fumbraco%252Flib%252Fangular%252Fangular.js%253Fcdv%253D1928020205%253A387%253A20)%250A%2520%2520%2520%2520at%2520loadModules%2520(http%253A%252F%252Flocalhost%253A8300%252Fumbraco%252Flib%252Fangular%252Fangular.js%253Fcdv%253D1928020205%253A5001%253A5)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8300%252Fumbraco%252Flib%252Fangular%252Fangular.js%253Fcdv%253D1928020205%253A5019%253A40%250A%2520%2520%2520%2520at%2520forEach%2520(http%253A%252F%252Flocalhost%253A8300%252Fumbraco%252Flib%252Fangular%252Fangular.js%253Fcdv%253D1928020205%253A387%253A20)%250A%2520%2520%2520%2520at%2520loadModules%2520(http%253A%252F%252Flocalhost%253A8300%252Fumbraco%252Flib%252Fangular%252Fangular.js%253Fcdv%253D1928020205%253A5001%253A5)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8300%2Fumbraco%2Flib%2Fangular%2Fangular.js%3Fcdv%3D1928020205%3A138%3A12%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8300%2Fumbraco%2Flib%2Fangular%2Fangular.js%3Fcdv%3D1928020205%3A5041%3A15%0A%20%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A8300%2Fumbraco%2Flib%2Fangular%2Fangular.js%3Fcdv%3D1928020205%3A387%3A20)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A8300%2Fumbraco%2Flib%2Fangular%2Fangular.js%3Fcdv%3D1928020205%3A5001%3A5)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8300%2Fumbraco%2Flib%2Fangular%2Fangular.js%3Fcdv%3D1928020205%3A5019%3A40%0A%20%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A8300%2Fumbraco%2Flib%2Fangular%2Fangular.js%3Fcdv%3D1928020205%3A387%3A20)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A8300%2Fumbraco%2Flib%2Fangular%2Fangular.js%3Fcdv%3D1928020205%3A5001%3A5)%0A%20%20%20%20at%20createInjector%20(http%3A%2F%2Flocalhost%3A8300%2Fumbraco%2Flib%2Fangular%2Fangular.js%3Fcdv%3D1928020205%3A4918%3A19)%0A%20%20%20%20at%20doBootstrap%20(http%3A%2F%2Flocalhost%3A8300%2Fumbraco%2Flib%2Fangular%2Fangular.js%3Fcdv%3D1928020205%3A1942%3A20)%0A%20%20%20%20at%20Object.bootstrap%20(http%3A%2F%2Flocalhost%3A8300%2Fumbraco%2Flib%2Fangular%2Fangular.js%3Fcdv%3D1928020205%3A1963%3A12)
    at angular.js?cdv=1928020205:138
    at angular.js?cdv=1928020205:5041
    at forEach (angular.js?cdv=1928020205:387)
    at loadModules (angular.js?cdv=1928020205:5001)
    at createInjector (angular.js?cdv=1928020205:4918)
    at doBootstrap (angular.js?cdv=1928020205:1942)
    at Object.bootstrap (angular.js?cdv=1928020205:1963)
    at HTMLDocument.<anonymous> (Application?umb__rnd=2a22d53909947ff2de2abccffafa8678:52)
    at e (jquery.min.js?cdv=1928020205:2)
    at t (jquery.min.js?cdv=1928020205:2)
(anonymous) @ angular.js?cdv=1928020205:138
(anonymous) @ angular.js?cdv=1928020205:5041
forEach @ angular.js?cdv=1928020205:387
loadModules @ angular.js?cdv=1928020205:5001
createInjector @ angular.js?cdv=1928020205:4918
doBootstrap @ angular.js?cdv=1928020205:1942
bootstrap @ angular.js?cdv=1928020205:1963
(anonymous) @ Application?umb__rnd=2a22d53909947ff2de2abccffafa8678:52
e @ jquery.min.js?cdv=1928020205:2
t @ jquery.min.js?cdv=1928020205:2
setTimeout (async)
k.readyException @ jquery.min.js?cdv=1928020205:2
(anonymous) @ jquery.min.js?cdv=1928020205:2
e @ jquery.min.js?cdv=1928020205:2
t @ jquery.min.js?cdv=1928020205:2
setTimeout (async)
(anonymous) @ jquery.min.js?cdv=1928020205:2
c @ jquery.min.js?cdv=1928020205:2
fireWith @ jquery.min.js?cdv=1928020205:2
fire @ jquery.min.js?cdv=1928020205:2
c @ jquery.min.js?cdv=1928020205:2
fireWith @ jquery.min.js?cdv=1928020205:2
t @ jquery.min.js?cdv=1928020205:2
setTimeout (async)
(anonymous) @ jquery.min.js?cdv=1928020205:2
c @ jquery.min.js?cdv=1928020205:2
add @ jquery.min.js?cdv=1928020205:2
(anonymous) @ jquery.min.js?cdv=1928020205:2
Deferred @ jquery.min.js?cdv=1928020205:2
then @ jquery.min.js?cdv=1928020205:2
k.fn.ready @ jquery.min.js?cdv=1928020205:2
(anonymous) @ Application?umb__rnd=2a22d53909947ff2de2abccffafa8678:50
i @ lazyload.min.js:1
p @ lazyload.min.js:1
load (async)
k @ lazyload.min.js:1
js @ lazyload.min.js:1
(anonymous) @ Application?umb__rnd=2a22d53909947ff2de2abccffafa8678:1

[Matthew-Wise]

Did you also build Umbraco.Web? As the Javascript/JsInitialize.js was updated but its an embedded resource

Matt

[nul800sebastiaan]

Duh! That was silly! Of course I forgot that part. Awesome, it all works, great job! ⭐️

[nul800sebastiaan]

Hi there @Matthew-Wise,

First of all: A big #H5YR for contributing to Umbraco during Hacktoberfest! We are very thankful for the huge amount of PRs submitted, and all the amazing work you've been doing 🥇

We have had another record breaking amount of PR's in both the CMS, Documentation, and other smaller public repositories. You can read all about the numbers in the Umbraco Hacktoberfest round-up blog post.

Due to the amazing work you and others in the community have been doing, we've had a bit of a hard time keeping up. 😅 While all of the PRs for Hacktoberfest might not have been merged yet, you still qualify for receiving some Umbraco swag, congratulations! 🎉

In the spirit of Hacktoberfest we've prepared some exclusive Umbraco swag for all our contributors - including you!

Receive your swag! 👈 Please follow this link to fill out and submit the form, before December 19th 2019.

Following this date we'll be sending out all the swag, which also means that it might not reach your doorstep before February, so please bear with us and be patient 🙏

The only thing left to say is thank you so much for participating in Hacktoberfest! We really appreciate the help!

Kind regards,
The Umbraco PR Team & The Documentation Curators