[Accessibility] Load angular-aria for kibana module (#14969) (#15015)

* Load angular-aria for kibana module

* Fix indentation

* Add documentation

package.json

@@ -80,6 +80,7 @@
     "JSONStream": "1.1.1",
     "accept-language-parser": "1.2.0",
     "angular": "1.6.5",
+    "angular-aria": "1.6.6",
     "angular-bootstrap-colorpicker": "3.0.19",
     "angular-elastic": "2.5.0",
     "angular-route": "1.4.7",
@@ -178,8 +179,8 @@
     "react-markdown": "2.4.2",
     "react-redux": "5.0.5",
     "react-router": "2.0.0",
-    "react-router-redux": "4.0.4",
     "react-router-dom": "4.2.2",
+    "react-router-redux": "4.0.4",
     "react-select": "1.0.0-rc.5",
     "react-sizeme": "2.3.4",
     "react-sortable": "1.1.0",

src/ui/public/accessibility/angular_aria.js

@@ -0,0 +1,22 @@
+import 'angular-aria';
+import { uiModules } from 'ui/modules';
+
+/**
+ * This module will take care of attaching appropriate aria tags related to some angular stuff,
+ * e.g. it will attach aria-invalid if the model state is set to invalid.
+ *
+ * You can find more infos in the official documentation: https://docs.angularjs.org/api/ngAria.
+ *
+ * Three settings are disabled: it won't automatically attach `tabindex`, `role=button` or
+ * handling keyboad events for `ngClick` directives. Kibana uses `kbnAccessibleClick` to handle
+ * those cases where you need an `ngClick` non button element to have keyboard access.
+ */
+uiModules
+  .get('kibana', ['ngAria'])
+  .config(($ariaProvider) => {
+    $ariaProvider.config({
+      bindKeydown: false,
+      bindRoleForClick: false,
+      tabindex: false,
+    });
+  });

src/ui/public/accessibility/index.js

@@ -1,2 +1,3 @@
+import './angular_aria';
 import './kbn_accessible_click';
 import './scrollto_activedescendant';