Add the option to configure the initalFocus of the focus-trap in AuModal

addon/components/au-modal.hbs

@@ -15,7 +15,7 @@
           isActive=@modalOpen
           focusTrapOptions=
             (hash
-              initialFocus=".au-c-modal__title"
+              initialFocus=this.initialFocus
               allowOutsideClick=true
               escapeDeactivates=this.handleEscapePress
             )
@@ -65,4 +65,4 @@
       {{/if}}
     </div>
   {{/in-element}}
-{{/if}}
+{{/if}}

addon/components/au-modal.js

@@ -42,6 +42,10 @@ export default class AuModal extends Component {
     else return '';
   }
 
+  get initialFocus() {
+    return this.args.initialFocus ?? '.au-c-modal__title';
+  }
+
   @action
   handleEscapePress() {
     this.closeModal();

package.json

@@ -155,5 +155,8 @@
       "release": true,
       "tokenRef": "GITHUB_AUTH"
     }
+  },
+  "volta": {
+    "node": "14.20.1"
   }
 }

stories/5-components/Content/AuModal.stories.js

@@ -41,6 +41,10 @@ export default {
       description:
         'If set to true the modal container and content will be have visible overflow. Useful when using a powerselect component inside a modal.',
     },
+    initialFocus: {
+      control: 'text',
+      description: 'Element which should be focused when opening the modal',
+    },
   },
   parameters: {
     layout: 'fullscreen',
@@ -75,11 +79,13 @@ const OverflowTemplate = (args) => ({
       @size={{this.size}}
       @padding={{this.padding}}
       @overflow={{this.overflow}}
+      @initialFocus='.power-select'
     >
       <:title>{{this.title}}</:title>
       <:body>
         <AuLabel>Power select (rendered in place)</AuLabel>
         <PowerSelect
+          class='power-select'
           @allowClear={{true}}
           @searchEnabled={{true}}
           @loadingMessage='Aan het laden...'
@@ -119,4 +125,5 @@ Overflow.args = {
   padding: 'default',
   overflow: true,
   powerselectoptions: singleselects,
+  initialFocus: '.power-select',
 };