Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

A11Y: mark up custom nav section form for screen readers (#25623)

This commit is contained in:
Kris 2024-02-09 08:42:28 -05:00 committed by GitHub
parent b797434376
commit d93debc634
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 46 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.hbs
View File

@ -18,6 +18,7 @@
@type="text" @type="text"
@value={{this.transformedModel.title}} @value={{this.transformedModel.title}}
class={{this.transformedModel.titleCssClass}} class={{this.transformedModel.titleCssClass}}
id="section-name"
{{on {{on
"input" "input"
(action (mut this.transformedModel.title) value="target.value") (action (mut this.transformedModel.title) value="target.value")
@ -31,30 +32,48 @@
{{/if}} {{/if}}
</div> </div>
{{/unless}} {{/unless}}
<div
role="table"
aria-rowcount={{this.activeLinks.length}}
class="sidebar-section-form__links-wrapper"
>
<div class="row-wrapper header"> <div class="row-wrapper header" role="row">
<div class="input-group link-icon"> <div
<label>{{i18n "sidebar.sections.custom.links.icon.label"}}</label> class="input-group link-icon"
role="columnheader"
aria-sort="none"
>
<label>{{i18n "sidebar.sections.custom.links.icon.label"}}</label>
</div>
<div
class="input-group link-name"
role="columnheader"
aria-sort="none"
>
<label>{{i18n "sidebar.sections.custom.links.name.label"}}</label>
</div>
<div
class="input-group link-url"
role="columnheader"
aria-sort="none"
>
<label>{{i18n "sidebar.sections.custom.links.value.label"}}</label>
</div>
</div> </div>
<div class="input-group link-name"> {{#each this.activeLinks as |link|}}
<label>{{i18n "sidebar.sections.custom.links.name.label"}}</label> <Sidebar::SectionFormLink
</div> @link={{link}}
@deleteLink={{this.deleteLink}}
@reorderCallback={{this.reorder}}
@setDraggedLinkCallback={{this.setDraggedLink}}
/>
{{/each}}
<div class="input-group link-url">
<label>{{i18n "sidebar.sections.custom.links.value.label"}}</label>
</div>
</div> </div>
{{#each this.activeLinks as |link|}}
<Sidebar::SectionFormLink
@link={{link}}
@deleteLink={{this.deleteLink}}
@reorderCallback={{this.reorder}}
@setDraggedLinkCallback={{this.setDraggedLink}}
/>
{{/each}}
<DButton <DButton
@action={{this.addLink}} @action={{this.addLink}}
@title="sidebar.sections.custom.links.add" @title="sidebar.sections.custom.links.add"

11
app/assets/javascripts/discourse/app/components/sidebar/section-form-link.hbs
View File

@ -11,11 +11,12 @@
{{on "dragleave" this.dragLeave}} {{on "dragleave" this.dragLeave}}
{{on "dragend" this.dragEnd}} {{on "dragend" this.dragEnd}}
{{on "drop" this.dropItem}} {{on "drop" this.dropItem}}
role="row"
> >
<div class="draggable" data-link-name={{@link.name}}> <div class="draggable" data-link-name={{@link.name}}>
{{d-icon "grip-lines"}} {{d-icon "grip-lines"}}
</div> </div>
<div class="input-group"> <div class="input-group" role="cell">
<IconPicker <IconPicker
@name="icon" @name="icon"
@value={{@link.icon}} @value={{@link.icon}}
@ -28,6 +29,7 @@
class={{@link.iconCssClass}} class={{@link.iconCssClass}}
@onlyAvailable={{true}} @onlyAvailable={{true}}
@onChange={{action (mut @link.icon)}} @onChange={{action (mut @link.icon)}}
ariaLabel={{i18n "sidebar.sections.custom.links.icon.label"}}
/> />
{{#if @link.invalidIconMessage}} {{#if @link.invalidIconMessage}}
<div class="icon warning"> <div class="icon warning">
@ -35,12 +37,13 @@
</div> </div>
{{/if}} {{/if}}
</div> </div>
<div class="input-group"> <div class="input-group" role="cell">
<Input <Input
name="link-name" name="link-name"
@type="text" @type="text"
@value={{@link.name}} @value={{@link.name}}
class={{@link.nameCssClass}} class={{@link.nameCssClass}}
ariaLabel={{i18n "sidebar.sections.custom.links.name.label"}}
{{on "input" (action (mut @link.name) value="target.value")}} {{on "input" (action (mut @link.name) value="target.value")}}
/> />
{{#if @link.invalidNameMessage}} {{#if @link.invalidNameMessage}}
@ -49,12 +52,13 @@
</div> </div>
{{/if}} {{/if}}
</div> </div>
<div class="input-group"> <div class="input-group" role="cell">
<Input <Input
name="link-url" name="link-url"
@type="text" @type="text"
@value={{@link.value}} @value={{@link.value}}
class={{@link.valueCssClass}} class={{@link.valueCssClass}}
ariaLabel={{i18n "sidebar.sections.custom.links.value.label"}}
{{on "input" (action (mut @link.value) value="target.value")}} {{on "input" (action (mut @link.value) value="target.value")}}
/> />
{{#if @link.invalidValueMessage}} {{#if @link.invalidValueMessage}}
@ -68,5 +72,6 @@
@action={{fn @deleteLink @link}} @action={{fn @deleteLink @link}}
@title="sidebar.sections.custom.links.delete" @title="sidebar.sections.custom.links.delete"
class="btn-flat delete-link" class="btn-flat delete-link"
role="cell"
/> />
</div> </div>