SFD-181: Implement ARIA tabs patterns #133
Conversation
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.
| @@ -92,7 +92,7 @@ def test_example(page: Page) -> None: | |||
| expect(page.get_by_text("Clearly there is a large")).to_be_visible() | |||
| 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.
| @@ -11,7 +11,7 @@ <h1 class="tce-text-3xl tce-mb-6">Technology Carbon Estimator</h1> | |||
| (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.
<SFD-181> Jira ticket
Description of Change
Implements the ARIA tabs pattern with automatic activation.
Include any relevant screenshots of visual changes.
Checklist
Notes