Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility compliance: Improve share dialog accessibility #9989

Merged
merged 16 commits into from May 9, 2024

Conversation

srietkerk
Copy link
Contributor

@srietkerk srietkerk commented Apr 29, 2024

I've made a couple of changes with this PR, but I've done so much fiddling and changing and testing across these commits that it's hard all of what's changed. The code in this PR does fix the following issues:

Fixes microsoft/pxt-microbit#5468
Fixes microsoft/pxt-microbit#5472
Fixes microsoft/pxt-microbit#5488
Fixes microsoft/pxt-microbit#5471

I also did some work for this issue . I finagled with this a bit and got it to a place that looked okay, but it really made the other zoom and screen experiences just bad, so I scratched the progress made. I did make a change, though, that if a screen is small enough, I change the height of the modal overlay to be 95% of the screen so more of the modal is usable.
^ this no longer applies as making the modal scrollable fixes the problem

It will be easier to see these changes just by playing with difference zooms, screen sizes, and resolutions. Let me know if there are other things that I should adjust.
Upload target: https://makecode.microbit.org/app/44c2bdbef7436f5a3215b42b34cf672cb13298ac-2ae3b742d0#editor
New upload target: https://makecode.microbit.org/app/9cc334c6852c269cc944ea1241973ece3d4a12a6-950d2c09e5#

@srietkerk srietkerk requested a review from a team April 29, 2024 22:13
react-common/styles/react-common-breakpoints.less Outdated Show resolved Hide resolved
react-common/styles/share/share.less Outdated Show resolved Hide resolved
@@ -91,4 +91,25 @@ export function screenToSVGCoord(ref: SVGSVGElement, coord: ClientCoordinates) {
screenCoord.x = coord.clientX;
screenCoord.y = coord.clientY;
return screenCoord.matrixTransform(ref.getScreenCTM().inverse());
}

export function findNextFocusableElement(elements: HTMLElement[], focusedIndex: number, index: number, forward: boolean): HTMLElement {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: you can eliminate the focusedIndex argument by using the iterative implementation above instead of the recursive one

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer using recursion for this, but would like to hear more of your thoughts if you feel strongly about implementing it with iteration.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the iterative implementation doesn't require passing in focusedIndex. I just also generally prefer loops to tail recursion, personally (but feel free to ignore)

…neric for simulator thumbnail, got rid of important on embed button styling
@srietkerk srietkerk merged commit 6f86031 into master May 9, 2024
6 checks passed
@srietkerk srietkerk deleted the srietkerk/share-dialog-accessibility branch May 9, 2024 00:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment