A11y accessible modals #290

microbit-mark · 2019-10-30T13:28:40Z

fixes https://github.com/microbit-foundation/platform-software-issue-tracker/issues/407
and fixes https://github.com/microbit-foundation/platform-software-issue-tracker/issues/519
does not include error modals

python-main.js

Co-Authored-By: Carlos Pereira Atencio <carlos@microbit.org>

…ythonEditor into a11y-modal-focus-update

microbit-carlos · 2019-10-30T17:36:46Z

Clicking inside the modals causes this "selected" effect:

Can this be avoided?

microbit-carlos · 2019-10-30T17:38:10Z

Fixed the issue with the table cells being selectable in this PR: microbit-mark#1

A11y: Table tds not selectable.

microbit-mark · 2019-10-31T08:42:11Z

We can use blur on that element. Have done so inline 02b67c6, but not sure if that's the best approach.

microbit-carlos · 2019-10-31T09:49:28Z

Might be better to just remove the focus CSS?
Btw, this branch has a couple of conflicts with master, better resolve them now while we are testing, so that we don't have to retest later.

microbit-mark · 2019-10-31T11:43:43Z

Have moved this to css and fixed the conflict

microbit-carlos · 2019-10-31T13:06:29Z

Snippets are not working on Safari, were they working before?

microbit-carlos · 2019-10-31T13:16:08Z

To avoid having something always focused when using the mouse, could we do this?

On modal open not focus any of the elements
When the tab key is pressed and about to an element outside the modal, focus the first element inside of the modal
Still rotate through the elements in the modal until closed

Alternatively, if we focus the element that we just edited to remove the focus CSS (01eb6dc) that would still have an element inside the modal focused and let users tab through the modal.

microbit-mark · 2019-11-01T10:15:55Z

Snippets are not working on Safari, were they working before?

I can't recreate in Safari 13.0.2. But Safari 12 exhibits the issue.

To avoid having something always focused when using the mouse...

I think good practice would be to pass the focus to the modal and trap it and show element focus if the user has entered the modal via keyboard. If they have used the mouse, don't show focus.

I have added a commit that focusses the div rather than the first selectable element

microbit-mark · 2019-11-01T13:53:40Z

@microbit-carlos syntax error I think 8367008 only Safari prior to 13 complained about it. :)

I've tried this in browserstack, can you test locally when you have a moment @microbit-carlos

microbit-carlos · 2019-11-01T14:00:48Z

It works! Looks like i accidentally deleted one bracket more than necessary, thanks Mark!

microbit-mark · 2019-11-01T14:07:20Z

Seem to have introduced another issue somewhere with the files help, now i've made it a button element

editor.html

python-main.js

microbit-carlos · 2019-11-04T10:43:48Z

@microbit-mark is this PR ready or are there still things to iron out?

microbit-mark · 2019-11-04T11:43:30Z

Ready :)

editor.html

microbit-carlos · 2019-11-04T16:48:21Z

editor.html

            </div>
            <div id="addFile">
              <div id="addFileHeader">
                <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ files-title }}</strong></h2>
              </div>
-              <div id="addFileHelp"><a class="action" id="files-expand-help"><i class="fa fa-info-circle" aria-hidden="true"> <span>{{ help-button }}</span></i></a></div>
+              <div id="addFileHelp">
+                <button aria-labelledby="add-files" aria-expanded="false" type="button" class="snippet-button" id="expandHelpPara"><i class="fa fa-info-circle"><span>{{ help-button }}</span></i></button>


I think font awesome expects no content inside the <i ...></i> element. Should the text be moved after the closing </i>?
Also, it looks like <span> is not required?

Should this not be updated as well?

python-main.js

microbit-carlos · 2019-11-04T16:58:02Z

static/css/style.css

