Address reviewer feedback

Related to settings_block.vue
- add better keyboard nav
- fix ariaExpanded label

app/assets/javascripts/vue_shared/components/settings/settings_block.stories.js

@@ -14,9 +14,9 @@ const Template = (args, { argTypes }) => ({
     <template #description>Settings section description</template>
     <template #default>
       <p>Content</p>
-      <p>Moar content</p>
+      <p>More content</p>
       <p>Content</p>
-      <p>Moar content...</p>
+      <p>More content...</p>
       <p>Content</p>
     </template>
   </settings-block>

app/assets/javascripts/vue_shared/components/settings/settings_block.vue

@@ -45,10 +45,17 @@ export default {
       const { collapseAriaLabel, expandAriaLabel } = this.$options.i18n;
       return this.sectionExpanded ? collapseAriaLabel : expandAriaLabel;
     },
+    ariaExpanded() {
+      return String(this.sectionExpanded);
+    },
   },
   methods: {
     toggleSectionExpanded() {
       this.sectionExpanded = !this.sectionExpanded;
+
+      if (this.sectionExpanded) {
+        this.$refs.settingsContent.focus();
+      }
     },
   },
   i18n: {
@@ -71,9 +78,10 @@ export default {
           tabindex="0"
           class="gl-cursor-pointer"
           :aria-controls="settingsContentId"
-          :aria-expanded="sectionExpanded"
+          :aria-expanded="ariaExpanded"
           data-testid="section-title-button"
           @click="toggleSectionExpanded"
+          @keydown.enter.space="toggleSectionExpanded"
         >
           <slot name="title"></slot>
         </span>
@@ -84,7 +92,7 @@ export default {
       <gl-button
         v-if="collapsible"
         :aria-controls="settingsContentId"
-        :aria-expanded="sectionExpanded"
+        :aria-expanded="ariaExpanded"
         :aria-label="toggleButtonAriaLabel"
         @click="toggleSectionExpanded"
       >
@@ -96,7 +104,9 @@ export default {
     </div>
     <div
       :id="settingsContentId"
+      ref="settingsContent"
       :aria-labelledby="settingsLabelId"
+      tabindex="-1"
       role="region"
       class="settings-content"
     >

spec/frontend/vue_shared/components/settings/__snapshots__/settings_block_spec.js.snap

@@ -10,6 +10,7 @@ exports[`Settings Block renders the correct markup 1`] = `
     <h4>
       <span
         aria-controls="settings_content_3"
+        aria-expanded="false"
         class="gl-cursor-pointer"
         data-testid="section-title-button"
         id="settings_label_2"
@@ -24,6 +25,7 @@ exports[`Settings Block renders the correct markup 1`] = `
      
     <gl-button-stub
       aria-controls="settings_content_3"
+      aria-expanded="false"
       aria-label="Expand settings section"
       buttontextclasses=""
       category="primary"
@@ -48,6 +50,7 @@ exports[`Settings Block renders the correct markup 1`] = `
     class="settings-content"
     id="settings_content_3"
     role="region"
+    tabindex="-1"
   >
     <div
       data-testid="default-slot"

spec/frontend/vue_shared/components/settings/settings_block_spec.js

@@ -111,11 +111,11 @@ describe('Settings Block', () => {
         mountComponent({ collapsible: false });
       });
 
-      it('does not render clickable section title', async () => {
+      it('does not render clickable section title', () => {
         expect(findSectionTitleButton().exists()).toBe(false);
       });
 
-      it('contains expanded class', async () => {
+      it('contains expanded class', () => {
         expect(wrapper.classes('expanded')).toBe(true);
       });