Add latest changes from gitlab-org/gitlab@master

5 files changed, 223 insertions, 174 deletions

diff --git a/doc/development/fe_guide/accessibility.md b/doc/development/fe_guide/accessibility.md
index f273c8133cb..b00131b12f3 100644
--- a/doc/development/fe_guide/accessibility.md
+++ b/doc/development/fe_guide/accessibility.md
@@ -516,6 +516,55 @@ GitLab-specific examples are assignee and label dropdowns.
 Building such widgets require ARIA to make them understandable to screen readers.
 Proper research and testing should be done to ensure compliance with [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/).
 
+## Automated accessibility testing with axe
+
+You can use [axe-core](https://github.com/dequelabs/axe-core) [gems](https://github.com/dequelabs/axe-core-gems)
+to run automated accessibility tests in feature tests.
+
+Axe provides the custom matcher `be_axe_clean`, which can be used like the following:
+
+```ruby
+# spec/features/settings_spec.rb
+it 'passes axe automated accessibility testing', :js do
+  visit_settings_page
+
+  wait_for_requests # ensures page is fully loaded
+
+  expect(page).to be_axe_clean
+end
+```
+
+If needed, you can scope testing to a specific area of the page by using `within`.
+
+Axe also provides specific [clauses](https://github.com/dequelabs/axe-core-gems/blob/develop/packages/axe-core-rspec/README.md#clauses),
+for example:
+
+```ruby
+expect(page).to be_axe_clean.within '[data-testid="element"]'
+
+# run only WCAG 2.0 Level AA rules
+expect(page).to be_axe_clean.according_to :wcag2aa
+
+# specifies which rule to skip
+expect(page).to be_axe_clean.skipping :'link-in-text-block'
+
+# clauses can be chained
+expect(page).to be_axe_clean.within('[data-testid="element"]')
+                            .according_to(:wcag2aa)
+```
+
+Axe does not test hidden regions, such as inactive menus or modal windows. To test
+hidden regions for accessibility, write tests that activate or render the regions visible
+and run the matcher again.
+
+### Known accessibility violations
+
+This section documents violations where a recommendation differs with the [design system](https://design.gitlab.com/):
+
+- `link-in-text-block`: For now, use the `skipping` clause to skip `:'link-in-text-block'`
+  rule to fix the violation. After this is fixed as part of [issue 1444](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1444)
+  and underline is added to the `GlLink` component, this clause can be removed.
+
 ## Resources
 
 ### Viewing the browser accessibility tree
diff --git a/doc/development/fe_guide/graphql.md b/doc/development/fe_guide/graphql.md
index 71a19b50001..7a79081b0d9 100644
--- a/doc/development/fe_guide/graphql.md
+++ b/doc/development/fe_guide/graphql.md
@@ -63,17 +63,17 @@ the GraphQL extension, follow these steps:
 1. Add an `apollo.config.js` file to the root of your `gitlab` local directory.
 1. Populate the file with the following content:
 
-    ```javascript
-    module.exports = {
-      client: {
-        includes: ['./app/assets/javascripts/**/*.graphql', './ee/app/assets/javascripts/**/*.graphql'],
-        service: {
-          name: 'GitLab',
-          localSchemaFile: './tmp/tests/graphql/gitlab_schema.graphql',
-        },
-      },
-    };
-    ```
+   ```javascript
+   module.exports = {
+     client: {
+       includes: ['./app/assets/javascripts/**/*.graphql', './ee/app/assets/javascripts/**/*.graphql'],
+       service: {
+         name: 'GitLab',
+         localSchemaFile: './tmp/tests/graphql/gitlab_schema.graphql',
+       },
+     },
+   };
+   ```
 
 1. Restart VS Code.
 
diff --git a/doc/development/fe_guide/performance.md b/doc/development/fe_guide/performance.md
index 3aa901093f0..20609718217 100644
--- a/doc/development/fe_guide/performance.md
+++ b/doc/development/fe_guide/performance.md
@@ -142,21 +142,21 @@ To use the Vue performance plugin:
 
 1. Import the plugin:
 
-    ```javascript
-    import PerformancePlugin from '~/performance/vue_performance_plugin';
-    ```
+   ```javascript
+   import PerformancePlugin from '~/performance/vue_performance_plugin';
+   ```
 
 1. Use it before initializing your Vue application:
 
-    ```javascript
-    Vue.use(PerformancePlugin, {
-      components: [
-        'IdeTreeList',
-        'FileTree',
-        'RepoEditor',
-      ]
-    });
-    ```
+   ```javascript
+   Vue.use(PerformancePlugin, {
+     components: [
+       'IdeTreeList',
+       'FileTree',
+       'RepoEditor',
+     ]
+   });
+   ```
 
 The plugin accepts the list of components, performance of which should be measured. The components
 should be specified by their `name` option.
diff --git a/doc/development/fe_guide/storybook.md b/doc/development/fe_guide/storybook.md
index e57c117bc39..8e0814ad96b 100644
--- a/doc/development/fe_guide/storybook.md
+++ b/doc/development/fe_guide/storybook.md
@@ -16,15 +16,15 @@ To build and launch Storybook locally, in the root directory of the `gitlab` pro
 
 1. Install Storybook dependencies:
 
-    ```shell
-    yarn storybook:install
-    ```
+   ```shell
+   yarn storybook:install
+   ```
 
 1. Build the Storybook site:
 
-    ```shell
-    yarn storybook:start
-    ```
+   ```shell
+   yarn storybook:start
+   ```
 
 ## Adding components to Storybook
 
@@ -35,14 +35,14 @@ To add a story:
 1. Create a new `.stories.js` file in the same directory as the Vue component.
    The filename should have the same prefix as the Vue component.
 
-    ```txt
-    vue_shared/
-    ├─ components/
-    │  ├─ sidebar
-    │  |  ├─ todo_toggle
-    │  |  |  ├─ todo_button.vue
-    │  │  |  ├─ todo_button.stories.js
-    ```
+   ```txt
+   vue_shared/
+   ├─ components/
+   │  ├─ sidebar
+   │  |  ├─ todo_toggle
+   │  |  |  ├─ todo_button.vue
+   │  │  |  ├─ todo_button.stories.js
+   ```
 
 1. Write the story as per the [official Storybook instructions](https://storybook.js.org/docs/vue/writing-stories/introduction/)
 
diff --git a/doc/development/fe_guide/style/vue.md b/doc/development/fe_guide/style/vue.md
index a21d7c4577b..280019527da 100644
--- a/doc/development/fe_guide/style/vue.md
+++ b/doc/development/fe_guide/style/vue.md
@@ -59,63 +59,63 @@ Check the [rules](https://github.com/vuejs/eslint-plugin-vue#bulb-rules) for mor
 
 1. Explicitly define data being passed into the Vue app
 
-    ```javascript
-    // bad
-    return new Vue({
-      el: '#element',
-      components: {
-        componentName
-      },
-      provide: {
-        ...someDataset
-      },
-      props: {
-        ...anotherDataset
-      },
-      render: createElement => createElement('component-name'),
-    }));
-
-    // good
-    const { foobar, barfoo } = someDataset;
-    const { foo, bar } = anotherDataset;
-
-    return new Vue({
-      el: '#element',
-      components: {
-        componentName
-      },
-      provide: {
-        foobar,
-        barfoo
-      },
-      props: {
-        foo,
-        bar
-      },
-      render: createElement => createElement('component-name'),
-    }));
-    ```
-
-    We discourage the use of the spread operator in this specific case in
-    order to keep our codebase explicit, discoverable, and searchable.
-    This applies in any place where we would benefit from the above, such as
-    when [initializing Vuex state](../vuex.md#why-not-just-spread-the-initial-state).
-    The pattern above also enables us to easily parse non scalar values during
-    instantiation.
-
-    ```javascript
-    return new Vue({
-      el: '#element',
-      components: {
-        componentName
-      },
-      props: {
-        foo,
-        bar: parseBoolean(bar)
-      },
-      render: createElement => createElement('component-name'),
-    }));
-    ```
+   ```javascript
+   // bad
+   return new Vue({
+     el: '#element',
+     components: {
+       componentName
+     },
+     provide: {
+       ...someDataset
+     },
+     props: {
+       ...anotherDataset
+     },
+     render: createElement => createElement('component-name'),
+   }));
+
+   // good
+   const { foobar, barfoo } = someDataset;
+   const { foo, bar } = anotherDataset;
+
+   return new Vue({
+     el: '#element',
+     components: {
+       componentName
+     },
+     provide: {
+       foobar,
+       barfoo
+     },
+     props: {
+       foo,
+       bar
+     },
+     render: createElement => createElement('component-name'),
+   }));
+   ```
+
+   We discourage the use of the spread operator in this specific case in
+   order to keep our codebase explicit, discoverable, and searchable.
+   This applies in any place where we would benefit from the above, such as
+   when [initializing Vuex state](../vuex.md#why-not-just-spread-the-initial-state).
+   The pattern above also enables us to easily parse non scalar values during
+   instantiation.
+
+   ```javascript
+   return new Vue({
+     el: '#element',
+     components: {
+       componentName
+     },
+     props: {
+       foo,
+       bar: parseBoolean(bar)
+     },
+     render: createElement => createElement('component-name'),
+   }));
+   ```
 
 ## Naming
 
@@ -404,7 +404,7 @@ When using `v-for` you need to provide a *unique* `:key` attribute for each item
    ```
 
 1. When using `v-for` with `template` and there is more than one child element, the `:key` values
-must be unique. It's advised to use `kebab-case` namespaces.
+   must be unique. It's advised to use `kebab-case` namespaces.
 
    ```html
    <template v-for="(item, index) in items">
@@ -467,7 +467,7 @@ Creating a global, mutable wrapper provides a number of advantages, including th
   ```
 
 - Use a `beforeEach` block to mount the component (see
-[the `createComponent` factory](#the-createcomponent-factory) for more information).
+  [the `createComponent` factory](#the-createcomponent-factory) for more information).
 - Use an `afterEach` block to destroy the component, for example, `wrapper.destroy()`.
 
 #### The `createComponent` factory
@@ -538,42 +538,42 @@ describe('MyComponent', () => {
 #### `createComponent` best practices
 
 1. Consider using a single (or a limited number of) object arguments over many arguments.
-  Defining single parameters for common data like `props` is okay,
-  but keep in mind our [JavaScript style guide](javascript.md#limit-number-of-parameters) and
-  stay within the parameter number limit:
+   Defining single parameters for common data like `props` is okay,
+   but keep in mind our [JavaScript style guide](javascript.md#limit-number-of-parameters) and
+   stay within the parameter number limit:
 
-    ```javascript
-    // bad
-    function createComponent(data, props, methods, isLoading, mountFn) { }
+   ```javascript
+   // bad
+   function createComponent(data, props, methods, isLoading, mountFn) { }
 
-    // good
-    function createComponent({ data, props, methods, stubs, isLoading } = {}) { }
+   // good
+   function createComponent({ data, props, methods, stubs, isLoading } = {}) { }
 
-    // good
-    function createComponent(props = {}, { data, methods, stubs, isLoading } = {}) { }
-    ```
+   // good
+   function createComponent(props = {}, { data, methods, stubs, isLoading } = {}) { }
+   ```
 
 1. If you require both `mount` _and_ `shallowMount` within the same set of tests, it
-can be useful define a `mountFn` parameter for the `createComponent` factory that accepts
-the mounting function (`mount` or `shallowMount`) to be used to mount the component:
+   can be useful define a `mountFn` parameter for the `createComponent` factory that accepts
+   the mounting function (`mount` or `shallowMount`) to be used to mount the component:
 
-    ```javascript
-    import { shallowMount } from '@vue/test-utils';
+   ```javascript
+   import { shallowMount } from '@vue/test-utils';
 
-    function createComponent({ mountFn = shallowMount } = {}) { }
-    ```
+   function createComponent({ mountFn = shallowMount } = {}) { }
+   ```
 
 1. Use the `mountExtended` and `shallowMountExtended` helpers to expose `wrapper.findByTestId()`:
 
-    ```javascript
-    import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-    import { SomeComponent } from 'components/some_component.vue';
+   ```javascript
+   import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+   import { SomeComponent } from 'components/some_component.vue';
 
-    let wrapper;
+   let wrapper;
 
-    const createWrapper = () => { wrapper = shallowMountExtended(SomeComponent); };
-    const someButton = () => wrapper.findByTestId('someButtonTestId');
-    ```
+   const createWrapper = () => { wrapper = shallowMountExtended(SomeComponent); };
+   const someButton = () => wrapper.findByTestId('someButtonTestId');
+   ```
 
 ### Setting component state
 
@@ -581,70 +581,70 @@ the mounting function (`mount` or `shallowMount`) to be used to mount the compon
 component state wherever possible. Instead, set the component's
 [`propsData`](https://v1.test-utils.vuejs.org/api/options.html#propsdata) when mounting the component:
 
-    ```javascript
-    // bad
-    wrapper = shallowMount(MyComponent);
-    wrapper.setProps({
-      myProp: 'my cool prop'
-    });
+   ```javascript
+   // bad
+   wrapper = shallowMount(MyComponent);
+   wrapper.setProps({
+     myProp: 'my cool prop'
+   });
 
-    // good
-    wrapper = shallowMount({ propsData: { myProp: 'my cool prop' } });
-    ```
+   // good
+   wrapper = shallowMount({ propsData: { myProp: 'my cool prop' } });
+   ```
 
-    The exception here is when you wish to test component reactivity in some way.
-    For example, you may want to test the output of a component when after a particular watcher has
-    executed. Using `setProps` to test such behavior is okay.
+   The exception here is when you wish to test component reactivity in some way.
+   For example, you may want to test the output of a component when after a particular watcher has
+   executed. Using `setProps` to test such behavior is okay.
 
 ### Accessing component state
 
 1. When accessing props or attributes, prefer the `wrapper.props('myProp')` syntax over
 `wrapper.props().myProp` or `wrapper.vm.myProp`:
 
-    ```javascript
-    // good
-    expect(wrapper.props().myProp).toBe(true);
-    expect(wrapper.attributes().myAttr).toBe(true);
+   ```javascript
+   // good
+   expect(wrapper.props().myProp).toBe(true);
+   expect(wrapper.attributes().myAttr).toBe(true);
 
-    // better
-    expect(wrapper.props('myProp').toBe(true);
-    expect(wrapper.attributes('myAttr')).toBe(true);
-    ```
+   // better
+   expect(wrapper.props('myProp').toBe(true);
+   expect(wrapper.attributes('myAttr')).toBe(true);
+   ```
 
 1. When asserting multiple props, check the deep equality of the `props()` object with
 [`toEqual`](https://jestjs.io/docs/expect#toequalvalue):
 
-    ```javascript
-    // good
-    expect(wrapper.props('propA')).toBe('valueA');
-    expect(wrapper.props('propB')).toBe('valueB');
-    expect(wrapper.props('propC')).toBe('valueC');
-
-    // better
-    expect(wrapper.props()).toEqual({
-      propA: 'valueA',
-      propB: 'valueB',
-      propC: 'valueC',
-    });
-    ```
+   ```javascript
+   // good
+   expect(wrapper.props('propA')).toBe('valueA');
+   expect(wrapper.props('propB')).toBe('valueB');
+   expect(wrapper.props('propC')).toBe('valueC');
+
+   // better
+   expect(wrapper.props()).toEqual({
+     propA: 'valueA',
+     propB: 'valueB',
+     propC: 'valueC',
+   });
+   ```
 
 1. If you are only interested in some of the props, you can use
 [`toMatchObject`](https://jestjs.io/docs/expect#tomatchobjectobject). Prefer `toMatchObject`
 over [`expect.objectContaining`](https://jestjs.io/docs/expect#expectobjectcontainingobject):
 
-    ```javascript
-    // good
-    expect(wrapper.props()).toEqual(expect.objectContaining({
-      propA: 'valueA',
-      propB: 'valueB',
-    }));
+   ```javascript
+   // good
+   expect(wrapper.props()).toEqual(expect.objectContaining({
+     propA: 'valueA',
+     propB: 'valueB',
+   }));
 
-    // better
-    expect(wrapper.props()).toMatchObject({
-      propA: 'valueA',
-      propB: 'valueB',
-    });
-    ```
+   // better
+   expect(wrapper.props()).toMatchObject({
+     propA: 'valueA',
+     propB: 'valueB',
+   });
+   ```
 
 ## The JavaScript/Vue Accord
 
@@ -659,16 +659,16 @@ The goal of this accord is to make sure we are all on the same page.
    1. We avoid adding new jQuery events when they are not required. Instead of adding new jQuery
    events take a look at [different methods to do the same task](https://v2.vuejs.org/v2/api/#vm-emit).
 1. You may query the `window` object one time, while bootstrapping your application for application
-specific data (for example, `scrollTo` is ok to access anytime). Do this access during the
-bootstrapping of your application.
+   specific data (for example, `scrollTo` is ok to access anytime). Do this access during the
+   bootstrapping of your application.
 1. You may have a temporary but immediate need to create technical debt by writing code that does
-not follow our standards, to be refactored later. Maintainers need to be ok with the tech debt in
-the first place. An issue should be created for that tech debt to evaluate it further and discuss.
-In the coming months you should fix that tech debt, with its priority to be determined by maintainers.
+   not follow our standards, to be refactored later. Maintainers need to be ok with the tech debt in
+   the first place. An issue should be created for that tech debt to evaluate it further and discuss.
+   In the coming months you should fix that tech debt, with its priority to be determined by maintainers.
 1. When creating tech debt you must write the tests for that code before hand and those tests may
-not be rewritten. For example, jQuery tests rewritten to Vue tests.
+   not be rewritten. For example, jQuery tests rewritten to Vue tests.
 1. You may choose to use VueX as a centralized state management. If you choose not to use VueX, you
-must use the *store pattern* which can be found in the
-[Vue.js documentation](https://v2.vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch).
+   must use the *store pattern* which can be found in the
+   [Vue.js documentation](https://v2.vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch).
 1. Once you have chosen a centralized state-management solution you must use it for your entire
-application. Don't mix and match your state-management solutions.
+   application. Don't mix and match your state-management solutions.