<html>
    <head>
      <base href="https://bugs.webkit.org/">
    </head>
    <body><table border="1" cellspacing="0" cellpadding="8">
        <tr>
          <th>Bug ID</th>
          <td><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - AX: meter and progress elements are ignored when -webkit-appearance: none is set"
   href="https://bugs.webkit.org/show_bug.cgi?id=232569">232569</a>
          </td>
        </tr>

        <tr>
          <th>Summary</th>
          <td>AX: meter and progress elements are ignored when -webkit-appearance: none is set
          </td>
        </tr>

        <tr>
          <th>Product</th>
          <td>WebKit
          </td>
        </tr>

        <tr>
          <th>Version</th>
          <td>Safari 15
          </td>
        </tr>

        <tr>
          <th>Hardware</th>
          <td>Mac (Intel)
          </td>
        </tr>

        <tr>
          <th>OS</th>
          <td>macOS 11
          </td>
        </tr>

        <tr>
          <th>Status</th>
          <td>NEW
          </td>
        </tr>

        <tr>
          <th>Severity</th>
          <td>Normal
          </td>
        </tr>

        <tr>
          <th>Priority</th>
          <td>P2
          </td>
        </tr>

        <tr>
          <th>Component</th>
          <td>Accessibility
          </td>
        </tr>

        <tr>
          <th>Assignee</th>
          <td>webkit-unassigned@lists.webkit.org
          </td>
        </tr>

        <tr>
          <th>Reporter</th>
          <td>nathan@knowler.me
          </td>
        </tr>

        <tr>
          <th>CC</th>
          <td>andresg_22@apple.com, webkit-bug-importer@group.apple.com
          </td>
        </tr></table>
      <p>
        <div>
        <pre>Created <span class=""><a href="attachment.cgi?id=442984" name="attach_442984" title="This HTML document is a minimal reproduction of the issue.">attachment 442984</a> <a href="attachment.cgi?id=442984&action=edit" title="This HTML document is a minimal reproduction of the issue.">[details]</a></span>
This HTML document is a minimal reproduction of the issue.

Overview:

Both the meter and progress elements are ignored in the accessibility tree when `-webkit-appearance: none` is set. This CSS rule is required to provide custom styles for the element.

Steps to Reproduce:

The following has been reproduced in the attached HTML document.

1. Use a meter or progress element in a document.
2. Set `-webkit-appearance: none` on the element in order to "remove" the UA styles to provide custom ones.
3. Test the accessibility of the element.
  a. Using VoiceOver, try to select the element on the page. It’s not possible.
  b. Using the Web Inspector, in the Elements panel, select the element, and, then in Node panel of the Details sidebar, go to the Accessibility section to see that Ignored is set to "Yes" and Role is set to "No matching ARIA role."

Actual Results:

The element can be styled as expected, however, it is no longer accessible by virtue of the fact that `-webkit-appearance: none` has been set. The element seems to have lost its implicit ARIA role and therefore is ignored.

Expected Results:

Authors should be allowed to use `-webkit-appearance: none` to remove the user agent styles for the meter and progress element (as currently works in Safari) without breaking the accessibility of the elements.

Build Date & Hardware:

- macOS 11.6
- Safari Version 15.0 (16612.1.29.41.4, 16612)</pre>
        </div>
      </p>


      <hr>
      <span>You are receiving this mail because:</span>

      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>