FIX accessibility: make copy-to-clipboard icons "keyboard-operable" in HTML displays (scikit-learn#34429)

Author: DeaMariaLeon

doc/whats_new/upcoming_changes/sklearn.utils/34429.fix.rst

@@ -0,0 +1,5 @@
+- The copy-to-clipboard icons in the HTML representation of estimators are
+  now rendered as ``<button>`` elements with an ``aria-label`` and a visible
+  focus outline, instead of non-interactive ``<i>`` elements, so they are
+  reachable and usable with a keyboard and screen readers.
+  By :user:`Dea María Léon <deamarialeon>`.

sklearn/utils/_repr_html/features.py

@@ -22,15 +22,17 @@ def _features_html(features, is_fitted_css_class=""):
             <summary>
               <div class="arrow"></div>
               <div>{total_features_line}</div>
-              <div class="image-container" title="Copy output features (max 100)">
-                <i class="copy-paste-icon"
+              <div class="image-container">
+                <button type="button" class="copy-paste-icon"
+                  title="{copy_features_label}"
+                  aria-label="{copy_features_label}"
                   onclick="
                   event.stopPropagation();
                   event.preventDefault();
                   copyFeatureNamesToClipboard(this);
                   "
                 >
-                </i>
+                </button>
               </div>
             </summary>
             <div class="features-container">
@@ -50,6 +52,7 @@ def _features_html(features, is_fitted_css_class=""):
         </tr>
 
     """
+    copy_features_label = f"Copy output features (max {_MAX_DISPLAY_FEATURES})"
     total_features = len(features)
     display_features = features[:_MAX_DISPLAY_FEATURES]
 
@@ -68,5 +71,6 @@ def _features_html(features, is_fitted_css_class=""):
     return FEATURES_TABLE_TEMPLATE.format(
         total_features_line=total_features_line,
         is_fitted_css_class=html.escape(is_fitted_css_class),
+        copy_features_label=copy_features_label,
         rows="".join(rows),
     )

sklearn/utils/_repr_html/params.css

@@ -149,4 +149,12 @@ a.param-doc-link::before {
     width: 14px;
     height: 14px;
     cursor: pointer;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+}
+
+.copy-paste-icon:focus-visible {
+    outline: 1px solid currentColor;
+    outline-offset: 1px;
 }

sklearn/utils/_repr_html/params.py

@@ -50,10 +50,11 @@ def _params_html_repr(params):
 
     PARAM_ROW_TEMPLATE = """
         <tr class="{param_type}">
-            <td><i class="copy-paste-icon"
+            <td><button type="button" class="copy-paste-icon"
+                 aria-label="Copy {param_name} to clipboard"
                  onclick="copyToClipboard('{param_name}',
                           this.parentElement.nextElementSibling)"
-            ></i></td>
+            ></button></td>
             <td class="param">{param_display}</td>
             <td class="value">{param_value}</td>
         </tr>

sklearn/utils/_repr_html/tests/test_features.py

@@ -230,7 +230,7 @@ def test_features_html_structure():
     assert '<table class="features-table">' in html
     assert "<tbody>" in html
     assert "</tbody>" in html
-    assert '<i class="copy-paste-icon"' in html
+    assert '<button type="button" class="copy-paste-icon"' in html
     assert "copyFeatureNamesToClipboard" in html
 
 

sklearn/utils/_repr_html/tests/test_js.py

@@ -141,9 +141,11 @@ def test_force_theme(page, local_server, color, expected_theme):
                         <div class="features">
                             <details>
                                 <summary>
-                                    <div class="image-container"
-                                         title="Copy all output features">
-                                        <i class="copy-paste-icon"></i>
+                                    <div class="image-container">
+                                        <button type="button" class="copy-paste-icon"
+                                            title="Copy output features (max 100)"
+                                            aria-label="Copy output features (max 100)">
+                                        </button>
                                     </div>
                                 </summary>
                                 <div class="features-container">

sklearn/utils/_repr_html/tests/test_params.py

@@ -77,6 +77,18 @@ def test_params_html_repr():
     assert "estimator-table" in _params_html_repr(params)
 
 
+def test_params_html_repr_copy_button():
+    """Copy control renders as an accessible <button> with an aria-label."""
+    params = ParamsDict(params={"alpha": 1}, estimator_class="")
+    html_output = _params_html_repr(params)
+
+    copy_button = (
+        r'<button type="button" class="copy-paste-icon"'
+        r'\s*aria-label="Copy alpha to clipboard"'
+    )
+    assert re.search(copy_button, html_output, flags=re.DOTALL)
+
+
 def test_params_html_repr_with_doc_links():
     """Test `_params_html_repr` with valid and invalid doc links."""