Added alt descriptions to a few icon and images #15265

j264415 · 2023-10-12T12:55:03Z

This PR is to replace the #14320 addressing the requested changes from @isabela-pf and @gabalafou feedback from that PR.

References

#14320 Add more alt text descriptions

Code changes

These are the additional changes made :

Made changes to packages/apputils/src/dialog.tsx line 390 by changing the kernelIconURL alt tag to <img src={kernelIconUrl} alt={trans.__('Project Jupyter')} /> per @isabela-pf request.
Removed the title from the arguments that is being passed into _initSvg that were asked for from @gabalafou in the packages/ui-components/src/icon/labicon.tsx line 552 and 825.

This PR also retains the changes from #14320:

Added alt and title description to images and icons

User-facing changes

Icons and images have descriptive labels when you hover over them these will also be picked up by screenreaders.

Backwards-incompatible changes

None

jupyterlab-probot · 2023-10-12T12:55:06Z

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

j264415 · 2023-10-16T11:31:21Z

please update galata snapshots

packages/launcher/src/widget.tsx

packages/help-extension/src/index.tsx

packages/ui-components/src/icon/labicon.tsx

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

packages/help-extension/src/index.tsx

packages/launcher/src/widget.tsx

gabalafou · 2023-11-02T15:38:24Z

packages/launcher/src/widget.tsx

+            <img
+              src={item.kernelIconUrl}
+              className="jp-Launcher-kernelIcon"
+              alt={trans.__('Kernel Icon')}


Same: what is the rationale for not setting alt=""?

The reason alt is not an empty string is because we believe it is not a decorative element and adds value to the end users.

In the accessibility call today, we discussed a scenario in which the text description that a kernel provides to describe itself might make it unclear in the launcher that it is a kernel. Imagine a kernel called Coconut that labels itself as just "Coconut." In that case, it might be helpful to a screen reader to announce the launcher card as "Kernel Icon coconut".

We also discussed some alternative in the call. What if the alt text were something like "Create new notebook using kernel", so then the full accessible text for a Python 3 ipykernal notebook launcher card would read like so: "Create new notebook using kernel Python 3 (ipykernel)". That seems a bit verbose to me but clear.

My chief concern in asking these questions is to avoid a common pitfall, which is: in our desire to make things better for disabled users, we actually make them worse. I want to try to avoid that.

Hi @gabalafou your comment makes sense and I completely understand where you are coming from. Thanks for the feedback. I have made the change that you have recommended for the alt text being "Create new notebook using kernel".

packages/ui-components/src/icon/labicon.tsx

…into add-alt-descriptions

packages/apputils/src/dialog.tsx

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

krassowski

Thank you @j264415, this looks good from my side.

packages/launcher/src/widget.tsx

Co-authored-by: gabalafou <gabriel@fouasnon.com>

gabalafou · 2023-11-03T10:23:54Z

packages/apputils/src/dialog.tsx

