HTML enumerated attributes are case-insensitive (mdn#40377)

* HTML enumerated attributes are case-insensitive

* Add a sentence about IDL reflection

* Document enumerated reflected attributes in DOM guide

* Add a pointer

* Update files/en-us/glossary/enumerated/index.md

Co-authored-by: Hamish Willee <hamishwillee@gmail.com>

---------

Co-authored-by: Hamish Willee <hamishwillee@gmail.com>

Author: Elchi3

files/en-us/glossary/enumerated/index.md

@@ -9,7 +9,7 @@ In computer science, an **enumerated** type is a data type consisting of a limit
 
 ## HTML enumerated attributes
 
-In HTML, [enumerated attributes](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute) are attributes with a limited, predefined set of text values. For example, the global HTML [`dir`](/en-US/docs/Web/HTML/Reference/Global_attributes/dir) attribute has three valid values: `ltr`, `rtl`, and `auto`.
+In HTML, [enumerated attributes](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute) are attributes with a limited, predefined set of text values. For example, the global HTML [`dir`](/en-US/docs/Web/HTML/Reference/Global_attributes/dir) attribute has three valid values: `ltr`, `rtl`, and `auto`. Like for HTML tag names, HTML enumerated attributes and their values are case-insensitive, so `LTR`, `RTL`, and `AUTO` will also work. The IDL-reflected property, {{domxref("HTMLElement.dir")}}, can also be set using a case-insensitive value, but will always return the canonical format of the value defined in the specification (lowercased values in this example). See [Attribute reflection](/en-US/docs/Web/API/Document_Object_Model/Reflected_attributes) for more information.
 
 Each enumerated attribute has a default value for when the attribute is present without a value (the value is missing), and a default value for when the attribute is assigned an invalid value. Unlike {{Glossary("Boolean/HTML", "Boolean attribute")}} HTML attributes — which are always true when the attribute is present whether the value is present, omitted, or invalid — with enumerated HTML attributes, the default for an omitted value may be different from the default for invalid values. For example, the global HTML [`contenteditable`](/en-US/docs/Web/HTML/Reference/Global_attributes/contenteditable) attribute has two valid keywords: `true` and `false`. If the attribute is present but no value is set, the value is `true`. If a value is set, but is invalid, such as `contenteditable="contenteditable"`, the value maps to a third state, `inherit`.
 
@@ -28,3 +28,4 @@ In JavaScript, enumerable properties are those properties whose internal enumera
 - {{Glossary("Boolean")}}
 - [JavaScript data types and data structures](/en-US/docs/Web/JavaScript/Guide/Data_structures)
 - [enumerated attributes](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute) in the HTML Standard
+- [Attribute reflection](/en-US/docs/Web/API/Document_Object_Model/Reflected_attributes)

files/en-us/web/api/document_object_model/reflected_attributes/index.md

@@ -77,6 +77,36 @@ The {{domxref("Element.getAttribute()")}} will return `""` if the input is check
 The corresponding {{domxref("HTMLInputElement.checked")}} property returns `true` or `false` for the checked state.
 Otherwise boolean reflected attributes are the same as any other reflected attributes.
 
+### Enumerated reflected attributes
+
+In HTML, [enumerated attributes](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute) are attributes with a limited, predefined set of text values. For example, the global HTML [`dir`](/en-US/docs/Web/HTML/Reference/Global_attributes/dir) attribute has three valid values: `ltr`, `rtl`, and `auto`.
+
+```html
+<p dir="rtl">Right to left</p>
+```
+
+Like for HTML tag names, HTML enumerated attributes and their values are case-insensitive, so `LTR`, `RTL`, and `AUTO` will also work.
+
+```html
+<p dir="RTL">Right to left</p>
+```
+
+The IDL-reflected property, {{domxref("HTMLElement.dir")}}, always returns a canonical value as provided in the specification (lowercased values in this example). Setting the value also serializes it to the canonical form.
+
+```js
+const pElement = document.querySelector("p");
+console.log(pElement.dir); // "rtl"
+pElement.dir = "RTL";
+console.log(pElement.dir); // "rtl"
+```
+
+Alternatively, you can use the {{domxref("Element.getAttribute()","getAttribute()")}} method of the {{domxref("Element")}} interface. It will get the attribute value from HTML without modifications.
+
+```js
+const pElement = document.querySelector("p");
+console.log(pElement.getAttribute("dir"); // "RTL"
+```
+
 ## Reflected element references
 
 > [!NOTE]