-
Notifications
You must be signed in to change notification settings - Fork 734
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
a11y: impress: screen reader support for text shape editing
Now accessibility support can be enabled in Impress. Created cypress tests for editable area in Impress Signed-off-by: Marco Cecchetti <[email protected]> Change-Id: Ia2fd4e55bce3785320ec0cc9f31a6d7550ca3a82
- Loading branch information
1 parent
dda49b0
commit 022e32e
Showing
6 changed files
with
181 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
165 changes: 165 additions & 0 deletions
165
cypress_test/integration_tests/desktop/impress/editable_area_spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,165 @@ | ||
| /* global describe expect it cy beforeEach require afterEach Cypress */ | ||
|
|
||
| var helper = require('../../common/helper'); | ||
| var desktopHelper = require('../../common/desktop_helper'); | ||
| var impressHelper = require('../../common/impress_helper'); | ||
| var ceHelper = require('../../common/contenteditable_helper'); | ||
|
|
||
|
|
||
| function selectTextShape(i) { | ||
| cy.log('Selecting text shape - start.'); | ||
| if (typeof i !== 'number' || i <= 0 || i > 2) | ||
| return; | ||
|
|
||
| var n = 2; | ||
| var parts = n + 1; | ||
|
|
||
| // Click on the top-center of the slide to select the text shape there | ||
| cy.cGet('#document-container') | ||
| .then(function(items) { | ||
| expect(items).to.have.length(1); | ||
| var XPos = (items[0].getBoundingClientRect().left + items[0].getBoundingClientRect().right) / 2; | ||
| var YPos = i * (items[0].getBoundingClientRect().top + items[0].getBoundingClientRect().bottom) / parts; | ||
| cy.cGet('body').click(XPos, YPos); | ||
| }); | ||
|
|
||
| cy.cGet('.leaflet-drag-transform-marker').should($el => { expect(Cypress.dom.isDetached($el)).to.eq(false); }).should('be.visible'); | ||
| cy.cGet('.leaflet-pane.leaflet-overlay-pane svg g path.leaflet-interactive').should('exist'); | ||
| cy.log('Selecting text shape - end.'); | ||
| } | ||
|
|
||
| describe(['taga11yenabled'], 'Editable area - Basic typing and caret moving', function() { | ||
| var testFileName = 'two_text_shapes.odp'; | ||
|
|
||
| beforeEach(function () { | ||
| helper.beforeAll(testFileName, 'impress'); | ||
| desktopHelper.switchUIToCompact(); | ||
| cy.cGet('#toolbar-up > .w2ui-scroll-right').click(); | ||
| cy.cGet('#tb_editbar_item_modifypage').click(); | ||
| cy.cGet('div.clipboard').as('clipboard'); | ||
| }); | ||
|
|
||
| afterEach(function () { | ||
| helper.afterAll(testFileName, this.currentTest.state); | ||
| }); | ||
|
|
||
| it('Editing top text shape', function () { | ||
| // select shape and activate editing | ||
| selectTextShape(1); | ||
| impressHelper.selectTextOfShape(false); | ||
| // initial position | ||
| ceHelper.checkHTMLContent(''); | ||
| ceHelper.checkCaretPosition(0); | ||
| // typing | ||
| ceHelper.type('Hello World'); | ||
| ceHelper.checkHTMLContent('Hello World'); | ||
| ceHelper.checkCaretPosition(11); | ||
| // remove shape selection | ||
| impressHelper.removeShapeSelection(); | ||
| ceHelper.checkHTMLContent(''); | ||
| // activate editing again | ||
| selectTextShape(1); | ||
| impressHelper.selectTextOfShape(false); | ||
| ceHelper.checkPlainContent('Hello World'); | ||
| ceHelper.moveCaret('end'); | ||
| ceHelper.checkCaretPosition(11); | ||
| impressHelper.removeShapeSelection(); | ||
| }); | ||
|
|
||
| it('Deleting text', function () { | ||
| // select shape and activate editing | ||
| selectTextShape(1); | ||
| impressHelper.selectTextOfShape(false); | ||
| // initial position | ||
| ceHelper.checkHTMLContent(''); | ||
| ceHelper.checkCaretPosition(0); | ||
| // typing | ||
| ceHelper.type('Hello World'); | ||
| ceHelper.checkHTMLContent('Hello World'); | ||
| ceHelper.checkCaretPosition(11); | ||
| // backspace | ||
| ceHelper.moveCaret('left', '', 4); | ||
| ceHelper.type('{backspace}'); | ||
| ceHelper.checkPlainContent('Hello orld'); | ||
| ceHelper.checkCaretPosition(6); | ||
| // delete | ||
| ceHelper.moveCaret('left', '', 4); | ||
| ceHelper.type('{del}'); | ||
| ceHelper.checkPlainContent('Helo orld'); | ||
| ceHelper.checkCaretPosition(2); | ||
| impressHelper.removeShapeSelection(); | ||
| }); | ||
|
|
||
| it('Editing bottom text shape', function () { | ||
| // select shape and activate editing | ||
| selectTextShape(2); | ||
| impressHelper.selectTextOfShape(false); | ||
| // initial position | ||
| ceHelper.checkHTMLContent(''); | ||
| ceHelper.checkCaretPosition(0); | ||
| // typing | ||
| ceHelper.type('Hello World'); | ||
| ceHelper.checkHTMLContent('Hello World'); | ||
| ceHelper.checkCaretPosition(11); | ||
| impressHelper.removeShapeSelection(); | ||
| // activate editing again | ||
| selectTextShape(2); | ||
| impressHelper.selectTextOfShape(false); | ||
| ceHelper.checkPlainContent('Hello World'); | ||
| ceHelper.moveCaret('end'); | ||
| ceHelper.checkCaretPosition(11); | ||
| // typing paragraph 2 | ||
| ceHelper.type('{enter}'); | ||
| ceHelper.type('Green red'); | ||
| ceHelper.checkPlainContent('Green red'); | ||
| impressHelper.removeShapeSelection(); | ||
| // activate editing again | ||
| selectTextShape(2); | ||
| impressHelper.selectTextOfShape(false); | ||
| // navigating between paragraphs | ||
| ceHelper.checkPlainContent('Green red'); | ||
| ceHelper.moveCaret('up'); | ||
| ceHelper.checkPlainContent('Hello World'); | ||
| impressHelper.removeShapeSelection(); | ||
| }); | ||
|
|
||
| it('Editing both text shapes', function () { | ||
| // select top shape and activate editing | ||
| selectTextShape(1); | ||
| impressHelper.selectTextOfShape(false); | ||
| // initial position | ||
| ceHelper.checkHTMLContent(''); | ||
| ceHelper.checkCaretPosition(0); | ||
| // typing | ||
| ceHelper.type('Hello World'); | ||
| ceHelper.checkPlainContent('Hello World'); | ||
| ceHelper.checkCaretPosition(11); | ||
| // select bottom shape and activate editing | ||
| selectTextShape(2); | ||
| ceHelper.checkHTMLContent(''); | ||
| impressHelper.selectTextOfShape(false); | ||
| // typing | ||
| ceHelper.checkHTMLContent(''); | ||
| ceHelper.checkCaretPosition(0); | ||
| ceHelper.type('Green red'); | ||
| ceHelper.checkPlainContent('Green red'); | ||
| ceHelper.checkCaretPosition(9); | ||
| // select top shape and activate editing | ||
| selectTextShape(1); | ||
| ceHelper.checkHTMLContent(''); | ||
| impressHelper.selectTextOfShape(false); | ||
| ceHelper.checkPlainContent('Hello World'); | ||
| ceHelper.moveCaret('end'); | ||
| ceHelper.type(' Yellow'); | ||
| ceHelper.checkPlainContent('Hello World Yellow'); | ||
| // select bottom shape and activate editing | ||
| selectTextShape(2); | ||
| ceHelper.checkHTMLContent(''); | ||
| impressHelper.selectTextOfShape(false); | ||
| ceHelper.checkPlainContent('Green red'); | ||
| // remove shape selection | ||
| impressHelper.removeShapeSelection(); | ||
| ceHelper.checkHTMLContent(''); | ||
| }); | ||
|
|
||
| }); |