From d4f8c1ad31bd8b8cc00b037900cad0d93f69bf4b Mon Sep 17 00:00:00 2001 From: 7PH Date: Fri, 3 Feb 2023 11:39:25 +0100 Subject: [PATCH] SONAR-18052 Improve rule details page accessibility --- server/sonar-web/src/main/js/app/theme.js | 1 + .../coding-rules/__tests__/CodingRules-it.ts | 18 +++++++------- .../js/apps/coding-rules/components/App.tsx | 9 +++++-- .../components/RuleDetailsMeta.tsx | 4 +--- .../__tests__/__snapshots__/App-test.tsx.snap | 15 ++++++++++-- .../RuleDetailsMeta-test.tsx.snap | 24 +++++++------------ .../src/main/js/apps/coding-rules/styles.css | 4 ++++ .../main/js/components/controls/buttons.css | 2 +- .../main/js/components/facet/FacetHeader.tsx | 7 +++++- .../main/js/components/search-navigator.css | 4 ++++ .../resources/org/sonar/l10n/core.properties | 1 + 11 files changed, 56 insertions(+), 33 deletions(-) diff --git a/server/sonar-web/src/main/js/app/theme.js b/server/sonar-web/src/main/js/app/theme.js index 5167a9c05d7..e0be09f66de 100644 --- a/server/sonar-web/src/main/js/app/theme.js +++ b/server/sonar-web/src/main/js/app/theme.js @@ -204,6 +204,7 @@ module.exports = { smallFontSize: '12px', mediumFontSize: '14px', bigFontSize: '16px', + veryBigFontSize: '18px', hugeFontSize: '24px', giganticFontSize: '36px', diff --git a/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts b/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts index 0827c6109bf..900194d53cd 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts +++ b/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts @@ -52,7 +52,7 @@ it('should select rules with keyboard navigation', async () => { listitem = await screen.findByRole('listitem', { current: true }); expect(within(listitem).getByRole('link', { name: 'Awsome java rule' })).toBeInTheDocument(); await user.keyboard('{ArrowRight}'); - expect(screen.getByRole('heading', { level: 3, name: 'Awsome java rule' })).toBeInTheDocument(); + expect(screen.getByRole('heading', { level: 1, name: 'Awsome java rule' })).toBeInTheDocument(); await user.keyboard('{ArrowLeft}'); listitem = await screen.findByRole('listitem', { current: true }); expect(within(listitem).getByRole('link', { name: 'Awsome java rule' })).toBeInTheDocument(); @@ -67,7 +67,7 @@ it('should open with permalink', async () => { it('should show open rule with default description section', async () => { renderCodingRulesApp(undefined, 'coding_rules?open=rule1'); expect( - await screen.findByRole('heading', { level: 3, name: 'Awsome java rule' }) + await screen.findByRole('heading', { level: 1, name: 'Awsome java rule' }) ).toBeInTheDocument(); expect(document.title).toEqual('coding_rule.page.Java.Awsome java rule'); expect(screen.getByText('Why')).toBeInTheDocument(); @@ -77,7 +77,7 @@ it('should show open rule with default description section', async () => { it('should show open rule with no description', async () => { renderCodingRulesApp(undefined, 'coding_rules?open=rule6'); expect( - await screen.findByRole('heading', { level: 3, name: 'Bad Python rule' }) + await screen.findByRole('heading', { level: 1, name: 'Bad Python rule' }) ).toBeInTheDocument(); expect(screen.getByText('issue.external_issue_description.Bad Python rule')).toBeInTheDocument(); }); @@ -85,7 +85,7 @@ it('should show open rule with no description', async () => { it('should show hotspot rule section', async () => { const user = userEvent.setup(); renderCodingRulesApp(undefined, 'coding_rules?open=rule2'); - expect(await screen.findByRole('heading', { level: 3, name: 'Hot hotspot' })).toBeInTheDocument(); + expect(await screen.findByRole('heading', { level: 1, name: 'Hot hotspot' })).toBeInTheDocument(); expect(screen.getByText('Introduction to this rule')).toBeInTheDocument(); expect( screen.getByRole('tab', { @@ -115,7 +115,7 @@ it('should show rule advanced section', async () => { const user = userEvent.setup(); renderCodingRulesApp(undefined, 'coding_rules?open=rule5'); expect( - await screen.findByRole('heading', { level: 3, name: 'Awsome Python rule' }) + await screen.findByRole('heading', { level: 1, name: 'Awsome Python rule' }) ).toBeInTheDocument(); expect(screen.getByText('Introduction to this rule')).toBeInTheDocument(); expect( @@ -141,7 +141,7 @@ it('should show rule advanced section with context', async () => { const user = userEvent.setup(); renderCodingRulesApp(undefined, 'coding_rules?open=rule7'); expect( - await screen.findByRole('heading', { level: 3, name: 'Python rule with context' }) + await screen.findByRole('heading', { level: 1, name: 'Python rule with context' }) ).toBeInTheDocument(); expect( screen.getByRole('tab', { @@ -189,7 +189,7 @@ it('should be able to extend the rule description', async () => { handler.setIsAdmin(); renderCodingRulesApp(undefined, 'coding_rules?open=rule5'); expect( - await screen.findByRole('heading', { level: 3, name: 'Awsome Python rule' }) + await screen.findByRole('heading', { level: 1, name: 'Awsome Python rule' }) ).toBeInTheDocument(); // Add @@ -381,7 +381,7 @@ it('should show notification for rule advanced section and remove it after user const user = userEvent.setup(); renderCodingRulesApp(mockLoggedInUser(), 'coding_rules?open=rule8'); await screen.findByRole('heading', { - level: 3, + level: 1, name: 'Awesome Python rule with education principles', }); expect( @@ -426,7 +426,7 @@ it('should show notification for rule advanced section and removes it when user renderCodingRulesApp(mockLoggedInUser(), 'coding_rules?open=rule8'); await screen.findByRole('heading', { - level: 3, + level: 1, name: 'Awesome Python rule with education principles', }); expect( diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx index db284a398d9..c69234ee29c 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx @@ -575,7 +575,11 @@ export class App extends React.PureComponent {
{({ top }) => ( -
+
{ />
-
+ )} @@ -653,6 +657,7 @@ export class App extends React.PureComponent { /> ) : ( <> +

{translate('list_of_rules')}

    {rules.map((rule) => ( { )}
-

- {ruleDetails.name} -

+

{ruleDetails.name}

{hasTypeData && ( diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/App-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/App-test.tsx.snap index 58ab4ac91cd..08da9918375 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/App-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/App-test.tsx.snap @@ -101,7 +101,8 @@ exports[`renderBulkButton should show bulk change button when user has global ad `; exports[`should render correctly: loaded (ScreenPositionHelper) 1`] = ` -
- + `; exports[`should render correctly: loaded 1`] = ` @@ -267,6 +268,11 @@ exports[`should render correctly: loaded 1`] = `
+

+ list_of_rules +

    +

    + list_of_rules +

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleDetailsMeta-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleDetailsMeta-test.tsx.snap index 9deaf6ffae9..f2e2b7c283c 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleDetailsMeta-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleDetailsMeta-test.tsx.snap @@ -46,13 +46,11 @@ exports[`should display right meta info 1`] = ` } /> -

- - Deprecated code should be removed - -

+ Deprecated code should be removed +