Details
-
Epic
-
Status: In Progress (View Workflow)
-
Major
-
Resolution: Unresolved
-
Accessibility-Config-UI-tables-to-div
-
Description
We would like to make Jenkins usable by as many people as possible. It includes multiple groups of users: people with disabilities, ones using mobile devices, or those with slow network connections. In general, all Jenkins users would benefit from better navigation and layouts. Currently the Jenkins's UI includes a lot of tables on configuration pages. These tables are very mobile hostile. The UI is also not in line with modern UIs.
Testing
- Quick-start: https://github.com/oleg-nenashev/jenkins-tabs-to-divs-config-migration-testenv
- Manual setup: docker run --rm -ti -p 8080:8080 -e ID=3895 jenkins/core-pr-tester
Examples
Here's one example from Windows 10's settings:
Note that the label for a field is above the field – not to the left of the field.
Here's a much older UI from Windows:
Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything). Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):
Attachments
Issue Links
- relates to
-
JENKINS-55787
Switch labels from entry to checkbox
-
- In Progress
-
Activity
| Field | Original Value | New Value |
|---|---|---|
| Link | This issue relates to JENKINS-55787 [ JENKINS-55787 ] |
| Assignee | Josh Soref [ jsoref ] |
| Summary | CLONE - Change Jenkins configuration UI from tables to divs | Change Jenkins configuration UI from tables to divs |
| Labels | accessibility ux ux-sig | accessibility roadmap ux ux-sig |
| Issue Type | Story [ 10002 ] | Epic [ 10001 ] |
| Epic Name | Accessibility-Config-UI-tables-to-div |
| Description |
Currently jenkins's jelly framework generates lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs. Here's one example from Windows 10's settings: !image-2019-02-12-15-44-44-739.png! Note that the label for a field is above the field – not to the left of the field. Here's a much older UI from Windows: !image-2019-02-12-15-45-51-351.png! Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything). Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10): !image-2019-02-12-15-46-51-006.png! I can provide examples from macOS, Maemo/MeeGo, and pretty much every system (including Chrome/Firefox/Android). I happen to be using a Windows 10 laptop today (snow day), but normally I use macOS / Android. |
We would like to make Jenkins usable by as many people as possible. It includes multiple groups of users: people with disabilities, ones using mobile devices, or those with slow network connections. In general, all Jenkins users would benefit from better navigation and layouts. Currently jenkins's jelly framework generates lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs. Here's one example from Windows 10's settings: !image-2019-02-12-15-44-44-739.png! Note that the label for a field is above the field – not to the left of the field. Here's a much older UI from Windows: !image-2019-02-12-15-45-51-351.png! Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything). Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10): !image-2019-02-12-15-46-51-006.png! I can provide examples from macOS, Maemo/MeeGo, and pretty much every system (including Chrome/Firefox/Android). I happen to be using a Windows 10 laptop today (snow day), but normally I use macOS / Android. |
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Description |
We would like to make Jenkins usable by as many people as possible. It includes multiple groups of users: people with disabilities, ones using mobile devices, or those with slow network connections. In general, all Jenkins users would benefit from better navigation and layouts. Currently jenkins's jelly framework generates lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs. Here's one example from Windows 10's settings: !image-2019-02-12-15-44-44-739.png! Note that the label for a field is above the field – not to the left of the field. Here's a much older UI from Windows: !image-2019-02-12-15-45-51-351.png! Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything). Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10): !image-2019-02-12-15-46-51-006.png! I can provide examples from macOS, Maemo/MeeGo, and pretty much every system (including Chrome/Firefox/Android). I happen to be using a Windows 10 laptop today (snow day), but normally I use macOS / Android. |
We would like to make Jenkins usable by as many people as possible. It includes multiple groups of users: people with disabilities, ones using mobile devices, or those with slow network connections. In general, all Jenkins users would benefit from better navigation and layouts. Currently the Jenkins's UI includes a lot of tables on configuration pages. These tables are very mobile hostile. The UI is also not in line with modern UIs. h2. Testing * Quick-start: [https://github.com/oleg-nenashev/jenkins-tabs-to-divs-config-migration-testenv] * Manual setup: {{docker run --rm -ti -p 8080:8080 -e ID=3895 jenkins/core-pr-tester}} h2. Examples Here's one example from Windows 10's settings: !image-2019-02-12-15-44-44-739.png|width=372,height=453! Note that the label for a field is above the field – not to the left of the field. Here's a much older UI from Windows: !image-2019-02-12-15-45-51-351.png|width=369,height=375! Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything). Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10): !image-2019-02-12-15-46-51-006.png|width=349,height=243! |
| Status | Open [ 1 ] | In Progress [ 3 ] |
| Labels | accessibility roadmap ux ux-sig | accessibility roa roadmap ux ux-sig |
| Labels | accessibility roa roadmap ux ux-sig | accessibility roadmap ux ux-sig |
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child | JENKINS-62803 [ 207020 ] |
| Epic Child | JENKINS-62804 [ 207021 ] |
| Epic Child |
|
| Epic Child |
|
| Epic Child | JENKINS-62807 [ 207025 ] |
| Epic Child |
|
| Status | In Progress [ 3 ] | Open [ 1 ] |
| Priority | Major [ 3 ] | Minor [ 4 ] |
| Priority | Minor [ 4 ] | Major [ 3 ] |
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
Esther Álvarez Feijoo
made changes -
| Epic Child | JENKINS-62822 [ 207046 ] |
| Epic Child |
|
| Epic Child |
|
| Epic Child | JENKINS-62826 [ 207050 ] |
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child | JENKINS-62845 [ 207071 ] |
| Epic Child | JENKINS-62846 [ 207072 ] |
| Epic Child | JENKINS-62847 [ 207073 ] |
| Epic Child | JENKINS-62848 [ 207074 ] |
| Epic Child | JENKINS-62849 [ 207075 ] |
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child | JENKINS-62853 [ 207079 ] |
| Epic Child | JENKINS-62854 [ 207080 ] |
| Epic Child | JENKINS-62855 [ 207081 ] |
| Epic Child | JENKINS-62856 [ 207082 ] |
| Epic Child | JENKINS-62857 [ 207083 ] |
| Epic Child | JENKINS-62858 [ 207084 ] |
| Epic Child | JENKINS-62859 [ 207085 ] |
| Epic Child | JENKINS-62860 [ 207086 ] |
| Epic Child | JENKINS-62861 [ 207087 ] |
| Epic Child | JENKINS-62862 [ 207088 ] |
| Epic Child |
|
| Epic Child | JENKINS-62864 [ 207090 ] |
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child | JENKINS-62859 [ 207085 ] |
| Epic Child | JENKINS-62860 [ 207086 ] |
| Epic Child | JENKINS-62861 [ 207087 ] |
| Epic Child | JENKINS-62862 [ 207088 ] |
| Epic Child |
|
| Epic Child | JENKINS-62864 [ 207090 ] |
| Epic Child | JENKINS-62858 [ 207084 ] |
| Epic Child | JENKINS-62857 [ 207083 ] |
| Epic Child | JENKINS-62856 [ 207082 ] |
| Epic Child | JENKINS-62855 [ 207081 ] |
| Epic Child | JENKINS-62854 [ 207080 ] |
| Epic Child | JENKINS-62853 [ 207079 ] |
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child | JENKINS-62902 [ 207225 ] |
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child | JENKINS-62909 [ 207232 ] |
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child | JENKINS-62916 [ 207240 ] |
| Epic Child |
|
| Epic Child | JENKINS-62918 [ 207242 ] |
| Epic Child |
|
| Epic Child |
|
| Epic Child | JENKINS-62822 [ 207046 ] |
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
Josh Soref
made changes -
| Status | Open [ 1 ] | In Progress [ 3 ] |
| Epic Child |
|
| Epic Child |
|
| Epic Child |
|
| Epic Child | JENKINS-64639 [ 209895 ] |
| Epic Child |
|
| Epic Child |
|
klinik
made changes -
| Epic Child | JENKINS-65778 [ 211535 ] |
klinik
made changes -
| Epic Child | JENKINS-65782 [ 211539 ] |
klinik
made changes -
| Epic Child | JENKINS-65784 [ 211541 ] |
klinik
made changes -
| Epic Child | JENKINS-65787 [ 211544 ] |
Markus Winter
made changes -
| Epic Child | JENKINS-65787 [ 211544 ] |
| Epic Child |
|
liang bin
made changes -
| Epic Child |
|