SFD-181: Implement ARIA tabs patterns #133
Open
Conversation
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
Used so that the 'Diagram' and 'Table' tabs are announced by the screen reader when navigating with the 'left', 'right', 'home' and 'end' keys.
jantoun-scottlogic
force-pushed
the
SFD-181-implement-aria-tabs-patterns
branch
from
9233057 to
ff72388
Compare
jantoun-scottlogic
force-pushed
the
SFD-181-implement-aria-tabs-patterns
branch
from
8e4f19b to
eddf8ae
Compare
jantoun-scottlogic
force-pushed
the
SFD-181-implement-aria-tabs-patterns
branch
from
bb320bd to
4aa19b6
Compare
jantoun-scottlogic
changed the title
This no longer seems to be needed after refactoring the tab panels.
| expect(page.get_by_text("The estimated kWh of cloud")).to_be_visible() | ||
| expect(page.get_by_role("heading", name="Downstream Emissions")).to_be_visible() | ||
| expect(page.get_by_text("At present we focus on the")).to_be_visible() | ||
| expect(page.get_by_text("To do this we have collated")).to_be_visible() |
There was a problem hiding this comment.
Now that the panels are hidden when not selected rather than being removed from the DOM there are 2 elements in the DOM with the old text so I've used the start of the second sentence in the section instead.
| (ngSubmit)="handleSubmit()" | ||
| [formGroup]="estimatorForm" | ||
| class="tce-w-full tce-flex tce-flex-col tce-gap-6" | ||
| tabindex="0"> |
There was a problem hiding this comment.
I think this should be in the tab sequence now that it's in a tabpanel. The other tabpanels are already behaving that way so I've added it here rather than on the actual tabpanel element since that was causing other panels to appear twice in the tab sequence.
| (formReset)="handleFormReset()"></carbon-estimator-form> | ||
| </tab-item> | ||
| <tab-item [title]="'Assumptions and Limitations'"> | ||
| <assumptions-and-limitation aria-live="polite"></assumptions-and-limitation> |
There was a problem hiding this comment.
I originally removed this when changing some other aria-live values but having reverted those changes and rechecked, I don't think this is changing the behaviour now although that could just be my screen reader settings. I've left it off for now since other elements placed directly inside the tab-item components do not have this set.
* Add xprocess to requirements * Add playwright steps back to the workflow * Fix requirements * Update actions * Update reporting * Update reporting and git ignore * Update readme
* docs: Update README to mention new default branch and rulesets. * docs: Use full path to rules as relative links only work for files in the repo.
* Add first JS test using screenshot comparision * Add screenshot comparison to test * test0 TS conversion * Accordion/expansion panel e2e test to TS * T2,3,4 to TS * convert python to TS 4 -17 * update naming of tests for better description * delete unused images * Delete demo spec and unused images * add new images, fix t12 to not include label obj * fix t9, remove comments * add scripts for node installation and execution of playwright * update playwright actions * package.lock for sync * add required version for apex charts lock file * match versions * update lock file * Update modules * tracing -> trace , remove extra path * change file paths * Add baseline screenshots Update angualr.json to ignore PW tests * Add baseline screenshots * Add report path for artifact upload * Update viewport settings * Update README to better suit typescript * ubuntu -> windows * revert to ubuntu * Update viewport settings and screenshots * Update screenshot config * Update T0 * Use full page screenshot on T0 * Remove wait in test * Try containerised Playwright * remove playwright python resources * remove T0 initial screenshot * Remove playwright container * restore issue template files * Update big.md * Update feature-development.md * Update new-feature-request.md * Rename big.md to bug.md * remove python comments * restore root level readme content --------- Co-authored-by: Kieran Ellis <[email protected]>
* build: Move package preparation into its own script * build: Add semantic-release and basic configuration * Simplify Publish workflow using semantic-release * build: Changed version number to clarify that it is unused * docs: Documented changes to the commit message specification and package publish process. * build: Updated node-version to allow semantic-release to run in GitHub Actions * Added a script to verify that a new version was produced to block any follow on jobs from running * fix: Added temporary workarounds to test publish pipeline further * build: Added permissions for GitHub token to write Temporarily removed test step for quicker testing * build: Remove temporary testing features
* fix: Updated table row to specify dark mode colour * fix: Use darker slate colour to achieve desired contrast
* Run npm audit fix * Update packages and fix error * Fix minor vulnerability * Update node-version in set-up-environment yaml * test: Updated downstream unit tests in response to co2.js changes * build: Re-ran npm install to sync up package and lock files --------- Co-authored-by: Matthew Griffin <[email protected]>
* basic axeBuilder test and change server startup * Axecore addition * accessibility light and dark tests * Remove commented code and streamline accessibility tests for light and dark modes * axe-core lock file * Extract check to helper method, update titles * update lock file * add axe-core as dev dependency * lock file axe-core to dev dependency * Update lock file * fix: Updated table row to specify dark mode colour * Update screenshots * Update screenshots * Rename Accessibility-dark.spec.ts to accessibility-dark.spec.ts * Rename Accessibility-light.spec.ts to accessibility-light.spec.ts * Update failing unit test to ignore props * Remove commented out test step * Update screenshots * Update package lock * Update screenshots and package lock --------- Co-authored-by: Kieran Ellis <[email protected]> Co-authored-by: Matthew Griffin <[email protected]>
…methodsfiles (#188) * Basic helper file setup * organisation visibility and edit t0 * implement cloud visibility helper and add to t0 * update with new function for cloud * panel methods, expansion panel methods * refactor t1 update helpers * update T2 and add extra checks to helper * t2 format * optimise t3-6 with new methods * update t6-t7 * update tests with helpers * t17 update * change locations, of accessibility helpers, update + optimise * remove redundant steps t1 * update t17 * minor formating, add slider visibility checks * update function names to be more descriptive
* Updated tailwind, removed old dependencies, remove tailwind config, added postcss config, updated styles. App builds but css not applied * Test-change update to v4 formatting * Moved postcss setup into a json file Set the desired prefix on all tailwind imports Updating remaining prefixes from tce- to tce: Moved tce: prefix to the front when others are used * Update deprecated styles * Update contrasts RE PR comments * Update dark mode foot text color --------- Co-authored-by: Matthew Griffin <[email protected]> Co-authored-by: Kieran Ellis <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
<SFD-181> Jira ticket
Description of Change
Implements the ARIA tabs pattern with automatic activation.
Include any relevant screenshots of visual changes.
Checklist
Notes