You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by "ncar285 (via GitHub)" <gi...@apache.org> on 2024/01/11 01:10:26 UTC
[PR] fix(chart table in dashboard): improve screen reading of table [superset]
ncar285 opened a new pull request, #26453:
URL: https://github.com/apache/superset/pull/26453
<!---
Please write the PR title following the conventions at https://www.conventionalcommits.org/en/v1.0.0/
Example:
fix(dashboard): load charts correctly
-->
### SUMMARY
Enhancing Accessibility with Unified Table Structure and Sticky Header
This PR addresses accessibility concerns by merging the header and body of our tables into a single unified structure. This change significantly improves screen reader compatibility, ensuring a more inclusive user experience. Previously, the header and body of a chart were seperate tables. Visually this worked but caused issues with screen reader functionality.
**Key Change:**
- The table now consists of a single, unified structure, as opposed to separate elements for the header and body. This enhances accessibility, particularly for screen reader users.
- The header is made sticky using CSS, allowing it to remain visible while the table body is scrollable.
**Technical Challenge:**
A notable challenge was maintaining a scrollable body while keeping the header fixed. Setting overflow directly on **`tbody`** proved unfeasible. Wrapping **`tbody`** in a div with an overflow disrupted the column grouping, as the table would then interpret the entire **`tbody`** as a single column. The implemented solution achieves the desired layout without compromising the table's integrity or accessibility.
### TESTING INSTRUCTIONS
1. Navigate to a page featuring the modified table structure.
2. Use a screen reader to ensure that the table content is read correctly and in a logical order and doesn't read end of table early.
3. Scroll through the table to check that the header remains fixed while the body is scrollable.
4. Visually inspect the table across different browsers for consistent rendering.
### ADDITIONAL INFORMATION
<!--- Check any relevant boxes with "x" -->
<!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue -->
- [x] Has associated issue: https://github.com/orgs/Superset-Community-Partners/projects/1/views/1?pane=issue&itemId=47378087
- [ ] Required feature flags:
- [ ] Changes UI
- [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351))
- [ ] 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
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] fix(chart table in dashboard): improve screen reading of table [superset]
Posted by "eschutho (via GitHub)" <gi...@apache.org>.
eschutho commented on code in PR #26453:
URL: https://github.com/apache/superset/pull/26453#discussion_r1449561560
##########
superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx:
##########
@@ -315,11 +318,12 @@ function StickyWrap({
style={{
width: maxWidth,
height: sticky.realHeight || maxHeight,
- overflow: 'hidden',
+ overflow: 'auto',
+ padding: '0',
}}
>
- {headerTable}
- {bodyTable}
+ {/* {headerTable} */}
Review Comment:
```suggestion
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] fix(chart table in dashboard): improve screen reading of table [superset]
Posted by "yousoph (via GitHub)" <gi...@apache.org>.
yousoph commented on PR #26453:
URL: https://github.com/apache/superset/pull/26453#issuecomment-1899759179
/testenv up
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] fix(chart table in dashboard): improve screen reading of table [superset]
Posted by "eschutho (via GitHub)" <gi...@apache.org>.
eschutho merged PR #26453:
URL: https://github.com/apache/superset/pull/26453
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] fix(chart table in dashboard): improve screen reading of table [superset]
Posted by "ncar285 (via GitHub)" <gi...@apache.org>.
ncar285 commented on PR #26453:
URL: https://github.com/apache/superset/pull/26453#issuecomment-1922451428
Yes thanks for pointing that out!
On Fri, 2 Feb 2024 at 10:29, Elizabeth Thompson ***@***.***>
wrote:
> Thanks for catching @kgabryje <https://github.com/kgabryje>! We'll take a
> look. 🙏
>
> —
> Reply to this email directly, view it on GitHub
> <https://github.com/apache/superset/pull/26453#issuecomment-1922278112>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/A73OXZ2RN2FQA4OHHWRBPGTYRQCKLAVCNFSM6AAAAABBVVZRRKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRSGI3TQMJRGI>
> .
> You are receiving this because you were mentioned.Message ID:
> ***@***.***>
>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] fix(chart table in dashboard): improve screen reading of table [superset]
Posted by "eschutho (via GitHub)" <gi...@apache.org>.
eschutho commented on code in PR #26453:
URL: https://github.com/apache/superset/pull/26453#discussion_r1449568591
##########
superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx:
##########
@@ -16,6 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
+
Review Comment:
```suggestion
```
##########
superset-frontend/plugins/plugin-chart-table/src/Styles.tsx:
##########
@@ -32,10 +32,12 @@ export default styled.div`
td {
min-width: 4.3em;
}
-
thead > tr > th {
+ position: sticky;
+ top: -1px;
padding-right: 0;
- position: relative;
+ z-index: 100;
+ border-bottom: 2px solid #e0e0e0;
Review Comment:
```suggestion
border-bottom: ${theme.gridUnit /2}px solid ${theme.colors.grayscale.light2};
```
you'll want to use the theme here for styling when possible
##########
superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx:
##########
@@ -215,7 +217,9 @@ function StickyWrap({
let sizerTable: ReactElement | undefined;
let headerTable: ReactElement | undefined;
let footerTable: ReactElement | undefined;
- let bodyTable: ReactElement | undefined;
+ // let bodyTable: ReactElement | undefined;
Review Comment:
```suggestion
// let bodyTable: ReactElement | undefined;
```
##########
superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx:
##########
@@ -16,6 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
+
Review Comment:
```suggestion
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] fix(chart table in dashboard): improve screen reading of table [superset]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] commented on PR #26453:
URL: https://github.com/apache/superset/pull/26453#issuecomment-1915379304
Ephemeral environment shutdown and build artifacts deleted.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] fix(chart table in dashboard): improve screen reading of table [superset]
Posted by "eschutho (via GitHub)" <gi...@apache.org>.
eschutho commented on PR #26453:
URL: https://github.com/apache/superset/pull/26453#issuecomment-1922278112
Thanks for catching @kgabryje! We'll take a look. 🙏
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] fix(chart table in dashboard): improve screen reading of table [superset]
Posted by "codecov[bot] (via GitHub)" <gi...@apache.org>.
codecov[bot] commented on PR #26453:
URL: https://github.com/apache/superset/pull/26453#issuecomment-1894617283
## [Codecov](https://app.codecov.io/gh/apache/superset/pull/26453?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache) Report
Attention: `1 lines` in your changes are missing coverage. Please review.
> Comparison is base [(`46e6778`)](https://app.codecov.io/gh/apache/superset/commit/46e677823e3520c3f558c5b56c9da4cf9c335068?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache) 69.18% compared to head [(`8d11cc1`)](https://app.codecov.io/gh/apache/superset/pull/26453?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache) 69.16%.
> Report is 120 commits behind head on master.
| [Files](https://app.codecov.io/gh/apache/superset/pull/26453?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache) | Patch % | Lines |
|---|---|---|
| [...ugin-chart-table/src/DataTable/hooks/useSticky.tsx](https://app.codecov.io/gh/apache/superset/pull/26453?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache#diff-c3VwZXJzZXQtZnJvbnRlbmQvcGx1Z2lucy9wbHVnaW4tY2hhcnQtdGFibGUvc3JjL0RhdGFUYWJsZS9ob29rcy91c2VTdGlja3kudHN4) | 0.00% | [1 Missing :warning: ](https://app.codecov.io/gh/apache/superset/pull/26453?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache) |
<details><summary>Additional details and impacted files</summary>
```diff
@@ Coverage Diff @@
## master #26453 +/- ##
==========================================
- Coverage 69.18% 69.16% -0.03%
==========================================
Files 1945 1948 +3
Lines 75948 76037 +89
Branches 8460 8493 +33
==========================================
+ Hits 52546 52591 +45
- Misses 21217 21266 +49
+ Partials 2185 2180 -5
```
| [Flag](https://app.codecov.io/gh/apache/superset/pull/26453/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache) | Coverage Δ | |
|---|---|---|
| [javascript](https://app.codecov.io/gh/apache/superset/pull/26453/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache) | `56.50% <0.00%> (-0.02%)` | :arrow_down: |
Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache#carryforward-flags-in-the-pull-request-comment) to find out more.
</details>
[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/apache/superset/pull/26453?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache).
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache).
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] fix(chart table in dashboard): improve screen reading of table [superset]
Posted by "eschutho (via GitHub)" <gi...@apache.org>.
eschutho commented on PR #26453:
URL: https://github.com/apache/superset/pull/26453#issuecomment-1888121483
@ncar285 looks like there are some linting errors that are causing the tests to fail. I can comment on some in the PR, but you can also run `npm run lint-fix` from superset-frontend folder and that will catch some of the indentation ones.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] fix(chart table in dashboard): improve screen reading of table [superset]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] commented on PR #26453:
URL: https://github.com/apache/superset/pull/26453#issuecomment-1899760583
@yousoph Ephemeral environment spinning up at http://54.184.85.44:8080. Credentials are `admin`/`admin`. Please allow several minutes for bootstrapping and startup.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] fix(chart table in dashboard): improve screen reading of table [superset]
Posted by "kgabryje (via GitHub)" <gi...@apache.org>.
kgabryje commented on PR #26453:
URL: https://github.com/apache/superset/pull/26453#issuecomment-1919410078
@ncar285 @eschutho I think after this PR the Totals are not sticky anymore 🙁
https://github.com/apache/superset/assets/15073128/e58fdb5e-7702-4cce-a318-2a876a091a49
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org