Update permitted ARIA state or property for combobox role (#2322)

* update the rule for combobox role #rule-2311

* update the text #rule-2311

* Update aria-state-or-property-permitted-5c01ea.md

* Update _rules/aria-state-or-property-permitted-5c01ea.md

Update the property value

Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>

* update the required state and properties rule #rule-2311

* Update _rules/aria-state-or-property-permitted-5c01ea.md

Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>

---------

Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>

Author: shunguoy

_rules/aria-state-or-property-permitted-5c01ea.md

@@ -57,6 +57,8 @@ The presence of prohibited ARIA attributes is often the result of a developer us
 
 In HTML, there are language features that do not have corresponding implicit WAI-ARIA semantics. As per [ARIA in HTML](https://www.w3.org/TR/html-aria/), those elements can have [global states or properties][global]. Some of those elements can also have [inherited][], [supported][], or [required][] [states][state] or [properties][property] that correspond to a [WAI-ARIA role](https://www.w3.org/TR/wai-aria-1.2/#introroles). For example, the `audio` element has no corresponding ARIA semantics but it can have [inherited][], [supported][], or [required][] [states][state] or [properties][property] of the [`application` role](https://www.w3.org/TR/wai-aria-1.2/#application).
 
+Note that required WAI-ARIA states or properties for a role may change with the advance of the WAI-ARIA specifications. For example, both aria-expanded and aria-controls were required in [ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/#combobox) for combobox role, but the aria-controls was removed from required states or properties in [ARIA 1.3](https://www.w3.org/TR/wai-aria-1.3/#combobox). The examples in this rule follow [ARIA 1.3](https://www.w3.org/TR/wai-aria-1.3/#combobox).
+
 Assessing the value of the attribute is out of scope for this rule.
 
 ### Assumptions
@@ -126,26 +128,26 @@ The `aria-checked` [state][] is [required][] for the [semantic][semantic role] `
 
 #### Passed Example 6
 
-The `aria-controls` [property][] is [required][] for the [semantic][semantic role] `combobox`.
+The `aria-expanded` [property][] is [required][] for the [semantic][semantic role] `combobox`.
 
 ```html
 <div role="combobox" aria-controls="id1" aria-expanded="false" aria-label="My combobox">My combobox</div>
 ```
 
 #### Passed Example 7
 
-The `aria-controls` [property][] is [required][] for the [semantic][semantic role] `combobox`. [WAI-ARIA states and properties][wai-aria state or property] with empty value are still applicable to this rule.
+The `aria-expanded` [property][] is [required][] for the [semantic][semantic role] `combobox`.
 
 ```html
-<div role="combobox" aria-expanded="false" aria-controls aria-label="My combobox">My combobox</div>
+<div role="combobox" aria-expanded="false" aria-controls="id1" aria-label="My combobox">My combobox</div>
 ```
 
 #### Passed Example 8
 
-The `aria-controls` [property][] is [required][] for the [semantic][semantic role] `combobox`. [WAI-ARIA states and properties][wai-aria state or property] with empty value (specified as an empty string) are still applicable to this rule.
+The `aria-expanded` [property][] is [required][] for the [semantic][semantic role] `combobox`. [WAI-ARIA states and properties][wai-aria state or property] with `undefined` value are still applicable to this rule.
 
 ```html
-<div role="combobox" aria-expanded="false" aria-controls="" aria-label="My combobox">My combobox</div>
+<div role="combobox" aria-expanded="undefined" aria-controls="id1" aria-label="My combobox">My combobox</div>
 ```
 
 #### Passed Example 9
@@ -181,8 +183,13 @@ This `div` element has an [explicit role][] of `switch`; the `aria-required` [pr
 ```html
 <div role="switch" aria-checked="false" tabindex="0" aria-required="true">
 	<span class="label">Notifications</span>
-	<span class="switch" style="position: relative; display: inline-block; top: 6px; border: 2px solid black; border-radius: 12px; height: 20px; width: 40px;">
-		<span style="position: absolute; top: 2px; left: 2px; display: inline-block; border: 2px solid black; border-radius: 8px; height: 12px; width: 12px; background: black;"></span>
+	<span
+		class="switch"
+		style="position: relative; display: inline-block; top: 6px; border: 2px solid black; border-radius: 12px; height: 20px; width: 40px;"
+	>
+		<span
+			style="position: absolute; top: 2px; left: 2px; display: inline-block; border: 2px solid black; border-radius: 8px; height: 12px; width: 12px; background: black;"
+		></span>
 	</span>
 	<span class="on" aria-hidden="true" style="display: none;">On</span>
 	<span class="off" aria-hidden="true">Off</span>