+    outline: inherit;
+}
+.snippet-button:focus {
+  box-shadow: 0px 0px 5px 3px #FFCC33;


We will need a PR in python-editor for the foundation colours, could you prepare that as well?

I've pushed the branch up https://github.com/microbit-foundation/python-editor/tree/a11y-modal-focus, not sure specifically what changes to make

If FFCC33 is the upstream yellow we will need a new branch from python-editor overwriting in style-foundation.css the new classes setting this colour to the foundation yellow.
This needs to be a new branch from the python-editor master, as it's in a different file not present here.

microbit-carlos · 2019-11-04T17:03:20Z

static/css/style.css

+.save-button.py:focus {
+  box-shadow: 0px 0px 5px 3px #FFCC33;
+}
+


The number of spaces for the CSS in this file is a bit of a mess, but I think right now there is more classes using 4 spaces than 2. Could we update all new classes use to use 4 spaces as well?

I've added further spacing to the css to tidy up

Sorry, I meant the 4 spaces like this:

.save-button.py:focus { box-shadow: 0px 0px 5px 3px #FFCC33; }

To:

.save-button.py:focus { box-shadow: 0px 0px 5px 3px #FFCC33; }

microbit-carlos · 2019-11-04T17:06:13Z

This is shaping up fantastically, great work Mark!
What browsers has this been tested in its latest iteration?
Taking in consideration how difficult it was to get it working in Chrome and Safari at the same time I think there is a high risk of having issues in other browsers. So based on previous experiences I think we should test it in:

Safari
IE10
IE11
Edge (pre-chrome)
Firefox Windows
Firefox mac
Chrome

The testing should include opening the modals, iterating through the elements, activating a few of them with the keyboard, click on a couple of elements to ensure the click handlers are still working, and test at least one of the snippets with the keyboard and the mouse.

microbit-mark · 2019-11-05T16:50:24Z

Tests

opening the modals by tabbing to it and enter
iterating through the elements
activating a few of them with the keyboard
click on a couple of elements to ensure the click handlers are still working
test at least one of the snippets with the keyboard and the mouse.

✔️ Safari 13 Mac Mojave
✔️ Safari 12 Mac Mojave - Doesn't trap focus, can't focus on elements
✔️ ie10 Win 7
✔️ ie11 Win7
✔️ Edge 17 Win 10
✔️ FF 70 Win 10
✔️ FF 70 Mojave can't tab to open modals, all other checks pass
✔️ Chrome 78 Mojave
✔️ Chrome 78 Win 10

@microbit-carlos This works in all browsers, but for mac, full keyboard accessibility needs to be enabled and tabbing in safari

python-main.js

microbit-carlos · 2019-11-05T18:33:22Z

static/css/style.css

+    outline: inherit;
+}
+.snippet-button:focus {
+  box-shadow: 0px 0px 5px 3px #FFCC33;


If FFCC33 is the upstream yellow we will need a new branch from python-editor overwriting in style-foundation.css the new classes setting this colour to the foundation yellow.
This needs to be a new branch from the python-editor master, as it's in a different file not present here.

microbit-carlos · 2019-11-05T18:40:31Z

static/css/style.css

+.save-button.py:focus {
+  box-shadow: 0px 0px 5px 3px #FFCC33;
+}
+


Sorry, I meant the 4 spaces like this:

.save-button.py:focus { box-shadow: 0px 0px 5px 3px #FFCC33; }

To:

.save-button.py:focus { box-shadow: 0px 0px 5px 3px #FFCC33; }

microbit-carlos · 2019-11-05T18:42:05Z

editor.html

            </div>
            <div id="addFile">
              <div id="addFileHeader">
                <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ files-title }}</strong></h2>
              </div>
-              <div id="addFileHelp"><a class="action" id="files-expand-help"><i class="fa fa-info-circle" aria-hidden="true"> <span>{{ help-button }}</span></i></a></div>
+              <div id="addFileHelp">
+                <button aria-labelledby="add-files" aria-expanded="false" type="button" class="snippet-button" id="expandHelpPara"><i class="fa fa-info-circle"><span>{{ help-button }}</span></i></button>


Should this not be updated as well?

Co-Authored-By: Carlos Pereira Atencio <carlos@microbit.org>

editor.html

Co-Authored-By: Carlos Pereira Atencio <carlos@microbit.org>

microbit-carlos

Great work here Mark!
All good and ready for merge

microbit-mark · 2019-11-06T10:03:42Z

Have also added https://github.com/microbit-foundation/python-editor/pull/107 as per #290 (comment)

microbit-mark added 5 commits October 25, 2019 18:09

add modal focus

bef71b5

add css for to focus buttons

73015e0

Update python-main.js

a1885ae

trap focus in modal

a6bea62

trigger snippets on keypress

98c190f

microbit-carlos reviewed Oct 30, 2019

View reviewed changes

microbit-mark added 2 commits October 30, 2019 15:00

Update python-main.js

9145e5f

change key order

d250aa3

microbit-carlos reviewed Oct 30, 2019

View reviewed changes

python-main.js Outdated Show resolved Hide resolved

python-main.js Outdated Show resolved Hide resolved

python-main.js Outdated Show resolved Hide resolved

python-main.js Outdated Show resolved Hide resolved

microbit-mark and others added 8 commits October 30, 2019 15:34

seperate click and key events

12a2268

Update python-main.js

347e926

Co-Authored-By: Carlos Pereira Atencio <carlos@microbit.org>

Update python-main.js

c2e8ad2

Co-Authored-By: Carlos Pereira Atencio <carlos@microbit.org>

Update python-main.js

82a30bd

Co-Authored-By: Carlos Pereira Atencio <carlos@microbit.org>

Update python-main.js

531d897

Co-Authored-By: Carlos Pereira Atencio <carlos@microbit.org>

A11y: Table tds not selectable.

0e5f30f

Merge branch 'a11y-modal-focus' of https://github.com/microbit-mark/P…

5a17107

…ythonEditor into a11y-modal-focus-update

A11y: Fix main.py delete button to be semantically disabled.

01080ee

microbit-carlos and others added 4 commits October 30, 2019 18:41

A11y: Convert snippet triggers into buttons.

5756474

Merge pull request #1 from bbcmicrobit/a11y-modal-focus-update

482d577

A11y: Table tds not selectable.

A11y: use inbuilt accessibility of button element

ede80a1

A11y: prevent div focus on click

02b67c6

microbit-mark added 2 commits October 31, 2019 09:54

Merge branch 'master' into a11y-modal-focus

6da4e9e

a11y move inline focus to css

01eb6dc

A11y focus div element

9bfd802

fix selector

8367008

microbit-carlos reviewed Nov 1, 2019

View reviewed changes

editor.html Outdated Show resolved Hide resolved

microbit-carlos reviewed Nov 1, 2019

View reviewed changes

python-main.js Outdated Show resolved Hide resolved

fix aria labels and buttons

7c14061

microbit-carlos reviewed Nov 4, 2019

View reviewed changes

editor.html Outdated Show resolved Hide resolved

microbit-carlos reviewed Nov 4, 2019

View reviewed changes

python-main.js Outdated Show resolved Hide resolved

microbit-carlos reviewed Nov 4, 2019

View reviewed changes

python-main.js Outdated Show resolved Hide resolved

microbit-carlos reviewed Nov 4, 2019

View reviewed changes

microbit-carlos reviewed Nov 5, 2019

View reviewed changes

tidy up

7d9f5b2

microbit-mark force-pushed the a11y-modal-focus branch from a42c441 to 7d9f5b2 Compare November 6, 2019 07:51

Update python-main.js

a288273

Co-Authored-By: Carlos Pereira Atencio <carlos@microbit.org>

microbit-carlos reviewed Nov 6, 2019

View reviewed changes

editor.html Outdated Show resolved Hide resolved

Update editor.html

8c15192

Co-Authored-By: Carlos Pereira Atencio <carlos@microbit.org>

microbit-carlos approved these changes Nov 6, 2019

View reviewed changes

microbit-carlos merged commit 0ce5e3f into bbcmicrobit:master Nov 6, 2019

microbit-mark mentioned this pull request Dec 10, 2019

a11y: focus modals and esc closes err modal #310

Merged

A11y accessible modals #290

A11y accessible modals #290

Uh oh!

Conversation

microbit-mark commented Oct 30, 2019

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

microbit-carlos commented Oct 30, 2019

Uh oh!

microbit-carlos commented Oct 30, 2019

Uh oh!

microbit-mark commented Oct 31, 2019

Uh oh!

microbit-carlos commented Oct 31, 2019

Uh oh!

microbit-mark commented Oct 31, 2019

Uh oh!

microbit-carlos commented Oct 31, 2019

Uh oh!

microbit-carlos commented Oct 31, 2019

Uh oh!

microbit-mark commented Nov 1, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

microbit-mark commented Nov 1, 2019

Uh oh!

microbit-carlos commented Nov 1, 2019

Uh oh!

microbit-mark commented Nov 1, 2019

Uh oh!

Uh oh!

Uh oh!

microbit-carlos commented Nov 4, 2019

Uh oh!

microbit-mark commented Nov 4, 2019

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

microbit-mark Nov 5, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

microbit-carlos commented Nov 4, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

microbit-mark commented Nov 5, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tests

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

microbit-mark commented Nov 1, 2019 •

edited

Loading

microbit-mark Nov 5, 2019 •

edited

Loading

microbit-carlos commented Nov 4, 2019 •

edited

Loading

microbit-mark commented Nov 5, 2019 •

edited

Loading