Show loading, failure, and unauthorized states in query tables - #338
Merged
Merged
Conversation
Distinguish loading, failed, unauthorized, and successful empty results with accessible state rows, configurable messages, and stable styling parts. Keep existing rows busy during refetches; cover both Arc query wrappers and DataPage.
The label used the cratis:sr-only utility, which ships in styles/base rather than the PivotViewer area stylesheet. styles/base is documented as required, but if it were missing the label would render as visible text. A rule in Spinner.css keeps it hidden with the area sheet alone, as DataTables and the form fields already do.
Group identical declarations within their owning stylesheets, keeping each per-area export self-contained. Consolidate the now-redundant Toolbar comments around the shared rules. The packed aggregate is 32429 gzip bytes (339 below its unchanged 32768-byte ceiling); no per-area ceiling needs adjustment.
Every enum member reachable from a JS export subpath must carry a TSDoc comment, so DataTableStatus.Ready/Loading/Failed/Unauthorized now each describe the state they select.
The aggregate stylesheet landed 23 gzip bytes over its 32 KiB ceiling. The legacy sr-only declarations (padding, margin, border, clip, nowrap) are belt-and-braces the clipped 1px box does not need, and the rule sits too far from the other sr-only copies for gzip to back-reference it, so it pays full price for every declaration. clip-path: inset(50%) on the absolute 1px box hides the label on its own while keeping the text in the accessibility tree.
Grouping .cratis-field-input:disabled with a :has() selector made browsers without :has() support (Firefox before 121, including ESR 115; Safari before 15.4; Chrome before 105) drop the whole rule, so disabled text, number, and select fields looked enabled there. The two rules are separate again. Aggregate CSS: raw 206066, gzip 32428, 1156 blocks.
Cratis Stagehand pushed its own fixes for the same two #338 CI failures. Keep the reviewed DataTableStatus comments and the full visually hidden rule for the PivotViewer loading label: the CSS deduplication already leaves 339 gzip bytes of headroom, so the label rule does not need to lose white-space: nowrap or the clip fallback.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Query-backed tables and
DataPagenow tell your users when data is loading, when a query failed, and when they are not allowed to see it. Until now, all three looked like an empty result.Added
DataTableForQuery,DataTableForObservableQuery, andDataPageshow a loading row while the first result is on its way, and a failure row when the query fails or the user is not authorized. A table that is refreshing rows it already shows keeps them visible and marks itself busy (aria-busyon the table,data-busyon the root). Server exception text is never shown. (Show query loading, failure, and authorization states in bound tables and chat #327)loadingMessage,failureMessage, andunauthorizedMessageprops onDataTableCore, both query tables, andDataPage, with provider-wide defaults inCratisComponentsProvidermessages.dataTable.loading,.failed, and.unauthorized. (Show query loading, failure, and authorization states in bound tables and chat #327)DataTableCoreacceptsstatus(DataTableStatus.Ready,Loading,Failed, orUnauthorized) so a table over local rows can show the same states. (Show query loading, failure, and authorization states in bound tables and chat #327)loading-row,loading-cell,failure-row, andfailure-cell(typed asloadingRow,loadingCell,failureRow, andfailureCellinDataTableParts). The failure cell carriesdata-reason, and the loading and failure text are announced to screen readers throughrole="status"androle="alert". (Show query loading, failure, and authorization states in bound tables and chat #327)PivotViewerannounces its loading state to screen readers, labeled by the newloadingLabelprop (defaultLoading…). (Make toolbar and filter controls keyboard- and screen-reader-accessible #328)Changed
empty-row/emptyMessage.empty-rowstill renders for a query that returns no rows. If your CSS or tests targetempty-rowto detect loading or errors, update them to the new parts. (Show query loading, failure, and authorization states in bound tables and chat #327)emptyMessage. (Show query loading, failure, and authorization states in bound tables and chat #327)ToolbarButtonexposesaria-pressedwhen you passactive, so assistive technology announces the toggle state. Buttons withoutactiveare unchanged. (Make toolbar and filter controls keyboard- and screen-reader-accessible #328)