@@ -875,6 +875,7 @@ export namespace Dialog {
                  iconClass="jp-Icon"
                  className="jp-ToolbarButtonComponent-icon"
                  tag="span"
+                  title={trans.__('Close dialog')}


Testing this last night, I realized that this "x" button already had an accessible name: "Cancel". See line 870 above. I don't understand the rationale for adding an additional title here because we end up with the following HTML tree structure:

button title=Cancel span title=Close dialog svg

So would you recommend I take out the additional title on line 878.

Perhaps.

But I'm also really trying to understand what led you to change this line in the first place. When you were working in the UI, was your assistive tech not picking up the "Cancel" title? I'm very curious to know if you were using some OS + screen reader combination that wasn't picking up the title attribute of the button or something like that. Or if there was some other underlying reason. It would be good to have as much information as possible in order to make the best decision.

Hi, just tested this with the screen reader, to see if the title="close dialog" was needed and it wasn't needed after all as it was already picking up the title="cancel" ; so I have take it out.

Clearing my review for now to avoid confusion as Gabriel raised some important points

fcollonval

Thanks @j264415

I have a minor comment. After that this is good to go.

packages/launcher/src/widget.tsx

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

j264415 · 2023-11-28T14:38:15Z

Thanks @j264415

I have a minor comment. After that this is good to go.

Hi @fcollonval all done!

fcollonval

Thanks

* upstream/main: (7628 commits) Adopt ruff format (jupyterlab#15499) Bump scipy from 1.11.3 to 1.11.4 (jupyterlab#15474) [pre-commit.ci] pre-commit autoupdate (jupyterlab#15491) Pin `actions/labeler` to v4 to fix failing CI action (jupyterlab#15496) Add npm provenance issue to the list of release postmortems (jupyterlab#15493) Fix URLs in debugger-extension (jupyterlab#15462) Bump tj-actions/changed-files from 40.0.2 to 40.2.0 (jupyterlab#15471) Bump dessant/lock-threads from 4 to 5 (jupyterlab#15472) Bump pandas from 2.1.2 to 2.1.3 (jupyterlab#15473) Bump actions/github-script from 6 to 7 (jupyterlab#15470) Bump matplotlib from 3.7.2 to 3.8.2 (jupyterlab#15475) Bump rjsf to 5.13.4 (jupyterlab#15469) Don't play with the focus when handling focus event (jupyterlab#15408) [ci skip] Publish 4.1.0a4 Updated light theme visited link colour to make text visible (jupyterlab#15406) Load custom CSS functionality and documentation (jupyterlab#14743) Added alt descriptions to a few icon and images (jupyterlab#15265) More robust galata/UI tests (jupyterlab#15355) Fix Shift + L not working in stdin (jupyterlab#15440) Upgrade releaser workflows for silent support (jupyterlab#15446) ...

changes to addresses feedback from ticket referenced

cc49f17

j264415 changed the title ~~addition of alt description part 2~~ addition of alt description Oct 12, 2023

github-actions bot added pkg:launcher pkg:help pkg:apputils pkg:ui-components labels Oct 12, 2023

github-actions bot assigned j264415 Oct 12, 2023

j264415 changed the title ~~addition of alt description~~ Addition of alt descriptions Oct 12, 2023

j264415 and others added 3 commits October 12, 2023 13:18

fixed spelling of Kernel

9c574ec

Merge branch 'jupyterlab:main' into add-alt-descriptions

4b9e8ec

Merge branch 'jupyterlab:main' into add-alt-descriptions

66b0c51

j264415 changed the title ~~Addition of alt descriptions~~ Added alt descriptions to Icon and Images Oct 16, 2023

j264415 marked this pull request as ready for review October 16, 2023 10:27

j264415 added 2 commits October 18, 2023 10:44

Merge branch 'jupyterlab:main' into add-alt-descriptions

2e6e6ae

Merge branch 'jupyterlab:main' into add-alt-descriptions

92ebf45

tonyfast reviewed Oct 30, 2023

View reviewed changes

packages/launcher/src/widget.tsx Show resolved Hide resolved

Merge branch 'jupyterlab:main' into add-alt-descriptions

7e8c67b

krassowski added enhancement tag:Accessibility labels Nov 2, 2023

krassowski mentioned this pull request Nov 2, 2023

Add more alt text descriptions #14320

Closed

krassowski requested changes Nov 2, 2023

View reviewed changes

packages/help-extension/src/index.tsx Outdated Show resolved Hide resolved

packages/ui-components/src/icon/labicon.tsx Outdated Show resolved Hide resolved

Update packages/help-extension/src/index.tsx

82369cd

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

gabalafou reviewed Nov 2, 2023

View reviewed changes

github-actions bot removed the pkg:ui-components label Nov 2, 2023

j264415 added 3 commits November 2, 2023 16:02

added titlesvg back in

d58d438

Merge branch 'add-alt-descriptions' of github.com:j264415/jupyterlab …

d73663a

…into add-alt-descriptions

reverte changes back

5a75413

github-actions bot added the pkg:ui-components label Nov 2, 2023

github-actions bot removed the pkg:ui-components label Nov 2, 2023

krassowski reviewed Nov 2, 2023

View reviewed changes

packages/apputils/src/dialog.tsx Outdated Show resolved Hide resolved

j264415 and others added 3 commits November 2, 2023 16:55

added title back in again

6747f4e

Update packages/apputils/src/dialog.tsx

2a640b5

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

changed title to dialog

3ce6ba3

krassowski added this to the 4.1.0 milestone Nov 2, 2023

krassowski previously approved these changes Nov 2, 2023

View reviewed changes

gabalafou reviewed Nov 2, 2023

View reviewed changes

packages/launcher/src/widget.tsx Outdated Show resolved Hide resolved

Update packages/launcher/src/widget.tsx

ac0f716

Co-authored-by: gabalafou <gabriel@fouasnon.com>

gabalafou reviewed Nov 3, 2023

View reviewed changes

github-actions bot removed the pkg:apputils label Nov 3, 2023

j264415 and others added 3 commits November 3, 2023 13:41

made changes from feedback

2765747

Merge branch 'jupyterlab:main' into add-alt-descriptions

d5a79cc

Merge branch 'jupyterlab:main' into add-alt-descriptions

8e328d8

j264415 requested review from gabalafou and krassowski November 13, 2023 14:57

j264415 added 3 commits November 13, 2023 17:34

Merge branch 'jupyterlab:main' into add-alt-descriptions

6215a2c

Merge branch 'jupyterlab:main' into add-alt-descriptions

87adb2d

Merge branch 'jupyterlab:main' into add-alt-descriptions

e37a1b1

fcollonval reviewed Nov 28, 2023

View reviewed changes

packages/launcher/src/widget.tsx Outdated Show resolved Hide resolved

Update packages/launcher/src/widget.tsx

ad17fc6

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

fcollonval approved these changes Nov 28, 2023

View reviewed changes

Merge branch 'jupyterlab:main' into add-alt-descriptions

d711e4b

krassowski changed the title ~~Added alt descriptions to Icon and Images~~ Added alt descriptions to a few icon and images Nov 29, 2023

krassowski merged commit 937bdc3 into jupyterlab:main Nov 29, 2023
76 of 78 checks passed

m158261 mentioned this pull request Nov 30, 2023

JupyterLab/Lumino Accessibility Demo Branches t03857785/jupyterlab#12

Open

krassowski mentioned this pull request Apr 15, 2024

Incorrect use of aria-hidden with LabIcon in launcher #16167

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added alt descriptions to a few icon and images #15265

Added alt descriptions to a few icon and images #15265

j264415 commented Oct 12, 2023 •

edited

jupyterlab-probot bot commented Oct 12, 2023

j264415 commented Oct 16, 2023

gabalafou Nov 2, 2023

j264415 Nov 2, 2023

gabalafou Nov 2, 2023

j264415 Nov 3, 2023 •

edited

krassowski left a comment

gabalafou Nov 3, 2023

j264415 Nov 3, 2023

gabalafou Nov 3, 2023

j264415 Nov 3, 2023

fcollonval left a comment

j264415 commented Nov 28, 2023

fcollonval left a comment

Added alt descriptions to a few icon and images #15265

Added alt descriptions to a few icon and images #15265

Conversation

j264415 commented Oct 12, 2023 • edited

References

Code changes

User-facing changes

Backwards-incompatible changes

jupyterlab-probot bot commented Oct 12, 2023

j264415 commented Oct 16, 2023

gabalafou Nov 2, 2023

Choose a reason for hiding this comment

j264415 Nov 2, 2023

Choose a reason for hiding this comment

gabalafou Nov 2, 2023

Choose a reason for hiding this comment

j264415 Nov 3, 2023 • edited

Choose a reason for hiding this comment

krassowski left a comment

Choose a reason for hiding this comment

gabalafou Nov 3, 2023

Choose a reason for hiding this comment

j264415 Nov 3, 2023

Choose a reason for hiding this comment

gabalafou Nov 3, 2023

Choose a reason for hiding this comment

j264415 Nov 3, 2023

Choose a reason for hiding this comment

fcollonval left a comment

Choose a reason for hiding this comment

j264415 commented Nov 28, 2023

fcollonval left a comment

Choose a reason for hiding this comment

j264415 commented Oct 12, 2023 •

edited

j264415 Nov 3, 2023 •

edited