diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 3f8b99807..3f9f98248 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -30,7 +30,7 @@ jobs: run: yarn build - name: Upload Build as Artifact - uses: actions/upload-artifact@v2 + uses: actions/upload-artifact@v3 with: name: dist path: dist diff --git a/README.md b/README.md index 0eb534091..cbf50713b 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,8 @@ __The following are some examples of the diagrams, charts and graphs that can be ``` flowchart LR +title Example flow chart +accDescripton Flow chart showing examples of node usage A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] @@ -47,6 +49,8 @@ C -->|Two| E[Result 2] ``` ```mermaid flowchart LR +title Example flow chart +accDescripton Flow chart showing examples of node usage A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index dd521f779..c77c26109 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/cypress/integration/rendering/gantt.spec.js @@ -291,4 +291,36 @@ describe('Gantt diagram', () => { { gantt: { topAxis: true } } ); }); + + it('should render accessibility tags', function () { + const expectedTitle = 'Gantt Diagram'; + const expectedAccDescription = 'Tasks for Q4'; + renderGraph( + ` + gantt + title ${expectedTitle} + accDescription ${expectedAccDescription} + dateFormat YYYY-MM-DD + section Section + A task :a1, 2014-01-01, 30d + `, + {} + ); + cy.get('svg').should((svg) => { + const el = svg.get(0); + const children = Array.from(el.children); + + const titleEl = children.find(function (node) { + return node.tagName === 'title'; + }); + const descriptionEl = children.find(function (node) { + return node.tagName === 'desc'; + }); + + expect(titleEl).to.exist; + expect(titleEl.textContent).to.equal(expectedTitle); + expect(descriptionEl).to.exist; + expect(descriptionEl.textContent).to.equal(expectedAccDescription); + }); + }); }); diff --git a/cypress/integration/rendering/requirement.spec.js b/cypress/integration/rendering/requirement.spec.js index 0bf9014bf..aca990c42 100644 --- a/cypress/integration/rendering/requirement.spec.js +++ b/cypress/integration/rendering/requirement.spec.js @@ -46,4 +46,69 @@ describe('Requirement diagram', () => { ); cy.get('svg'); }); + + it('should render accessibility tags', function () { + const expectedTitle = 'Gantt Diagram'; + const expectedAccDescription = 'Tasks for Q4'; + renderGraph( + ` + requirementDiagram + title: ${expectedTitle} + accDescription: ${expectedAccDescription} + + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + functionalRequirement test_req2 { + id: 1.1 + text: the second test text. + risk: low + verifymethod: inspection + } + + performanceRequirement test_req3 { + id: 1.2 + text: the third test text. + risk: medium + verifymethod: demonstration + } + + element test_entity { + type: simulation + } + + element test_entity2 { + type: word doc + docRef: reqs/test_entity + } + + + test_entity - satisfies -> test_req2 + test_req - traces -> test_req2 + test_req - contains -> test_req3 + test_req <- copies - test_entity2 + `, + {} + ); + cy.get('svg').should((svg) => { + const el = svg.get(0); + const children = Array.from(el.children); + + const titleEl = children.find(function (node) { + return node.tagName === 'title'; + }); + const descriptionEl = children.find(function (node) { + return node.tagName === 'desc'; + }); + + expect(titleEl).to.exist; + expect(titleEl.textContent).to.equal(expectedTitle); + expect(descriptionEl).to.exist; + expect(descriptionEl.textContent).to.equal(expectedAccDescription); + }); + }); }); diff --git a/cypress/platform/gitgraph.html b/cypress/platform/gitgraph.html index 89689d86e..4bcd10f5d 100644 --- a/cypress/platform/gitgraph.html +++ b/cypress/platform/gitgraph.html @@ -26,24 +26,28 @@