Skip to content

Commit

Permalink
chore(Accessibility): Fix accessibility for 'Show x entries' dropdown…
Browse files Browse the repository at this point in the history
… in tables (apache#30818)
  • Loading branch information
LevisNgigi authored Nov 18, 2024
1 parent c6685a7 commit b84e525
Showing 1 changed file with 13 additions and 10 deletions.
23 changes: 13 additions & 10 deletions superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down

0 comments on commit b84e525

Please sign in to comment.