Commit 8cb24ea4 authored by Coung Ngo's avatar Coung Ngo Committed by Ezekiel Kigbo

Improve headings structure on Iterations page

parent ab4e3d10
......@@ -11,6 +11,7 @@ import {
GlTable,
GlTooltipDirective,
} from '@gitlab/ui';
import { kebabCase } from 'lodash';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import { isScopedLabel } from '~/lib/utils/common_utils';
import { __, n__, sprintf } from '~/locale';
......@@ -175,10 +176,13 @@ export default {
nextPage() {
return Number(this.issues.pageInfo.hasNextPage);
},
sectionName() {
heading() {
return this.label.title
? sprintf(__('Issues with label %{label}'), { label: this.label.title })
: __('Issues');
: __('All issues');
},
headingId() {
return kebabCase(this.heading);
},
badgeAriaLabel() {
return n__('%d issue', '%d issues', this.issues.count);
......@@ -228,7 +232,9 @@ export default {
</script>
<template>
<section :aria-label="sectionName">
<section :aria-labelledby="headingId">
<h4 :id="headingId" class="gl-sr-only">{{ heading }}</h4>
<gl-alert v-if="error" variant="danger" @dismiss="error = ''">
{{ error }}
</gl-alert>
......@@ -265,8 +271,8 @@ export default {
:items="issues.list"
:fields="$options.fields"
:empty-text="__('No issues found')"
:show-empty="true"
fixed
show-empty
stacked="sm"
:tbody-tr-class="tbodyTrClass"
data-qa-selector="iteration_issues_container"
......
......@@ -135,7 +135,7 @@ export default {
<gl-tabs>
<gl-tab title="Issues">
<template #title>
{{ __('Issues') }}
<h3 class="gl-font-base gl-m-0">{{ __('Issues') }}</h3>
<gl-badge class="gl-ml-2" size="sm" variant="muted">{{ issueCount }}</gl-badge>
</template>
......
......@@ -34,6 +34,8 @@ describe('Iterations report issues', () => {
const findGlSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
const findGlPagination = () => wrapper.findComponent(GlPagination);
const findGlTable = () => wrapper.findComponent(GlTable);
const findHeading = () => wrapper.find('h4');
const findSection = () => wrapper.find('section');
const mountComponent = ({
props = defaultProps,
......@@ -272,10 +274,14 @@ describe('Iterations report issues', () => {
});
});
it('has section name which mentions the label', () => {
expect(wrapper.find('section').attributes('aria-label')).toBe(
`Issues with label ${label.title}`,
);
it('has heading (that contains the label) that is visually hidden', () => {
expect(findHeading().text()).toBe(`Issues with label ${label.title}`);
expect(findHeading().classes('gl-sr-only')).toBe(true);
});
it('has section that is labelled by the heading', () => {
const headingId = findHeading().attributes('id');
expect(findSection().attributes('aria-labelledby')).toBe(headingId);
});
it('shows button to expand/collapse the table', () => {
......@@ -314,8 +320,14 @@ describe('Iterations report issues', () => {
mountComponent();
});
it('has section name which does not mention a label', () => {
expect(wrapper.find('section').attributes('aria-label')).toBe('Issues');
it('has heading that is visually hidden', () => {
expect(findHeading().text()).toBe('All issues');
expect(findHeading().classes('gl-sr-only')).toBe(true);
});
it('has section that is labelled by the heading', () => {
const headingId = findHeading().attributes('id');
expect(findSection().attributes('aria-labelledby')).toBe(headingId);
});
it('hides button to expand/collapse the table', () => {
......
......@@ -37,7 +37,7 @@ RSpec.shared_examples 'iteration report group by label' do
end
it 'shows ungrouped issues when label `x` is clicked to remove it', :aggregate_failures do
within "section[aria-label=\"Issues with label #{label1.title}\"]" do
within 'section' do
click_button 'Remove label'
end
......
......@@ -3416,6 +3416,9 @@ msgstr ""
msgid "All groups and projects"
msgstr ""
msgid "All issues"
msgstr ""
msgid "All issues for this milestone are closed."
msgstr ""
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment