(superset) branch master updated: chore(Accessibility): Fix accessibility for 'Show x entries' dropdown in tables (#30818)

[diegopucci]

This is an automated email from the ASF dual-hosted git repository.

diegopucci pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new b84e5250f1 chore(Accessibility): Fix accessibility for 'Show x 
entries' dropdown in tables (#30818)
b84e5250f1 is described below

commit b84e5250f1abfc160d7ae43153685bb8ff1a9807
Author: Levis Mbote <111055098+levisng...@users.noreply.github.com>
AuthorDate: Mon Nov 18 20:25:42 2024 +0300

    chore(Accessibility): Fix accessibility for 'Show x entries' dropdown in 
tables (#30818)
---
 .../plugins/plugin-chart-table/src/TableChart.tsx  | 23 ++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx 
b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
index 390be57334..b9cc335a34 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
@@ -197,33 +197,36 @@ function SelectPageSize({
   onChange,
 }: SelectPageSizeRendererProps) {
   return (
-    <span className="dt-select-page-size form-inline">
-      {t('page_size.show')}{' '}
+    <span
+      className="dt-select-page-size form-inline"
+      role="group"
+      aria-label={t('Select page size')}
+    >
+      <label htmlFor="pageSizeSelect" className="sr-only">
+        {t('Select page size')}
+      </label>
+      {t('Show')}{' '}
       <select
+        id="pageSizeSelect"
         className="form-control input-sm"
         value={current}
-        onBlur={() => {}}
         onChange={e => {
           onChange(Number((e.target as HTMLSelectElement).value));
         }}
+        aria-label={t('Show entries per page')}
       >
         {options.map(option => {
           const [size, text] = Array.isArray(option)
             ? option
             : [option, option];
-          const sizeLabel = size === 0 ? t('all') : size;
           return (
-            <option
-              aria-label={t('Show %s entries', sizeLabel)}
-              key={size}
-              value={size}
-            >
+            <option key={size} value={size}>
               {text}
             </option>
           );
         })}
       </select>{' '}
-      {t('page_size.entries')}
+      {t('entries per page')}
     </span>
   );
 }