Address reviewer comments

* remove incorrect aria-role
* improve storybook

app/assets/javascripts/vue_shared/components/pagination_bar/pagination_bar.stories.js

@@ -27,17 +27,11 @@ Default.args = {
 Default.argTypes = {
   pageInfo: {
     description: 'Page info object',
-    control: false,
+    control: { type: 'object' },
   },
   pageSizes: {
     description: 'Array of possible page sizes',
-    control: false,
-  },
-  itemsCount: {
-    description: 'Total number of items',
-    control: {
-      type: 'number',
-    },
+    control: { type: 'array' },
   },
 
   // events

app/assets/javascripts/vue_shared/components/pagination_bar/pagination_bar.vue

@@ -42,8 +42,24 @@ export default {
 
   methods: {
     setPage(page) {
+      // eslint-disable-next-line spaced-comment
+      /**
+       * Emitted when selected page is updated
+       *
+       * @event set-page
+       **/
       this.$emit('set-page', page);
     },
+
+    setPageSize(pageSize) {
+      // eslint-disable-next-line spaced-comment
+      /**
+       * Emitted when page size is updated
+       *
+       * @event set-page-size
+       **/
+      this.$emit('set-page-size', pageSize);
+    },
   },
 };
 </script>
@@ -51,7 +67,7 @@ export default {
 <template>
   <div class="gl-display-flex gl-align-items-center">
     <pagination-links :change="setPage" :page-info="pageInfo" class="gl-m-0" />
-    <gl-dropdown category="tertiary" class="gl-ml-auto" :aria-label="__('Page size')">
+    <gl-dropdown category="tertiary" class="gl-ml-auto" data-testid="page-size">
       <template #button-content>
         <span class="gl-font-weight-bold">
           <gl-sprintf :message="__('%{count} items per page')">
@@ -62,7 +78,7 @@ export default {
         </span>
         <gl-icon class="gl-button-icon dropdown-chevron" name="chevron-down" />
       </template>
-      <gl-dropdown-item v-for="size in pageSizes" :key="size" @click="$emit('set-page-size', size)">
+      <gl-dropdown-item v-for="size in pageSizes" :key="size" @click="setPageSize(size)">
         <gl-sprintf :message="__('%{count} items per page')">
           <template #count>
             {{ size }}

locale/gitlab.pot

@@ -25258,9 +25258,6 @@ msgstr ""
 msgid "Page settings"
 msgstr ""
 
-msgid "Page size"
-msgstr ""
-
 msgid "PagerDutySettings|Active"
 msgstr ""
 

spec/frontend/import_entities/import_groups/components/import_table_spec.js

@@ -38,7 +38,7 @@ describe('import table', () => {
     wrapper.findAll('button').wrappers.find((w) => w.text() === 'Import selected');
   const findImportButtons = () =>
     wrapper.findAll('button').wrappers.filter((w) => w.text() === 'Import');
-  const findPaginationDropdown = () => wrapper.find('[aria-label="Page size"]');
+  const findPaginationDropdown = () => wrapper.find('[data-testid="page-size"]');
   const findPaginationDropdownText = () => findPaginationDropdown().find('button').text();
   const findSelectionCount = () => wrapper.find('[data-test-id="selection-count"]');