Skip to content

Commit

Permalink
PhET a11y updates (#1619)
Browse files Browse the repository at this point in the history
## Summary:
Code update to satisfy [a11y checklist](https://khanacademy.atlassian.net/wiki/spaces/AC/pages/2419687496/Accessibility+Checklist#%E2%8C%A8%EF%B8%8F--Keyboard-accessible.1)
* The fullscreen button used to be disabled when the simulation URL was broken. However, because of the [accessibility/usability](https://css-tricks.com/making-disabled-buttons-more-inclusive/) issues of disabling buttons, I have adjusted the button to just not be there if the URL is broken.

<img width="380" alt="Screenshot of a PhET simulation widget with a working URL. It has a fullscreen button in the bottom right corner." src="https://github.com/user-attachments/assets/71966d30-7209-4731-8107-f7bd321e26f5">
<img width="380" alt="Screenshot of a PhET simulation widget with a broken URL. It has an error banner at the top and no fullscreen button." src="https://github.com/user-attachments/assets/5e138f59-bc22-4e8c-b82c-9e073481d763">

Issue: LEMS-2278

## Test plan:
* Verify that when the URL is broken, the fullscreen button does not show up
  * Additionally, when navigating the widget with a screen reader, all we should read is a critical icon, the error message, and then an empty iframe group.
* Verify that when the simulation loads successfully, the fullscreen button still shows up
  * Additionally, when navigating the widget with a screen reader, we should be able to tab to the iframe group and then to the fullscreen button.

Author: aemandine

Reviewers: SonicScrewdriver

Required Reviewers:

Approved By: SonicScrewdriver

Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ gerald, ✅ gerald, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1619
  • Loading branch information
aemandine authored Sep 13, 2024
1 parent ad97e1a commit ab7b0fd
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 14 deletions.
5 changes: 5 additions & 0 deletions .changeset/grumpy-needles-complain.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/perseus": patch
---

Remove fullscreen button on broken URL
29 changes: 15 additions & 14 deletions packages/perseus/src/widgets/phet-simulation/phet-simulation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -195,20 +195,21 @@ export class PhetSimulation extends React.Component<Props, State> {
allow="fullscreen"
/>
</View>
<IconButton
icon={cornersOutIcon}
onClick={() => {
this.iframeRef.current?.requestFullscreen();
}}
kind={"secondary"}
aria-label={"Fullscreen"}
style={{
marginTop: 5,
marginBottom: 5,
alignSelf: "flex-end",
}}
disabled={this.state.url === null}
/>
{this.state.url !== null && (
<IconButton
icon={cornersOutIcon}
onClick={() => {
this.iframeRef.current?.requestFullscreen();
}}
kind={"secondary"}
aria-label={"Fullscreen"}
style={{
marginTop: 5,
marginBottom: 5,
alignSelf: "flex-end",
}}
/>
)}
</View>
);
}
Expand Down

0 comments on commit ab7b0fd

Please sign in to comment.