Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Nov 18, 2024

Conversation

LevisNgigi
Copy link
Contributor

@LevisNgigi LevisNgigi commented Nov 1, 2024

SUMMARY

This PR addresses an accessibility issue in the table charts component of Apache Superset. The 'Show x entries' dropdown lacked proper form control labeling, which is essential for screen reader users. The label has been updated to ensure that it provides a clear and descriptive indication of its purpose, improving the overall accessibility of the feature.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Per page superset

TESTING INSTRUCTIONS

  1. Navigate to a table chart in Apache Superset.
  2. Locate the 'Show x entries' dropdown.
  3. Use a screen reader (e.g., NVDA or VoiceOver) to navigate to the dropdown.
  4. Verify that the screen reader announces the label correctly as "Show [number] entries," where [number] is the selected value.

ADDITIONAL INFORMATION

  • Has associated issue: Fixes Accessibility: Missing Form Control for Show x entries on Tables #30669
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

@dosubot dosubot bot added the design:accessibility Related to accessibility standards label Nov 1, 2024
Copy link
Contributor

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Congrats on making your first PR and thank you for contributing to Superset! 🎉 ❤️

We hope to see you in our Slack community too! Not signed up? Use our Slack App to self-register.

@sadpandajoe sadpandajoe added the hold! On hold label Nov 1, 2024
@sadpandajoe sadpandajoe added the preset:bounty Issues that have been selected by Preset and have a bounty attached. label Nov 1, 2024
@rusackas rusackas changed the title chore(Accessibility):Fix accessibility for 'Show x entries' dropdown in tables chore(Accessibility): Fix accessibility for 'Show x entries' dropdown in tables Nov 5, 2024
@geido
Copy link
Member

geido commented Nov 7, 2024

Hello @LevisNgigi you have a conflicting package-lock which I believe should not be there in the first place. Can you remove it?

From re-reading the issue description, it also seems that the goal was to make also the number of entires accessible, so that the label should read "Show X entries per page". Can we fix that?

Thank you!

@LevisNgigi
Copy link
Contributor Author

LevisNgigi commented Nov 7, 2024

Hello @LevisNgigi you have a conflicting package-lock which I believe should not be there in the first place. Can you remove it?

From re-reading the issue description, it also seems that the goal was to make also the number of entires accessible, so that the label should read "Show X entries per page". Can we fix that?

Thank you!

Yes I can remove it. Not sure how it appeared after fixing the lint issue. I have made changes. I have also deleted the package-lock file.

@pull-request-size pull-request-size bot added size/S and removed size/XS labels Nov 7, 2024
@geido
Copy link
Member

geido commented Nov 7, 2024

I still see the package-lock though. I think you can just get it from master and replace it locally so it matches.

@LevisNgigi
Copy link
Contributor Author

I still see the package-lock though. I think you can just get it from master and replace it locally so it matches.

Should be fixed now.

@rusackas
Copy link
Member

rusackas commented Nov 8, 2024

Running CI :)

@geido geido removed the hold! On hold label Nov 13, 2024
@geido
Copy link
Member

geido commented Nov 13, 2024

/testenv up

Copy link
Contributor

@geido Ephemeral environment spinning up at http://35.95.64.64:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

<select
className="form-control input-sm"
value={current}
onBlur={() => {}}
onChange={e => {
onChange(Number((e.target as HTMLSelectElement).value));
}}
aria-label={t('Show entries per page')}
Copy link
Member

@geido geido Nov 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it should be enough to have just this aria-label here and set the number of entries here (while removing the aria-label from the individual options). Otherwise, the screen reader is reading "Show 10 entries per page, Show entries per page" which I think it is unnecessary. Also, on Firefox, when inspecting for accessibility I am getting this:

Screenshot 2024-11-13 at 16 09 29

I believe we need to have a label that labels the Select input. We can probably change the structure a bit so to keep the same layout but have the proper Label element and accessibility properties. What do you think?

@geido geido added the hold! On hold label Nov 13, 2024
@geido
Copy link
Member

geido commented Nov 18, 2024

/testenv up

Copy link
Contributor

@geido Ephemeral environment spinning up at http://34.217.30.164:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

@geido geido removed the hold! On hold label Nov 18, 2024
@geido geido merged commit b84e525 into apache:master Nov 18, 2024
33 of 34 checks passed
Copy link
Contributor

Ephemeral environment shutdown and build artifacts deleted.

asher-lab added a commit to asher-lab/superset that referenced this pull request Nov 22, 2024
* fix: Exception handling for SQL Lab views (apache#30897)

* fix: don't show metadata for embedded dashboards (apache#30875)

* feat: add logging durations for screenshot async service (apache#30884)

* refactor(Avatar): Migrate Avatar to Ant Design 5 (apache#30740)

* refactor(input): Migrate Input component to Ant Design 5 (apache#30730)

* fix(empty dashboards): Allow downloading a screenshot of an empty dashboard (apache#30767)

Co-authored-by: Geido <[email protected]>

* chore(ci): add tai and michael to helm owners (apache#30925)

* fix(helm): use submodule on helm release action (apache#30924)

* docs: add Free2Move to INTHEWILD.md (apache#30930)

* fix: blocks UI elements on right side (apache#30886)

Co-authored-by: Evan Rusackas <[email protected]>

* chore(deps): Migrate from `crate[sqlalchemy]` to `sqlalchemy-cratedb` (apache#29243)

* chore: update change log, UPDATING.md and bug-report.yml for 4.1 release (apache#30915)

* chore(docs): Update list of supported databases to include CrateDB (apache#30946)

* feat(trino,presto): add missing time grains (apache#30926)

* fix(Dashboard): Exclude edit param in async screenshot (apache#30962)

* fix(Card): Use correct class names for Ant Design 5 Card component (apache#30964)

* chore(Accessibility): Fix accessibility for 'Show x entries' dropdown in tables (apache#30818)

* build(deps): bump cross-spawn from 7.0.3 to 7.0.6 in /superset-frontend/cypress-base (apache#30969)

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* fix(release validation): scripts now support RSA and EDDSA keys. (apache#30967)

* build(deps): bump cross-spawn from 7.0.3 to 7.0.6 in /docs (apache#30970)

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore: add performance information to tooltip (apache#30948)

* fix(helm-chart): Fix broken PodDisruptionBudget due to introduction of extraLabels. (apache#30966)

* chore(helm): bumping app version to 4.1.1 in helm chart (apache#30918)

* chore: add unit tests for `is_mutating()` (apache#31021)

* chore(🦾): bump python numexpr 2.10.0 -> 2.10.1 (apache#31006)

Co-authored-by: GitHub Action <[email protected]>

* chore(🦾): bump python cffi 1.16.0 -> 1.17.1 (apache#31002)

Co-authored-by: GitHub Action <[email protected]>

* chore(🦾): bump python flask-babel subpackage(s) (apache#31000)

Co-authored-by: GitHub Action <[email protected]>

* fix(Dashboard): Retain colors when color scheme not set (apache#30646)

* fix(explore): verified props is not updated (apache#31008)

* chore: publish wheels (apache#30981)

* docs: Embedded sdk (apache#30972)

* fix(imports): import query_context for imports with charts (apache#30887)

* docs: Update doc about CSV upload (apache#30867)

Co-authored-by: Evan Rusackas <[email protected]>

* chore(🦾): bump python cattrs 23.2.3 -> 24.1.2 (apache#30998)

Co-authored-by: GitHub Action <[email protected]>

* fix(dataset): use sqlglot for DML check (apache#31024)

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: Michael S. Molina <[email protected]>
Co-authored-by: Joe Li <[email protected]>
Co-authored-by: Maxime Beauchemin <[email protected]>
Co-authored-by: Mehmet Salih Yavuz <[email protected]>
Co-authored-by: Geido <[email protected]>
Co-authored-by: Ville Brofeldt <[email protected]>
Co-authored-by: Paolo Terzi <[email protected]>
Co-authored-by: Sukuna <[email protected]>
Co-authored-by: Evan Rusackas <[email protected]>
Co-authored-by: Andreas Motl <[email protected]>
Co-authored-by: Andreas Motl <[email protected]>
Co-authored-by: Levis Mbote <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Elizabeth Thompson <[email protected]>
Co-authored-by: Christoph Keller <[email protected]>
Co-authored-by: lodu <[email protected]>
Co-authored-by: Beto Dealmeida <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: GitHub Action <[email protected]>
Co-authored-by: JUST.in DO IT <[email protected]>
Co-authored-by: David Hotham <[email protected]>
Co-authored-by: Giampaolo Capelli <[email protected]>
Co-authored-by: Linden <[email protected]>
Co-authored-by: Seiya <[email protected]>
Co-authored-by: Asher Manangan <[email protected]>
@LevisNgigi LevisNgigi deleted the fix-accessibility-show-entries branch November 23, 2024 08:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design:accessibility Related to accessibility standards plugins preset:bounty Issues that have been selected by Preset and have a bounty attached. size/S
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Accessibility: Missing Form Control for Show x entries on Tables
4 participants