Fix another set of accessibility issues (#3031)
This commit is contained in:
Timothee Guerin
GitHub
Родитель
d8e4e860e4
Коммит
743c4b0a39
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
# Change versionKind to one of: internal, fix, dependencies, feature, deprecation, breaking
|
||||
changeKind: fix
|
||||
packages:
|
||||
- "@typespec/playground"
|
||||
---
|
||||
|
||||
Add `aria` attributes for accessibility
|
||||
|
|
@ -13,20 +13,20 @@ Any modification to the `main` branch is automatically published under the npm `
|
|||
|
||||
## Available packages
|
||||
|
||||
| Name | Changelog | Latest | Next |
|
||||
| -------------------------------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
|
||||
| Core functionality | | | |
|
||||
| [@typespec/compiler][compiler_src] | [Changelog][compiler_chg] | [](https://www.npmjs.com/package/@typespec/compiler) |  |
|
||||
| TypeSpec Libraries | | | |
|
||||
| [@typespec/rest][rest_src] | [Changelog][rest_chg] | [](https://www.npmjs.com/package/@typespec/rest) |  |
|
||||
| [@typespec/openapi][openapi_src] | [Changelog][openapi_chg] | [](https://www.npmjs.com/package/@typespec/openapi) |  |
|
||||
| [@typespec/openapi3][openapi3_src] | [Changelog][openapi3_chg] | [](https://www.npmjs.com/package/@typespec/openapi3) |  |
|
||||
| [@typespec/versioning][versioning_src] | [Changelog][versioning_chg] | [](https://www.npmjs.com/package/@typespec/versioning) |  |
|
||||
| TypeSpec Tools | | | |
|
||||
| [@typespec/prettier-plugin-typespec][prettier_src] | [Changelog][prettier_chg] | [](https://www.npmjs.com/package/@typespec/prettier-plugin-typespec) |  |
|
||||
| [typespec-vs][typespec-vs_src] | [Changelog][typespec-vs_chg] | [](https://www.npmjs.com/package/typespec-vs) |  |
|
||||
| [typespec-vscode][typespec-vscode_src] | [Changelog][typespec-vscode_chg] | [](https://www.npmjs.com/package/typespec-vscode) |  |
|
||||
| [tmlanguage-generator][tmlanguage_src] | [Changelog][tmlanguage_chg] | [](https://www.npmjs.com/package/tmlanguage-generator) |  |
|
||||
| Name | Changelog | Latest | Next |
|
||||
| -------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
|
||||
| Core functionality | | | |
|
||||
| [@typespec/compiler][compiler_src] | [Changelog][compiler_chg] | [](https://www.npmjs.com/package/@typespec/compiler) |  |
|
||||
| TypeSpec Libraries | | | |
|
||||
| [@typespec/rest][rest_src] | [Changelog][rest_chg] | [](https://www.npmjs.com/package/@typespec/rest) |  |
|
||||
| [@typespec/openapi][openapi_src] | [Changelog][openapi_chg] | [](https://www.npmjs.com/package/@typespec/openapi) |  |
|
||||
| [@typespec/openapi3][openapi3_src] | [Changelog][openapi3_chg] | [](https://www.npmjs.com/package/@typespec/openapi3) |  |
|
||||
| [@typespec/versioning][versioning_src] | [Changelog][versioning_chg] | [](https://www.npmjs.com/package/@typespec/versioning) |  |
|
||||
| TypeSpec Tools | | | |
|
||||
| [@typespec/prettier-plugin-typespec][prettier_src] | [Changelog][prettier_chg] | [](https://www.npmjs.com/package/@typespec/prettier-plugin-typespec) |  |
|
||||
| [typespec-vs][typespec-vs_src] | [Changelog][typespec-vs_chg] | [](https://www.npmjs.com/package/typespec-vs) |  |
|
||||
| [typespec-vscode][typespec-vscode_src] | [Changelog][typespec-vscode_chg] | [](https://www.npmjs.com/package/typespec-vscode) |  |
|
||||
| [tmlanguage-generator][tmlanguage_src] | [Changelog][tmlanguage_chg] | [](https://www.npmjs.com/package/tmlanguage-generator) |  |
|
||||
|
||||
[compiler_src]: https://github.com/microsoft/typespec/blob/main/packages/compiler
|
||||
[compiler_chg]: https://github.com/microsoft/typespec/blob/main/packages/compiler/CHANGELOG.md
|
||||
|
|
|
|||
|
|
@ -23,7 +23,12 @@ export const EmitterDropdown: FunctionComponent<EmitterDropdownProps> = ({
|
|||
[onSelectedEmitterChange]
|
||||
);
|
||||
return (
|
||||
<Select className="sample-dropdown" onChange={handleSelected} value={selectedEmitter}>
|
||||
<Select
|
||||
className="sample-dropdown"
|
||||
onChange={handleSelected}
|
||||
value={selectedEmitter}
|
||||
aria-label="Select an emitter"
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select emitter...
|
||||
</option>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export const FileOutput: FunctionComponent<FileOutputProps> = ({ filename, conte
|
|||
return (
|
||||
<div className={style["file-output"]}>
|
||||
<div className={style["viewer-selector"]}>
|
||||
<Select value={selected} onChange={handleSelected}>
|
||||
<Select value={selected} onChange={handleSelected} aria-label="Select viewer">
|
||||
{viewers.map(({ key, label }) => (
|
||||
<option key={key} value={key}>
|
||||
{label}
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ const VersionSelector = memo(({ versions, selected, latest, onChange }: VersionS
|
|||
return (
|
||||
<div>
|
||||
<Title3>Select release</Title3>
|
||||
<Select value={selected} onChange={changeVersion}>
|
||||
<Select value={selected} onChange={changeVersion} aria-label="Select version">
|
||||
{versions.map((version) => (
|
||||
<option key={version.name} value={version.name}>
|
||||
{version.label} {version.name === latest ? "(latest)" : ""}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export const ProblemPane: FunctionComponent<ProblemPaneProps> = ({
|
|||
onClick={onHeaderClick}
|
||||
collaped={collapsed}
|
||||
/>
|
||||
<div className={style["problem-content"]}>
|
||||
<div className={style["problem-content"]} aria-hidden={collapsed}>
|
||||
<ProblemPaneContent
|
||||
compilationState={compilationState}
|
||||
onDiagnosticSelected={onDiagnosticSelected}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,12 @@ export const SamplesDropdown: FunctionComponent<SamplesDropdownProps> = ({
|
|||
[onSelectedSampleNameChange]
|
||||
);
|
||||
return (
|
||||
<Select className="sample-dropdown" onChange={handleSelected} value={selectedSampleName ?? ""}>
|
||||
<Select
|
||||
className="sample-dropdown"
|
||||
onChange={handleSelected}
|
||||
value={selectedSampleName ?? ""}
|
||||
aria-label="Select a sample"
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select sample...
|
||||
</option>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export const CompilerSettingsDialogButton = ({
|
|||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger>
|
||||
<ToolbarButton icon={<Settings24Regular />} />
|
||||
<ToolbarButton icon={<Settings24Regular />} aria-label="Open Settings" />
|
||||
</DialogTrigger>
|
||||
<DialogSurface>
|
||||
<DialogBody>
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@
|
|||
background-color: var(--colorBrandBackground);
|
||||
padding: 0.4rem;
|
||||
text-decoration: none;
|
||||
color: var(--colorNeutralForeground1);
|
||||
color: var(--colorNeutralForegroundOnBrand);
|
||||
}
|
||||
|
||||
.tryit-container:hover {
|
||||
text-decoration: none;
|
||||
color: var(--colorNeutralForeground1);
|
||||
color: var(--colorNeutralForegroundOnBrand);
|
||||
background-color: var(--colorBrandBackgroundHover);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
}
|
||||
|
||||
.formatter-illustration-unformatted .badge {
|
||||
background-color: var(--colorStatusWarningBackground3);
|
||||
background-color: var(--colorStatusWarningForeground1);
|
||||
animation: fade var(--animation-duration) infinite alternate-reverse;
|
||||
}
|
||||
.formatter-illustration-formatted .badge {
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче