refactor(aom): Fix ariaHasPopup and add ariaColSpan (#247) (#253)

* refactor(aom): Reorder alphabetically for easier maintenance

* fix(aom): Add missing ariaColSpan prop

https://github.com/w3c/aria/pull/708/files#diff-eacf331f0ffc35d4b482f1d15a887d3bR11051

* fix(aom): Use correct casing for ariaHasPopup

https://github.com/w3c/aria/pull/708/files#diff-eacf331f0ffc35d4b482f1d15a887d3bR11060

* docs(aom): Add comments explaining how we arrived at this mapping

(cherry picked from commit 405468a)

packages/lwc-template-compiler/src/parser/constants.ts

@@ -69,53 +69,58 @@ export const ATTRS_PROPS_TRANFORMS: { [name: string]: string } = {
     'usemap': 'useMap',
     'for': 'htmlFor',
 
-    // Aria
+    // According to the following list, there are 48 aria attributes (of which 2 are deprecated):
+    // https://www.w3.org/TR/wai-aria-1.1/#x6-6-definitions-of-states-and-properties-all-aria-attributes
+    // This list of 46 non-deprecated aria attributes is consistent with the following proposal:
+    // https://github.com/w3c/aria/pull/708/files#diff-eacf331f0ffc35d4b482f1d15a887d3bR11060
+    'aria-activedescendant': 'ariaActiveDescendant',
+    'aria-atomic': 'ariaAtomic',
     'aria-autocomplete': 'ariaAutoComplete',
+    'aria-busy': 'ariaBusy',
     'aria-checked': 'ariaChecked',
+    'aria-colcount': 'ariaColCount',
+    'aria-colindex': 'ariaColIndex',
+    'aria-colspan': 'ariaColSpan',
+    'aria-controls': 'ariaControls',
     'aria-current': 'ariaCurrent',
+    'aria-describedby': 'ariaDescribedBy',
+    'aria-details': 'ariaDetails',
     'aria-disabled': 'ariaDisabled',
+//  'aria-dropeffect': 'ariaDropEffect', /* Deprecated in ARIA 1.1 */
+    'aria-errormessage': 'ariaErrorMessage',
     'aria-expanded': 'ariaExpanded',
-    'aria-haspopup': 'ariaHasPopUp',
+    'aria-flowto': 'ariaFlowTo',
+//  'aria-grabbed': 'ariaGrabbed', /* Deprecated in ARIA 1.1 */
+    'aria-haspopup': 'ariaHasPopup',
     'aria-hidden': 'ariaHidden',
     'aria-invalid': 'ariaInvalid',
+    'aria-keyshortcuts': 'ariaKeyShortcuts',
     'aria-label': 'ariaLabel',
+    'aria-labelledby': 'ariaLabelledBy',
     'aria-level': 'ariaLevel',
+    'aria-live': 'ariaLive',
+    'aria-modal': 'ariaModal',
     'aria-multiline': 'ariaMultiLine',
     'aria-multiselectable': 'ariaMultiSelectable',
     'aria-orientation': 'ariaOrientation',
+    'aria-owns': 'ariaOwns',
+    'aria-placeholder': 'ariaPlaceholder',
+    'aria-posinset': 'ariaPosInSet',
     'aria-pressed': 'ariaPressed',
     'aria-readonly': 'ariaReadOnly',
+    'aria-relevant': 'ariaRelevant',
     'aria-required': 'ariaRequired',
+    'aria-roledescription': 'ariaRoleDescription',
+    'aria-rowcount': 'ariaRowCount',
+    'aria-rowindex': 'ariaRowIndex',
+    'aria-rowspan': 'ariaRowSpan',
     'aria-selected': 'ariaSelected',
+    'aria-setsize': 'ariaSetSize',
     'aria-sort': 'ariaSort',
     'aria-valuemax': 'ariaValueMax',
     'aria-valuemin': 'ariaValueMin',
     'aria-valuenow': 'ariaValueNow',
     'aria-valuetext': 'ariaValueText',
-    'aria-live': 'ariaLive',
-    'aria-relevant': 'ariaRelevant',
-    'aria-atomic': 'ariaAtomic',
-    'aria-busy': 'ariaBusy',
-    'aria-activedescendant': 'ariaActiveDescendant',
-    'aria-controls': 'ariaControls',
-    'aria-describedby': 'ariaDescribedBy',
-    'aria-flowto': 'ariaFlowTo',
-    'aria-labelledby': 'ariaLabelledBy',
-    'aria-owns': 'ariaOwns',
-    'aria-posinset': 'ariaPosInSet',
-    'aria-setsize': 'ariaSetSize',
-
-    'aria-colcount': 'ariaColCount',
-    'aria-colindex': 'ariaColIndex',
-    'aria-details': 'ariaDetails',
-    'aria-errormessage': 'ariaErrorMessage',
-    'aria-keyshortcuts': 'ariaKeyShortcuts',
-    'aria-modal': 'ariaModal',
-    'aria-placeholder': 'ariaPlaceholder',
-    'aria-roledescription': 'ariaRoleDescription',
-    'aria-rowcount': 'ariaRowCount',
-    'aria-rowindex': 'ariaRowIndex',
-    'aria-rowspan': 'ariaRowSpan',
 };
 
 export const HTML_TAG_BLACKLIST: { [tagname: string]: boolean } = {