Add "mathspeak" for screen reader usage. #33
Conversation
This file contains 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
This is a more proper way of handling this sort of thing. This was observed in initial work on switching to using strict type checking.
This requires a few changes, but mostly they are just typings which don't change the actual generated code. There several eslint-ignore statements added for this that should be removed (with some effort). Note that the pray and prayDirection methods has been removed. Checking the conditions directly in place requires about the same amount of code, and has the benifit of revealing proper typings (not undefined mainly) to typescript if the error is not thrown.
WeBWorK doesn't use that, and I don't want to maintain it anymore. I don't see the point of a MathQuill instance that doesn't do many of the the things that make MathQuill usefull.
Typescript continually has issues with that usage. So now instead there are "left" and "right" properties of nodes and the cursor. The direction type is just a type union of the strings 'left' and 'right'. The advantages of a numeric value had already been taken away when this project was initially converted to typescript. For instance, you can't multiply an enum value by -1 (to get the opposite direction).
Switch from an aria label on the hidden text area to hidden span that the text area is aria labelledby. This was just merged in their code. Also add the tabbable option.
That is, when focus is lost within the window any selection is cleared. When focus is regained the contents are all selected. When the window focus is lost the current state is preserved, and when focus returns it is still in that state. There is a new `preventBlur` option that is a method that will be passed the blur event and the MathQuill api object. That method should return true if blurring the input should be prevented, and false if it should be allowed. Note that in this case the caller will need to ensure to call the `blur` method of the MathQuill api object later when the input should be blurred. This is for PG's toolbar. When focus leaves the MathQuill input and goes to the toolbar, the MathQuill input remains active. The keyboard tab button no longer is used for navigation within an editable MathQuill input. It now is purely used for the usual HTML tab order navigation. The escape button still has the navigation behavior it had before, and the primary navigation within an editable MathQuill input is via the arrow keys (the same as for a native HTML input). The `spaceBehavesLikeTab` option is now the `enableSpaceNavigation` option and does the same thing it did before.
…tion. Also clean up imports.
This is set up to emulate behavior of natively selected text.
Remove the long deprecated "edited" and "reflow" aliases of the "edit" handler. The upOutOf and downOutOf handlers should not accept a direction argument, so fix that.
I don't believe that this ever really worked in a useful way. The unit tests were a facade since they didn't work with an actual event. A new test has been added that does use an event.
…rWithCursor) option. The focus handler still needs to run after a prevented blur, but a select all should not occur. So a more fine grained approach is needed. If a blur is prevented, that needs to be saved and the focus handler acts according to that saved state. Also fix the 'select behaves correctly after blurring and re-focusing' test. That still doesn't work if the document is not visible.
screen reader span. Also add the `text-align: left` and `overflow: hidden` styles to the `mq-aria-alert` and `mq-mathspeak` spans. This seems to be needed to get inline static math to be read correctly.
This is also pulled from the Desmos code. This looks nicer than trying to use symbols scaled to the appropriate size. That scaling was gnerally not the best anyway. This has the added advantage of not needing to compute sizes. Natural SVG scaling just works so much better. Also make the index a little bit larger and improve styling so that when an nth root is selected the index is still visible.
|
I forgot to mention that I also removed the "basic" build. We don't need that, it is not included in the published package, and it isn't really useful. |
This was referenced Nov 10, 2024
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.
The code is adapted from the Desmos fork of MathQuill. It works by adding two visually hidden spans that are read by screen readers. The first hidden span announces content as it is typed or navigated around within a MathQuill input. The second announces the content of the entire input each time a MathQuill input gains focus.
There are a few other changes made in this pull request as well.
The first is related to accessibility also. That is the behavior of the "tab" key is now the same as it is for any other text input. That is when "tab" is pressed from anywhere inside a MathQuill input, focus moves to the next focus-able thing in the DOM after the input. Selection behavior also emulates that of a text input. That is, when focus is lost within the window any selection is cleared. That is, when focus is lost within the window any selection is cleared. When focus is regained the contents are all selected. When the window focus is lost the current state is preserved, and when focus returns it is still in that state if the input is still focused, but a selection is cleared otherwise. There is a new
blurWithCursoroption that can be used to control this behavior. This option is used by the PG mqeditor to maintain a selection or make the cursor stop blinking but remain visible while the toolbar is focused (and thus indicate to the user where content will be inserted).Also, roots and brackets (brackets include parentheses, brackets, and braces in MathQuill code speak) are now rendered via SVG images instead of scaled ascii character codes. This generally results in much better appearance. Also, the radix (or index) of an nth root is made a little larger. This is just another thing pulled in from the Desmos code.
There are a few minor changes to StaticMath fields also adapted from the Desmos code. These are used for the icons of the toolbar for PG's mqeditor.
Somewhat unrelated, the "enter" handler is fixed. Pressing the "Enter" key in a MathQuill input is supposed to trigger this "enter" handler, but it never has. What did work is passing a new line via the
typedTextmethod, but that isn't really a useful feature. This will be used by PG's mqeditor for a nicer way of handling the submission of an answer when enter is pressed.Finally, there are some maintenance issues. Some security vulnerabilities in npm dependencies were fixed (simply via
npm audit fix). There are some typescript typing improvements, and thetseslint.configs.strictTypeCheckedrules are now in effect. Part of that is that theLandRdirection specifiers as an enum is removed in favor of simply usingleftandrightobject properties. Typescript never really liked the enum values and using those as indexes of objects.The corresponding changes to PG's mqeditor code will be added in pull request shortly. Note that this is not published to npm yet. I think that should not occur until after this is merged. However, I did bump the beta version in the code so that can be done once merged. As such, it will take a little more effort to test this with the PG changes. I will include instructions in the PG pull request.