[TextField] Fix to expose helperText for accessibility#14266
Merged
oliviertassinari merged 2 commits intoJan 22, 2019
Merged
Conversation
helperText is now read out by screenreaders when the input is tabbed to
Member
|
@mlenser Shouldn't the |
Contributor
Author
|
It is on the input on line 115: https://github.com/mui-org/material-ui/blob/d4a1f5bf40a15abc948d2288174d49ec8b67d608/packages/material-ui/src/TextField/TextField.js#L115 Or do you mean pass it as a prop to the actual component? |
|
@mlenser looks good! This matches the changes I was making in my design system library to account for this issue 😄 |
oliviertassinari
added
accessibility
Member
Yes, I have updated the pull-request for that and added a small accessibility section. |
mlenser
commented
Jan 22, 2019
| id="component-helper" | ||
| value={this.state.name} | ||
| onChange={this.handleChange} | ||
| aria-describedby="component-helper-text" |
Contributor
Author
There was a problem hiding this comment.
Ah, there were demo files. That answers my question for how it worked!
Contributor
Author
|
@oliviertassinari looks great! Thanks for the assist! |
Member
|
@mlenser It's a great first pull request on Material-UI 👌🏻. Thank you for working on it! |
eps1lon
added a commit
to eps1lon/material-ui
that referenced
this pull request
Jan 29, 2019
oliviertassinari
pushed a commit
that referenced
this pull request
Jan 31, 2019
* Squashed commit of the following:
commit 2035e6daa1ceba1c78d3e8740af8d5f3066bc898
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon Nov 5 10:16:31 2018 +0100
[docs] Fix undefined raw js
commit 9ab3761e49d8682530543f1e6808d46cd955f32a
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon Nov 5 10:07:38 2018 +0100
[docs] Enable textfield ts demos
commit 8271f5cff4b3f6fe31b564a3f98ed69d8c09f3d6
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue Oct 30 11:58:29 2018 +0100
[docs] Port #13428 to typescript
commit 8b808886235a3690b01335a5d3a6132209b87483
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri Oct 26 17:55:02 2018 +0200
[docs] Add typescript demos for TextField
Takeaway:
- inputProps, inputComponent is badly typed (needs generics though)
- computed property keys support is bad in typescript
commit 5ab9c988d259cd039e5b2735a47c1c89c9761eec
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue Oct 23 13:36:56 2018 +0200
[docs] Use esModuleInterop import conistently
commit c9bca0824c0f81fe114f8976bc10464de94306b2
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue Oct 23 13:35:32 2018 +0200
[docs] Fix IE 11 compat issues
commit b4dd772ee990dd0f9a042a8721aa7a665ded7fce
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue Oct 23 13:33:44 2018 +0200
[docs] Remove dead code
commit f0a23cffb7a8e2c4faf5c2b4182919efb74d4bdd
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue Oct 23 08:21:07 2018 +0200
[ci] Fix job order
Running git diff after yarn build will exit with 1 because the size
snapshot was updated.
commit 114022bd6d1ac98af330f6e7b57ba03062d120ff
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon Oct 22 21:32:54 2018 +0200
[docs] Disabled stackblitz for TS demos
commit 7995d67cd09f08541f388124d535452054518d75
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon Oct 22 17:47:14 2018 +0200
[docs] Add guide about ts demos
commit 0c65724f14c4de21ced8ce4e8ff91b2edce3b6d5
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon Oct 22 17:09:39 2018 +0200
[docs] Sync demo changes from 06967ec
commit 7a0861d855d15bf281fde271e0028d0b1ba9dbb1
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon Oct 22 15:35:03 2018 +0200
[docs] Allow require default interop for ts demos
Seems like codesandbox still has issues with this. Gonna investigate if
we can fix this upstream
commit c8a143e20735be14f692477fab40cd3d4a3040df
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon Oct 22 15:34:10 2018 +0200
[docs] Support types for scoped packages
commit 48a425d19a53e77fa97692980e364f503491a91b
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Sat Oct 20 18:02:05 2018 +0200
[babel-plugin-unwrap-createStyles] Fix fixtures being transpiled with workspace config
commit 03c1ac9d7575c9dc79e8253578dda60f39e33375
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri Oct 19 12:21:59 2018 +0200
[docs] Create ts specific codesandbox
- needs babel plugin for synthetic default imports
commit cdc393185a823bb684ff34be23f20d4897db8962
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu Oct 18 18:39:40 2018 +0200
[docs] Fire analytics event when clicking codeLanguage
commit 6865f6488c27c1353cae108410d94a165343414b
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu Oct 18 18:15:05 2018 +0200
[docs] Add ts version for all app bar demos
- Fixes menu not closing in PrimarySearchAppBar
- removes some dead code from undefined classnames
commit a189a173a371e785916b8797283798e45d4743d8
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu Oct 18 17:12:44 2018 +0200
[ci] Check compiled ts demos are equal to js demos
commit 95706fdaaa1b6a56da239250b515a36459c87b8b
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Wed Oct 17 20:51:02 2018 +0200
[docs] Remove debug config
commit a90c76a322104787837c1646fc400e84cdc77e6c
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Wed Oct 17 20:48:56 2018 +0200
[docs] github link and copy code depending on selected code language
commit fafa284f397e66b0075a29823debc1c8dbd6b1fb
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Wed Oct 17 18:14:49 2018 +0200
[docs] Add feature flag for language switch
Enabled on a per-component basis.
commit 9ef68446d7e42347d30fc796d34f23f15eaf4405
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Wed Oct 17 18:10:20 2018 +0200
[docs] Add the ability to mark ts demos as outdated
This should be used in-sync with ignored demos in transpilation.
commit a7033f203278d6e462a016190790a3609aabded5
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Wed Oct 17 17:18:10 2018 +0200
[docs] Add the ability to ignore ts demos from transpilation
This can be useful to defer syncing them upwards from js.
commit e7c19cb1f264bf9ec9b6884650b4e3ad8e6942f8
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Wed Oct 17 16:22:36 2018 +0200
Fix formatting errors
commit ea9a6de935394d0c61eff974a8575165ae0ed1aa
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Wed Oct 17 10:33:23 2018 +0200
[docs] Disable ts switch if not ts version is available
commit 5a58595c26108e8ccd18eacf3b16ae2ed40de0a5
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Wed Oct 17 09:19:53 2018 +0200
[docs] Remove global code language switch
Revisit this if we reach critical mass on ts docs
commit aecb12fdf96aa761e543ba284d55ffd11a7970f1
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Wed Oct 17 09:15:52 2018 +0200
[docs] Improve code language switch
commit 0a587ec8b0f97dfc05352856f7dec1c081e5275e
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue Oct 16 23:37:40 2018 +0200
Fix CI errors
commit 82921d138f21272cef11c040ea7a578584563120
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue Oct 16 23:20:36 2018 +0200
[docs] Add local language switch and add language logos
- color needs rework: it looks a little bit out of place, bad contrast
commit 49861e54f5b5d2e54cac672c4f5a3377731e6255
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue Oct 16 20:45:25 2018 +0200
[docs] Language switch via redux
It's pretty slow at the app level. While it is nice to have ts
permanently enabled while browsing docs a switch at demo
level might be better suited.
commit 6a06a060ad17f44dab0d1cc49996455b37f8a2fc
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue Oct 16 19:14:55 2018 +0200
[docs] Another whitespace fix attempt
commit fffed851504e587f2abadd6353318eaab9791fdb
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue Oct 16 18:46:46 2018 +0200
[docs] revert to function declaration
propTypes in typescript are to strict
commit ccb62823cbbacb5da109eb5275277a4ebf797533
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue Oct 16 18:32:38 2018 +0200
[core] Bump @types/react
commit d3ac480d1966485b1c3d22672797110c26a82ef5
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue Oct 16 18:25:06 2018 +0200
[babel-plugin-unwrap-createStyles] Fix lint errors
commit 1998640e939bfb57e27c265c2e338ef6707bae5a
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue Oct 16 18:21:45 2018 +0200
[docs] Remove diff in trailing whitespace
commit 912c2a8d060ff3de9a70eaefa62c011f2bdbc90d
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue Oct 16 18:20:13 2018 +0200
[docs] Write formatted js from ts demos
commit 4dcd51f50252823ee5f40dd9e53bfd6821786d5f
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue Oct 16 17:28:08 2018 +0200
[core] Sync tslint with eslint concerning trailing-whitespace
commit 05f3f3d78e333ed740f447a2e20724cc1624c363
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue Oct 16 13:59:47 2018 +0200
[core] docuent babel-plugin vs. ts-transformer
commit 691a036456486b4cea411d435392746ad714817d
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue Oct 16 11:03:08 2018 +0200
[docs] Add babel plugin to unwrap createStyles calls
This essentially strips them from the bundle
commit a02ffd64a1defb4298030fd2d162c4a71c65b09a
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Sat Oct 13 16:02:11 2018 +0200
Move ts files next to js files
commit 32a301a8eb2d0ed5e3b902313d5895dabcfbca32
Author: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Sat Oct 13 14:35:14 2018 +0200
Working example without type checking and bad folder structure
* removed the babel-generator-prettier plugin
See eps1lon#1
* removed the babel-generator-prettier plugin in favor of running prettier after building the docs
* Restore yarn integrity fields
* [core] use link protocol for babel-plugin-unwrap-createStyles
* [babel-plugin-unwrap-createStyles] Improve code docs
* [docs] Sync ts and js demos
* [ci] Use proper docs:ts:check command
* [docs] Improve TS demo workflow
* [docs] Cleanup merge commit
* [docs] Cleanup TS demo testing
* [docs] Furhter merge commit cleanup
* [docs} Fix codesandbox demos
* [docs] remove unused lint directives
* [docs] Add analytics event to source switches
* [core] cleanup tslint diff
* [babel-plugin-unwrapCreateStyles] Cleanup package.json
* [docs] fix bundle size limit
* remove blank line
* remove blank lines
* Update README.md
* [docs] exit with non-zero if ts scripts fail
* [docs] Fix failing TS script
* Update CONTRIBUTING.md
* Update CONTRIBUTING.md
* Revert "remove blank lines"
Fixes build
* [docs] Update Hooks / JS / TS icons, remove code icon
* [docs] Format code
* [docs] Port #14266 to TS
* [docs] Port #14281 to TS
* [docs] Port #14023 to TS
* [docs] Adjust bundle size
* WIP dropdown
WIP ToggleButtons
* Add a transition, highlight the correct toggle-button
when preferred code style not available
* Remove comment Tooltips
* docs bundle size
* [docs] Update contributing with updated formatting ts demo task
* [docs] Remove commented code
* [docs] Update outdated API docs
* [docs] Remove unnecessary fragment
* [docs] Replace string literals with enum values
* [docs] Removed explicit property initialization
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
helperText is now read out by screenreaders when the input is tabbed to
Fixes #14231
@oliviertassinari I've added a test as well.
Though when I ran the docs locally the code didn't seem to be up to date. Perhaps I need to do something other than
yarn start? I didn't see anything in the documentation. Either way this fix should work.EDIT: The deploy preview has the same problem. Perhaps I need to update the docs somehow? I assume the docs use the component directly so the change should be reflected there as well..