luci-compat: Suggested improvements to the save button in the luci interface for screen reader users

[dpy013]

Download the screen reader from here to complete the following test steps

Steps to reproduce:

1. go to: Network → Interfaces → LAN (an interface with a static address) → DHCP server tab → IPv6 RA settings tab
2. set RA MTU and RA Hop Limit to arbitrary non-default value
3. Save & Apply
   ps: Here, Save & Apply, a web control, can't be pressed correctly using the space bar properly using a screen reader.

Actual behavior:

When you save a configuration using a screen reader, the screen reader reports saving and applying ▾ Grouping

Expected behavior:

When using a screen reader to save a configuration, the screen reader should report the save and apply the ▾ button

Additional Information:

OpenWrt version 23.05.4and Latest Snapshots

[dpy013]

Below is a comparison of the code for footer.htm in the old version of luci and the new version of luci:

<%- if pageaction then -%>
<div class="cbi-page-actions">
	<% if redirect then %>
	<div style="float:left">
		<input class="cbi-button cbi-button-link" type="button" value="<%:Back to Overview%>" onclick="location.href='<%=pcdata(redirect)%>'" />
	</div>
	<% end %>

	<% if flow.skip then %>
		<input class="cbi-button cbi-button-skip" type="submit" name="cbi.skip" value="<%:Skip%>" />
	<% end %>
	<% if not autoapply and not flow.hideapplybtn then %>
		<input class="cbi-button cbi-button-apply" type="submit" name="cbi.apply" value="<%:Save & Apply%>" />
	<% end %>
	<% if not flow.hidesavebtn then %>
		<input class="cbi-button cbi-button-save" type="submit" value="<%:Save%>" />
	<% end %>
	<% if not flow.hideresetbtn then %>
		<input class="cbi-button cbi-button-reset" type="button" value="<%:Reset%>" onclick="location.href='<%=REQUEST_URI%>'" />
	<% end %>
</div>
<%- end -%>

<script type="text/javascript">cbi_init();</script>

<%+footer%>

<%
local display_back = (redirect and not flow.hidebackbtn)
local display_skip = (flow.skip)
local display_apply = (not autoapply and not flow.hideapplybtn)
local display_save = (not flow.hidesavebtn)
local display_reset = (not flow.hideresetbtn)

if pageaction and
   (display_back or display_skip or display_apply or display_save or display_reset)
then
	%><div class="cbi-page-actions"><%

	if display_back then
		%><input class="btn cbi-button cbi-button-link" type="button" value="<%:Back to Overview%>" onclick="location.href='<%=pcdata(redirect)%>'" /> <%
	end

	if display_skip then
		%><input class="btn cbi-button cbi-button-skip" type="button" value="<%:Skip%>" onclick="cbi_submit(this, 'cbi.skip')" /> <%
	end

	if display_apply then
		%><input class="btn cbi-button cbi-button-apply" type="button" value="<%:Save & Apply%>" onclick="cbi_submit(this, 'cbi.apply')"<%=ifattr(not writable, "disabled")%> /> <%
	end

	if display_save then
		%><input class="btn cbi-button cbi-button-save" type="submit" value="<%:Save%>"<%=ifattr(not writable, "disabled")%> /> <%
	end

	if display_reset then
		%><input class="btn cbi-button cbi-button-reset" type="button" value="<%:Reset%>" onclick="location.href='<%=REQUEST_URI%>'"<%=ifattr(not writable, "disabled")%> /> <%
	end

	%></div><%
end

%>

<script type="text/javascript">cbi_init();</script>

<%+footer%>