This is an automated email from the ASF dual-hosted git repository.
tbonelee pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/zeppelin.git
The following commit(s) were added to refs/heads/master by this push:
new 783e392034 [ZEPPELIN-6470] Add accessible names to icon-only buttons
in the interpreter settings form
783e392034 is described below
commit 783e39203458e6065b8da2fbcd0ad573b9c9bb4c
Author: κΉμλ <[email protected]>
AuthorDate: Tue Jul 28 00:50:25 2026 +0900
[ZEPPELIN-6470] Add accessible names to icon-only buttons in the
interpreter settings form
### What is this PR for?
The interpreter settings form in the New UI has six icon-only buttons whose
only child is an `<i nz-icon>` glyph. Without any text, `aria-label`, or
`title`, assistive technology has no accessible name to announce, so a screen
reader user just hears "button" with no indication of what it does. This fails
WCAG 2.1 success criterion 4.1.2 (Name, Role, Value).
This PR adds an `aria-label` to each of them in `item.component.html`:
* per-note process add / remove (`plus` / `minus`) in the process-mode
option block
* remove property / add property in the Properties table
* remove dependency / add dependency in the Dependencies table
`aria-label` is used rather than `nz-tooltip` because a tooltip depends on
hover and does not reliably set the accessible name in the accessibility tree,
so it would not satisfy 4.1.2 on its own.
The change is markup only: no logic changes and no visual changes. The
buttons look and behave exactly as before. Actions that already carry text
(Edit / Restart / Remove) and `<a>` links that already have text or a tooltip
are out of scope.
### What type of PR is it?
Improvement
### Todos
* [x] - Add aria-label to every icon-only button in item.component.html
### What is the Jira issue?
https://issues.apache.org/jira/browse/ZEPPELIN-6470
### How should this be tested?
`cd zeppelin-web-angular && npm run lint` passes (this repository has no
front-end unit-test infrastructure, so verification is via lint).
Optionally, open the interpreter settings page, expand an interpreter,
click `Edit`, and inspect the buttons in the browser accessibility tree. Each
should now report its action as the accessible name, for example "Add property"
or "Remove dependency".
### Screenshots (if appropriate)
No visual change.
### Questions:
* Does the license files need to update? No
* Is there breaking changes for older versions? No
* Does this needs documentation? No
Closes #5345 from kimyenac/ZEPPELIN-6470.
Signed-off-by: ChanHo Lee <[email protected]>
---
.../workspace/interpreter/item/item.component.html | 24 ++++++++++++++++++----
1 file changed, 20 insertions(+), 4 deletions(-)
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/interpreter/item/item.component.html
b/zeppelin-web-angular/src/app/pages/workspace/interpreter/item/item.component.html
index f38c936342..d54ae21ff5 100644
---
a/zeppelin-web-angular/src/app/pages/workspace/interpreter/item/item.component.html
+++
b/zeppelin-web-angular/src/app/pages/workspace/interpreter/item/item.component.html
@@ -213,11 +213,11 @@
mode !== 'view'
) {
@if (optionFormGroup.get('perNote')?.value === sessionOptionMap.shared) {
- <button nz-button (click)="setPerNoteOrUserOption('perNote',
'scoped')">
+ <button nz-button aria-label="Add per-note process"
(click)="setPerNoteOrUserOption('perNote', 'scoped')">
<i nz-icon nzType="plus" nzTheme="outline"></i>
</button>
} @else {
- <button nz-button (click)="setPerNoteOrUserOption('perNote',
'shared')">
+ <button nz-button aria-label="Remove per-note process"
(click)="setPerNoteOrUserOption('perNote', 'shared')">
<i nz-icon nzType="minus" nzTheme="outline"></i>
</button>
}
@@ -373,6 +373,7 @@
<td>
<button
class="transparent-button"
+ aria-label="Remove property"
(click)="removeProperty(i)"
nz-button
nzShape="circle"
@@ -429,7 +430,14 @@
<td>N/A</td>
}
<td>
- <button class="transparent-button" (click)="addProperties()"
nz-button nzShape="circle" nzSize="small">
+ <button
+ class="transparent-button"
+ aria-label="Add property"
+ (click)="addProperties()"
+ nz-button
+ nzShape="circle"
+ nzSize="small"
+ >
<i nz-icon nzType="plus" nzTheme="outline"></i>
</button>
</td>
@@ -471,6 +479,7 @@
<td>
<button
class="transparent-button"
+ aria-label="Remove dependency"
(click)="removeDependence(i)"
nz-button
nzShape="circle"
@@ -503,7 +512,14 @@
></textarea>
</td>
<td>
- <button class="transparent-button" (click)="addDependence()"
nz-button nzShape="circle" nzSize="small">
+ <button
+ class="transparent-button"
+ aria-label="Add dependency"
+ (click)="addDependence()"
+ nz-button
+ nzShape="circle"
+ nzSize="small"
+ >
<i nz-icon nzType="plus" nzTheme="outline"></i>
</button>
</td>
