- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
generates input field behind select box
我正在尝试将标签标记与我的下拉菜单关联起来,以便屏幕阅读器可以访问它。我注意到,当使用 p:selectOneMenu primefaces 时,会生成一个不应该存在的输入元素。应用 p:outputLabel 时,它似乎工作正常(即单击标签文本,焦点移动到下拉菜单)。然而事实证明,焦点实际上正在移动到输入元素,并且选择元素无法通过键盘访问(tabindex =“-1”)。以下是来自 primefaces 网站的示例: http://www.primefaces.org/showcase/ui/input/oneMenu.xhtml
<h:form>
<p:messages autoUpdate="true" />
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
<p:outputLabel for="console" value="Basic:" />
<p:selectOneMenu id="console" value="#{selectOneMenuView.console}" style="width:125px">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
<f:selectItem itemLabel="PS4" itemValue="PS4" />
<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
</p:selectOneMenu>
<p:outputLabel for="car" value="Grouping: " />
<p:selectOneMenu id="car" value="#{selectOneMenuView.car}">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{selectOneMenuView.cars}" />
</p:selectOneMenu>
<p:outputLabel for="city" value="Editable: " />
<p:selectOneMenu id="city" value="#{selectOneMenuView.city}" effect="fold" editable="true">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{selectOneMenuView.cities}" />
</p:selectOneMenu>
<p:outputLabel for="advanced" value="Advanced:" />
<p:selectOneMenu id="advanced" value="#{selectOneMenuView.theme}" converter="themeConverter" panelStyle="width:180px"
effect="fade" var="t" style="width:160px" filter="true" filterMatchMode="startsWith">
<f:selectItems value="#{selectOneMenuView.themes}" var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" />
<p:column style="width:10%">
<h:outputText styleClass="ui-theme ui-theme-#{t.name}" />
</p:column>
<p:column>
<h:outputText value="#{t.displayName}" />
</p:column>
</p:selectOneMenu>
</h:panelGrid>
<p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" icon="ui-icon-check" />
<p:dialog header="Values" modal="true" showEffect="bounce" widgetVar="dlg" resizable="false">
<p:panelGrid columns="2" id="display" columnClasses="label,value">
<h:outputText value="Basic:" />
<h:outputText value="#{selectOneMenuView.console}" />
<h:outputText value="Grouping:" />
<h:outputText value="#{selectOneMenuView.car}" />
<h:outputText value="Editable" />
<h:outputText value="#{selectOneMenuView.city}" />
<h:outputText value="Advanced:" />
<h:outputText value="#{selectOneMenuView.theme.displayName}" />
</p:panelGrid>
</p:dialog>
当您查看仅加载 html 的页面时,您可以看到每个 p:selectOneMenu 都会生成一个输入和一个选择。
<td>
<label id="j_idt88:j_idt91" class="ui-outputlabel ui-widget" for="j_idt88:console_focus">Basic:</label>
</td>
<div id="j_idt88:console" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all" style="width:125px">
<div class="ui-helper-hidden-accessible">
<input id="j_idt88:console_focus" name="j_idt88:console_focus" type="text" autocomplete="off">
</div>
<div class="ui-helper-hidden-accessible">
<select id="j_idt88:console_input" name="j_idt88:console_input" tabindex="-1" data-p-label="Basic" data-p-hl="onemenu">
<option value="">Select One</option><option value="Xbox One">Xbox One</option>
<option value="PS4">PS4</option>
<option value="Wii U">Wii U</option>
</select>
</div>
<label id="j_idt88:console_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all">Select One</label>
<div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
<span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
</div>
</div>
我希望下拉菜单的行为类似于 JSF one h:selectOneMenu(当涉及到可访问性时)。具体到该示例,我希望“基本:”标签与其下拉菜单关联,以便当您单击“基本”时焦点移动到下拉菜单。我还希望屏幕阅读器实际上将其视为选择元素而不是输入元素。到目前为止,由于生成的输入元素,我无法找到执行此操作的方法。我目前使用的是 Primefaces 5.2。有谁知道如何防止生成此输入元素?
最佳答案
我放弃了 p:selectOneMenu
有两个原因:它不可访问,并且在移动设备上使用起来很痛苦,因为它没有带来 native 控件选择器(“例如,iPad 上的旋转轮”)。
相反,我使用自定义的 h:selectOneMenu
,例如:
<h:selectOneMenu
styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all #{component.valid ? '' : 'ui-state-error'}"
onmouseover="$(this).addClass('ui-state-active')"
onmouseout="$(this).removeClass('ui-state-active')"
onfocus="$(this).addClass('ui-state-active ui-state-focus')"
onblur="$(this).removeClass('ui-state-active ui-state-focus')"/>
它看起来并没有那么糟糕,它易于访问并且在移动设备上运行良好。
关于jsf - <p :selectOneMenu> generates input field behind select box,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31051097/
我是 Julia 的新手。 我主要用python编程。 在 python 中, 如果你想迭代大量的值, 通常构造一个所谓的生成器来节省内存使用。 这是一个示例代码: def generator(N):
这个问题很奇怪。我试图直接在 build.gradle 中添加一个字符串,因为我需要它来使用 Tray 库 ( https://github.com/grandcentrix/tray )。在我的第一
我正在尝试在我的新 symfony3 项目中使用生成 CRUD 功能。我创建了一个名为 AdminBundle 的 bundle ,其中包含生成器、实体测试以及生成器,所有这些都处理得很好。我检查了我
我尝试理解生成器,但我发现了一个我无法遵循的示例。 // First Generator function* Colors () { yield "blue"; yield* MoreColo
我将制作一款完全由程序生成的空间/交易/战斗游戏。但是,我知道将整个星系的所有细节存储在内存中是不可行的。因此,我一直认为我可以使用种子来生成太阳系,并且从该太阳系,您可以使用跳跃门前往其他太阳系。问
我在 Eclipse Helios 中使用 MyBatis Generator (MyBatis Generator 1.3.1.201101032122),但每次我自动生成持久类时,生成器都会删除属
@GenerateInterface class A {} @GenerateInterface class B { void setA(IA a) {} } 我的注释处理器应该生成这些接口(in
我刚刚在一个空目录中安装了 yeoman,它打印出一个错误。这就是我所做的: npm i yo -g npm i generator-webapp -g 之后我抛出一个错误: require('yeo
我正在使用 NReco PDFGenerator 从 HTML 字符串创建 PDF 文档。当表格被分页符拆分时,表格标题与表格中的下一行重叠(见下图)。 有想法该怎么解决这个吗? 最佳答案 我发现这是
我有这个命名空间: namespace :manage do # Directs /manage/products/* to Manage::ProductsController
我有一个 Open API 3 规范的 yaml 文件,它有一些 x- 前缀的属性。我正在尝试使用 openapi-generator-cli 生成一个 Angular Typescript SDK。
我有一个返回生成器的函数。目前它使用yield from: function foo() { $generator = getGenerator(); // some other st
我选择Symfony2 docs 。据说添加 /** * @ORM\Entity(repositoryClass="Acme\StoreBundle\Entity\ProductRepository
运行命令生成新的 rails 项目: $ rails generate controller home index 以上将创建四个新的 Rails 项目:generate、controller、hom
我们实际上已经将jvm内存增加到了256M,现在老年代看起来很小,但Perm Generation相当高,接近80%。通过 jstat 捕获的示例数据如下。高永久代意味着什么? Timestamp
class Invoice def Invoice.generate(order_id, charge_amount, credited_amount = 0.0) Invoice.new
我在写 this comparison为了帮助人们理解所有这些废话,目前看来,generator-angular 的好处和值(value)只是您使用 generator-angular-fullsta
我有一个包含以下代码段的 OpenAPI 规范文档(我无法控制): servers: - url: http://www.[someservice].com/api 我正在使用这个 OpenAPI
我正在使用 openapi-yaml 将 swagger 文件转换为开放的 API v3 文件。使用 Maven 生成器。 我想做的是将新文件直接放入某个目录。 但是会生成一些我不需要的其他文件,例如
我的生成器中有以下标准文件夹结构。我当前正在努力解决的任务是我目前有一个模板化的 _package.json ,我将其写入磁盘以用于主要生成。我想在编写的 package.json 中包含一个变量,它
我是一名优秀的程序员,十分优秀!