mirrors/vault
1
0
Fork 0
mirror of https://github.com/hashicorp/vault.git synced 2026-05-05 04:16:31 +02:00
Code Issues Projects Releases Wiki Activity

UI: A11y fix for disabled swagger interarctive (#31079)

Browse Source 
* update disabled fields to be readonly

* add tests for a11y fix
This commit is contained in:
lane-wetmore 2025-06-25 10:27:27 -05:00 committed by GitHub
parent db78de86ae
commit 369be9cfcf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 47 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/lib/open-api-explorer/addon/components/swagger-ui.js
View File

@ -130,12 +130,14 @@ export default class SwaggerUiComponent extends Component {
this.observer = new MutationObserver(() => {
this.updateCaretTabIndex();
this.updateCopyToClipboard();
this.updateDisabledFields();
this.updateTryItOutButtonDescription();
});
this.observer.observe(container, { childList: true, subtree: true });
// Run once on initial load
this.updateCaretTabIndex();
this.updateCopyToClipboard();
this.updateDisabledFields();
this.updateTryItOutButtonDescription();
}
}
@ -162,6 +164,13 @@ export default class SwaggerUiComponent extends Component {
});
}
updateDisabledFields() {
document.querySelectorAll('.parameters :disabled').forEach((el) => {
el.removeAttribute('disabled');
el.setAttribute('readonly', true);
});
}
updateTryItOutButtonDescription() {
document.querySelectorAll('.try-out button').forEach((el) => {
const warning =

24
ui/mirage/factories/open-api-explorer.js
View File

@ -36,6 +36,30 @@ export default Factory.extend({
},
},
},
'auth/token/roles/{role_name}': {
description: '',
get: {
summary: '',
tags: ['auth'],
operationId: 'token-read-role',
parameters: [
{
name: 'role_name',
required: true,
in: 'path',
schema: {
type: 'string',
},
description: 'Name of the role',
},
],
responses: {
200: {
description: 'OK',
},
},
},
},
'/secret/data/{path}': {
description: 'Location of a secret.',
post: {

19
ui/tests/integration/components/open-api-explorer/swagger-ui-test.js
View File

@ -16,7 +16,7 @@ import { camelize } from '@ember/string';
const SELECTORS = {
container: '[data-test-swagger-ui]',
searchInput: 'input.operation-filter-input',
apiPathBlock: '.opblock-post',
apiPathBlock: '.opblock',
operationId: '.opblock-summary-operation-id',
controlArrowButton: '.opblock-control-arrow',
copyButton: '.copy-to-clipboard',
@ -66,7 +66,7 @@ module('Integration | Component | open-api-explorer | swagger-ui', function (hoo
setNativeInputValue('token');
assert.dom(SELECTORS.searchInput).hasValue('token', 'search input has value');
assert.dom(SELECTORS.apiPathBlock).exists({ count: 1 }, 'renders filtered api paths');
assert.dom(SELECTORS.apiPathBlock).exists({ count: 2 }, 'renders filtered api paths');
});
test('it should render camelized operation ids', async function (assert) {
@ -105,8 +105,13 @@ module('Integration | Component | open-api-explorer | swagger-ui', function (hoo
});
assert.dom(SELECTORS.copyButton).hasAttribute('tabindex', '0');
await click(SELECTORS.controlArrowButton);
const controlArrowButton = document.querySelectorAll(SELECTORS.controlArrowButton)[1];
await click(controlArrowButton);
await waitFor(SELECTORS.tryItOutButton);
const input = document.querySelector('.parameters input:read-only');
assert.dom(input).exists('parameter input is readonly');
assert
.dom(SELECTORS.tryItOutButton)
.hasAttribute(
@ -122,7 +127,7 @@ module('Integration | Component | open-api-explorer | swagger-ui', function (hoo
await this.renderComponent();
setNativeInputValue('secret');
setNativeInputValue('token');
await waitUntil(() => {
return document.querySelector(SELECTORS.controlArrowButton).getAttribute('tabindex') === '0';
@ -134,8 +139,12 @@ module('Integration | Component | open-api-explorer | swagger-ui', function (hoo
});
assert.dom(SELECTORS.copyButton).hasAttribute('tabindex', '0');
await click(SELECTORS.controlArrowButton);
const controlArrowButton = document.querySelectorAll(SELECTORS.controlArrowButton)[1];
await click(controlArrowButton);
await waitFor(SELECTORS.tryItOutButton);
const input = document.querySelector('.parameters input:read-only');
assert.dom(input).exists('parameter input is readonly');
assert
.dom(SELECTORS.tryItOutButton)
.hasAttribute(