docs(modals): focusable header (#5071)

* docs(modals): focusable header

* fix(modals): footless example tabindex added for focusable header

* fixed release notes

Co-authored-by: andrewvasilchuk <[email protected]>
Co-authored-by: Lauren Suh <[email protected]>
Co-authored-by: Doug Molidor <[email protected]>

Author: 4 people

RELEASENOTES.general.md

@@ -2,6 +2,7 @@
 <!-- On release, add general notes here. In time the legacy release notes will be add to this -->
 
 ## 2.19.0 - Upcoming
+
 - Updated icons to `v10.4.0`
   - Standard Set:
     - Added `ai_accelerator_card`

RELEASENOTES.md

@@ -2,6 +2,7 @@
 <!-- !!! THIS FILE IS AUTO-GENERATED !!! DO NOT EDIT THIS FILE MANUALLY !!! -->
 
 ## Release 2.19.0 - Upcoming
+
 - Updated icons to `v10.4.0`
   - Standard Set:
     - Added `ai_accelerator_card`
@@ -64,6 +65,10 @@
 #### Added
 - Added `role="img"` to unread indicator dot to comply with accessibility usage rules for `aria-label`
 
+### [Modals](https://www.lightningdesignsystem.com/components/modals)
+#### Changed
+- Added tabindex to Footless example for programmatic focus use case.
+
 ### [Tabs](https://www.lightningdesignsystem.com/components/tabs)
 #### Added
 - Added `role="img"` to unread indicator dot to comply with accessibility usage rules for `aria-label`

ui/components/modals/RELEASENOTES.md

@@ -4,6 +4,10 @@
 
 <!-- ## [Unreleased] -->
 
+## 2.19.0
+### Changed
+- Added tabindex to Footless example for programmatic focus use case.
+
 ## 2.18.0
 ### Changed
 

ui/components/modals/base/example.jsx

@@ -268,7 +268,7 @@ export let Footless = (props) => (
   <Backdrop>
     <Modal aria-labelledby="modal-heading-01">
       <ModalHeader>
-        <h1 id="modal-heading-01" className="slds-modal__title slds-hyphenate">
+        <h1 id="modal-heading-01" className="slds-modal__title slds-hyphenate" tabindex="-1">
           Modal header
         </h1>
       </ModalHeader>