(zeppelin) branch master updated: [ZEPPELIN-6470] Add accessible names to icon-only buttons in the interpreter settings form

[ch...@apache.org]

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: 김예나 <10...@users.noreply.github.com>
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 <ch...@apache.org>
---
 .../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>